Next.jsにClerk認証を導入する方法

TL;DR

Clerkのパッケージと環境変数を設定し、ミドルウェアとClerkProvider、サインイン用ページを追加すれば、Next.jsに認証を導入できる。保護対象外のルートやログイン後の遷移先も設定でき、UserButtonによるアカウント管理やWebhookを使ったユーザーデータ連携にも拡張できる。

Transcript

はいどうも皆さんこんにちはしです今回は ですねクラークというですね認証サービス をNEXTJSのプロジェクトに導入する 方法について紹介していきたいと思います で僕ね今個人プロダクトで生成を使った サービス作ってるんですけどそちらでね 認証をね実装しなきゃいけないのでま ついでにえまこのクラークを使った認証 ってのはYouTubeで取り扱ってこ なかったのでこちらを実装しようと思い ますはいでこのクラークっていうサービス なんですけどま実際にログインとかサイン するためのUIだったりとかあとは ユーザーの管理だったりとかWebフック とかですねそういったものをね非常に簡単 にそして素早く実装することができる サービスになってますのでま個人 プロダクトでもね全然利用できる認証 サービスなのでま... Read More

Key Insights

• Clerkは、サインイン画面やユーザー管理画面などの既製コンポーネントを提供し、Next.js側では必要なコンポーネントを配置して認証画面を構築できるサービスである。
• Clerkの導入は、Next.js向けパッケージのインストール、環境変数の保存、ミドルウェアの配置、ClerkProviderによる全体のラップという順序で進められる。
• middleware.tsは、ソースディレクトリを使う今回のプロジェクトではその配下に置く必要があり、プロジェクト直下ではミドルウェアが発火せず、移動後に動作した。
• サインインとサインアップのルートは、任意キャッチオールセグメントで作成すると、そのURLより下の複数階層もまとめて処理でき、Clerkの認証フローに対応できる。
• 公開ルートはサインインとサインアップに限定し、それ以外を保護対象に設定すると、未認証で通常ページへアクセスした利用者を認証画面へリダイレクトできる。
• 認証完了後の遷移先は環境変数で指定でき、今回の例ではサインインとサインアップの遷移先をディスカバーページに設定し、意図した移動を確認している。
• SignedInでUserButtonを囲む構成は、認証済みの場合だけユーザーアイコンを表示し、画像やメールアドレスの変更、サインアウトなどの管理機能を提供する。
• ClerkのWebhookはユーザー作成イベントを受信できるため、登録時にSupabase側へ利用者のレコードや初期クレジットを追加する処理の起点として利用できる。
• 🎬 このチャンネルの他の動画:
  • Figma MCPでAI感のないUIを作る方法
  • Next.js App Routerを最適設計する方法
  • AI時代にNext.jsの基礎を学ぶ方法
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Next.jsにClerk認証を導入する方法は？

Clerkでアプリケーションを作成し、Next.js向けパッケージをインストールして、発行された値を.env.localへ保存します。次にmiddleware.tsを配置し、ルートレイアウトをClerkProviderでラップします。最後にサインインとサインアップのルートへClerkの既製コンポーネントを配置すれば、基本的な認証画面を構築できます。

Q: ClerkでGoogleログインを有効にする方法は？

Clerkのアプリケーション作成画面でGoogle認証を有効にしてからアプリケーションを作成します。今回の例では、Googleログインに加えてメールアドレスでも認証できる設定が選ばれています。講師は、ユーザー名、メールアドレス、パスワードを毎回入力する負担を減らす目的で、Googleログインを用意する方針を示しています。

Q: Clerkのmiddleware.tsが動かないときの確認方法は？

まずmiddleware.tsの配置場所を確認します。今回のプロジェクトでは、プロジェクト直下に置いた状態ではログが出ず、ミドルウェアも発火しませんでした。ファイルをソースディレクトリ内へ移動すると処理が動き、未認証時のリダイレクトも成功しています。ソースディレクトリを使う構成では特に配置先の確認が必要です。

Q: Clerkで未認証ユーザーをサインイン画面へ移動する方法は？

ミドルウェアでサインインとサインアップを公開ルートとして指定し、それ以外のルートを保護します。この設定により、認証されていないユーザーが通常ページへアクセスするとサインイン画面へリダイレクトされます。認証画面そのものまで保護すると利用できなくなるため、認証用URLは公開対象に含めます。

Q: Clerkのサインイン画面を中央に配置する方法は？

サインインコンポーネントをdiv要素で囲み、Tailwind CSSの幅、高さ、Flexbox、中央揃えのクラスを指定します。今回の例では、ヘッダーを追加した後に画面の高さからヘッダー分を差し引いて位置を調整しています。認証用のルートグループに専用レイアウトを置けば、認証画面だけにヘッダーを表示する構成にもできます。

Q: Clerkでログイン後のリダイレクト先を指定する方法は？

サインインとサインアップ後のリダイレクトURLを環境変数へ設定します。今回の例では遷移先としてディスカバーページを指定し、クライアント側で読み取れるように変数名の先頭へNEXT_PUBLICを付けています。設定後に同じアカウントでログインし直し、指定したページへ移動することを確認しています。

Q: Clerkでログイン中だけユーザーアイコンを表示する方法は？

ClerkのSignedInコンポーネントでUserButtonを囲み、表示したい場所へ配置します。SignedInは認証状態に応じて内部の表示を制御するため、未認証時にはアイコンが表示されません。UserButtonをクリックすると、画像やメールアドレスの変更、アカウント管理、サインアウトなど、Clerkが用意した管理画面を利用できます。

Q: ClerkのWebhookで初期クレジットを付与する方法は？

ユーザー作成イベントを受信するWebhook用APIをNext.jsに作り、Clerkのダッシュボードへ公開エンドポイントを登録します。イベントを受信したら、Supabaseに用意したクレジット用テーブルへ対象ユーザーの初期クレジットを追加する処理を実装できます。ローカルURLは登録できないため、検証時はngrokで一時的な公開URLを用意する手順が紹介されています。

Summary & Key Takeaways

• 導入の基本手順は、Clerkでアプリケーションを作成し、Google認証やメールアドレス認証を選択して、ClerkのNext.js向けパッケージをインストールする流れである。発行された環境変数を.env.localへ保存し、middleware.tsを配置したうえで、ルートレイアウト全体をClerkProviderでラップする。ソースディレクトリを採用する構成では、ミドルウェアもその配下に置く必要があった。

• サインインとサインアップの画面は、App Routerに任意キャッチオール形式のルートを作り、Clerkが提供するコンポーネントを配置して構築する。認証用ルートだけを公開し、それ以外をミドルウェアで保護すると、未認証ユーザーをサインイン画面へ誘導できる。ログイン後の遷移先は環境変数で指定し、クライアント側で参照する変数にはNEXT_PUBLICの接頭辞を付ける。

• 認証後の画面にはSignedInとUserButtonを組み合わせ、ログイン中だけユーザーアイコンを表示できる。UserButtonから画像やメールアドレスの管理、サインアウトが可能である。さらに、ユーザー作成イベントをWebhookで受信すれば、Supabaseのクレジット用テーブルへ初期値を登録する処理に発展させられる。ローカルのWebhook検証では、公開URLを用意するためにngrokの利用が紹介されている。