신비한 개발사전

최근 간편한 authentication 솔루션으로 Clerk가 많이 보이고 있어서 한번 활용해 보기로 했다. 대부분의 메이져 프레임워크를 지원하고, 공식 문서도 잘 정리돼있어서 빠르게 시작할 수 있다. 마침 사용자 로그인 기능이 필요한 Next.js 프로젝트가 있어서 바로 @clerk/nextjs 패키지를 설치해 사용해봤다. Clerk 서비스 사용에 필요한 퍼블릭과 시크릿 키는 .env.local 파일에 추가하면 된다고 한다. Clerk에서 제공하는 API를 사용하려면 우선 를 wrap 시켜준다. 앱 최상위에 provider를 적용해 두면 모든 페이지에서 Clerk의 인증 관련 훅을 사용할 수 있게 된다.import { ClerkProvider } from "@clerk/nextjs";export def..

Next.js 13 이상부터 App Router를 사용하면서 내비게이션 동작 방식이 변경됐다. 이전 버전의 pages 디렉토리를 사용하던 Pages Router에서 app 디렉토리를 사용하는 App Router로 전환하려면 라우터 관련 코드를 수정해줘야 한다. useRouter 훅 사용App Router에서도 클라이언트 컴포넌트에 한해 useRouter 훅으로 router를 생성해 router.push() 메소드를 사용할 수 있다. 다만 기존 Pages Router의 "next/router"에서 import하던 라우터를 App Router에서 그대로 사용하게 되면 "NextRouter was not mounted." 오류가 발생한다. App Router 디렉토리에 생성된 컴포넌트의 경우 useRouter..