Next.jsの認証実装の選択肢
Next.jsで認証を実装する方法は複数あります。それぞれのアプローチのメリット・デメリットを理解した上で、プロジェクトに合った方法を選択することが重要です。
主な認証実装の選択肢：
①NextAuth.js（Auth.js）：最も広く使われているNext.js用認証ライブラリ。ソーシャルログイン・メール/パスワード・JWTをシンプルに実装できる
②Clerk：完全マネージドな認証サービス。組み込みUIコンポーネントが充実しており実装が最速。月間アクティブユーザー1万人まで無料
③Supabase Auth：SupabaseのBaaS認証。PostgreSQLと組み合わせてRow Level Securityが使えます
④Auth0・Firebase Authentication：マネージド認証サービス。複雑なエンタープライズ要件に対応
本記事では最も汎用的で学習価値が高いNextAuth.js（Auth.js v5）の実装を中心に解説します。
NextAuth.js（Auth.js）のセットアップ
NextAuth.js（Auth.js）をNext.js App Routerに統合する手順を解説します。
インストール：
npm install next-auth@beta
Auth設定（auth.ts）の作成：
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import Google from 'next-auth/providers/google';
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [GitHub, Google],
session: { strategy: 'jwt' }
});
APIルートの設定：
app/api/auth/[...nextauth]/route.tsにhandlersからexportするだけで認証エンドポイントが完成します。
ソーシャルログインの設定
GitHub・GoogleなどのOAuthプロバイダーの設定方法を解説します。
GitHub OAuth Appの設定：
①GitHub → Settings → Developer Settings → OAuth Apps → New OAuth App
②Application name・Homepage URL・Authorization callback URL（http://localhost:3000/api/auth/callback/github）を設定
③Client ID・Client Secretを取得して環境変数に設定：AUTH_GITHUB_ID・AUTH_GITHUB_SECRET
Google OAuth Clientの設定：
①Google Cloud Console → APIとサービス → 認証情報 → OAuthクライアントIDを作成
②承認済みのリダイレクトURIにhttp://localhost:3000/api/auth/callback/googleを追加
③Client ID・Client Secretを環境変数に設定：AUTH_GOOGLE_ID・AUTH_GOOGLE_SECRET
セッション・JWTの管理
NextAuth.jsのセッション管理の仕組みとサーバー・クライアントでのセッション取得方法を解説します。
Server Componentでのセッション取得：
auth()関数を使ってサーバーサイドでセッションを取得できます。認証済みユーザーにのみアクセスを許可するページを実装できます。
Client Componentでのセッション取得：
useSession()フックを使ってクライアント側でセッション情報を取得できます。SessionProviderをレイアウトに追加することが必要です。
Middlewareによるルート保護
Next.jsのmiddleware.tsを使って、認証が必要なルートを一括で保護する方法を解説します。
middleware.tsの設定：
①Auth.jsのauthをmiddlewareとしてexport
②matcherでどのパスを保護するかを設定（例：/dashboard以下を保護）
③未認証ユーザーはサインインページにリダイレクト
特定のページのみ保護する方法（protectedPagesパターン）：公開ページと保護ページを明示的に分けて管理することで、誤って重要ページを公開してしまうリスクを防げます。
ロールベースのアクセス制御（RBAC）：JWTのcallbacks（jwt・session）でユーザーのroleをトークンに追加し、middleware・サーバー側でroleをチェックすることで管理者/一般ユーザーの権限制御が実装できます。