Next.jsの認証実装の選択肢
Next.jsで認証を実装する方法は複数あります。それぞれのアプローチのメリット・デメリットを理解した上で、プロジェクトに合った方法を選択することが重要です。
| 選択肢 | 特徴 | 向くケース |
|---|---|---|
| NextAuth.js (Auth.js) | 最も普及・OSS・ソーシャル/JWTをシンプル実装 | 汎用・学習価値高い・自前管理 |
| Clerk | 完全マネージド・組み込みUIで最速・MAU1万まで無料 | UI構築を省きたい・スピード重視 |
| Supabase Auth | BaaS認証・PostgreSQL RLS と統合 | Supabase 採用プロジェクト |
| Auth0 / Firebase Auth | マネージド・エンタープライズ要件対応 | 大規模・複雑な要件 |
本記事では最も汎用的で学習価値が高い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プロバイダーの設定方法を解説します。
| プロバイダー | 設定場所 | callback URL / 環境変数 |
|---|---|---|
| GitHub | Settings → Developer Settings → OAuth Apps | /api/auth/callback/github / AUTH_GITHUB_ID・SECRET |
| Google Cloud Console → 認証情報 → OAuth クライアント | /api/auth/callback/google / AUTH_GOOGLE_ID・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をチェックすることで管理者/一般ユーザーの権限制御が実装できます。
