1. 공식 문서에 나와있는 install 방법을 사용해서 터미널에 입력하기.
2. 키를 복사해 .env 파일에 복사 붙여넣기 해준다.
3. 미들웨어를 추가해준다. (프로젝트 루트 폴더)
미들웨어는 들어오는 모든 요청에 대해 사용자의 인증 상태를 확인한다. 이를 통해 보호된 라우트에 대한 접근을 제어 가능. 세션 관리, 라우트 보호, 사용자 정보 제공 등의 역할을 한다.
4. layout.tsx에 ClerkProvider를 감싸준다.
5. 각 폴더 네임을 sign-in/[[...sign-in]] 과 같이 만들어주고 페이지를 생성한다.
공식문서에 나와 있는 내용이다. route는 꼭 저렇게 해줘야한다.
6. UserButton 컴포넌트를 사용해서 불러오기
인증이 완료된 모습!
7. Next.js API에서 사용자 정보 가져오기
import { auth } from "@clerk/nextjs/server";- import로 clerk/nextjs/server에서 불러온다.
사용할 곳에 정의해준다.
const { userId } = auth();8. afterSignOutUrl은 이제 쓸때마다 입력하지 않아도 된다. provider 최상위에 전달하면 된다.
'왜?'