🐥

【NextJs14】NextJs14 と便利なライブラリ【#２Clerk Authentication】

2023/12/09に公開

Next.js

Clerk

tech

【#２Clerk Authentication】

YouTube: https://youtu.be/n0J5LvV3Cw4

https://youtu.be/n0J5LvV3Cw4

今回は「Clerk」を使用して、
認証機能を実装します。

https://clerk.com/

ライブラリのインストール 動画でのバージョン: "^4.27.5"
npm install @clerk/nextjs

ルートディレクトリ直下に以下のファイルを作成します。

.env

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YXB0LXR...
CLERK_SECRET_KEY=sk_test_EKf....

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

こちらのドキュメントに従ってプロバイダーとミドルウェアファイルを作成します。

サインインとサインアップページはこちらを参考にしてください、

各ディレクトリは

「app/sign-up/[[...sign-up]]/page.tsx」
「app/sign-in/[[...sign-in]]/page.tsx」

になります。

【#２Clerk Authentication】

Discussion