Next.js 15 では、特に高度なサーバー コンポーネント、アクション API、およびミドルウェア機能により、認証の処理がより堅牢かつ柔軟になりました。この記事では、Next.js 15 アプリケーションに認証を実装するためのベスト プラクティスを探り、サーバー コンポーネント、ミドルウェア、アクション、セッション管理などの重要なトピックを取り上げます。
目次
- Next.js 15 の認証の概要
- 認証の設定
- 認証にサーバー コンポーネントを使用する
- アクションによる認証の処理
- 認証ガード用のミドルウェアの実装
- セッション管理とセキュリティのベストプラクティス
- 結論
Next.js 15 の認証の概要
Next.js 15 では、サーバー側のレンダリング機能が強化され、特にサーバー コンポーネントとアクション API のコンテキストで認証を処理するための新しいツールが導入されています。サーバー コンポーネントを使用すると、機密データをクライアントに公開することなくサーバー上で認証を安全に管理でき、アクション API によりシームレスなサーバー通信が可能になります。ミドルウェアは、ルートを保護し、ユーザーの権限を動的にチェックするのに役立ち、認証フローをより安全でユーザーフレンドリーなものにします。
認証の設定
まず、アプリに適した認証戦略を選択します。一般的なアプローチには次のようなものがあります:
-
JWT (JSON Web Tokens): トークンがクライアントに保存されるステートレス アプリに最適です。
-
セッションベースの認証: サーバー上にセッション ストレージがあるアプリに適しています。
-
OAuth: サードパーティプロバイダー (Google、GitHub など) との統合用。
1. 認証用に next-auth をインストールする
OAuth を必要とするアプリケーションの場合、Next.js は next-auth と適切に統合され、セッションとトークンの管理が簡素化されます。
Next.js 15 セットアップで /app/api/auth/[...nextauth]/route.ts を使用して構成します:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import NextAuth from "next-auth" ;
import GoogleProvider from "next-auth/providers/google" ;
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
pages: {
signIn: "/auth/signin" ,
},
};
export default NextAuth(authOptions);
|
ログイン後にコピー
ログイン後にコピー
認証にサーバーコンポーネントを使用する
Next.js 15 では、サーバー コンポーネントを使用してサーバー上でコンポーネントをレンダリングし、データへのアクセスを安全に制御できます。
サーバー コンポーネントでのユーザー セッションの取得: これにより、クライアント側の状態への依存が軽減され、クライアントでの機密データの公開が回避されます。ユーザー セッション データをサーバー コンポーネントで直接取得できます。
サーバーコンポーネントでのサーバー側認証チェックの例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { getServerSession } from "next-auth/next" ;
import { authOptions } from "../api/auth/[...nextauth]/route" ;
import { redirect } from "next/navigation" ;
export default async function DashboardPage() {
const session = await getServerSession(authOptions);
if (!session) {
redirect( "/auth/signin" );
}
return (
<div>
<h1>Welcome, {session.user?.name}</h1>
</div>
);
}
|
ログイン後にコピー
ログイン後にコピー
ここで、getServerSession はユーザーのセッション データをサーバー上で安全に取得します。有効なセッションがない場合、リダイレクト機能によりユーザーはログイン ページに送信されます。
アクションによる認証の処理
Next.js 15 の Actions API は、クライアントから直接サーバー関数と対話する方法を提供します。これは、ログイン、ログアウト、登録アクションに特に役立ちます。
例: ログインアクションの作成
コンポーネントでのログインアクションの使用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | import NextAuth from "next-auth" ;
import GoogleProvider from "next-auth/providers/google" ;
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
pages: {
signIn: "/auth/signin" ,
},
};
export default NextAuth(authOptions);
|
ログイン後にコピー
ログイン後にコピー
loginAction はサーバー アクションとして安全に定義されており、クライアントは機密データを公開することなくそれをトリガーできます。
認証ガード用のミドルウェアの実装
Next.js 15 のミドルウェアは、ページを読み込む前にサーバー上の認証ステータスを確認することでルートを保護する強力な方法を提供します。
ルート保護用のミドルウェア例
/dashboard や /profile などのページを保護するには、middleware.ts にミドルウェアを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import { getServerSession } from "next-auth/next" ;
import { authOptions } from "../api/auth/[...nextauth]/route" ;
import { redirect } from "next/navigation" ;
export default async function DashboardPage() {
const session = await getServerSession(authOptions);
if (!session) {
redirect( "/auth/signin" );
}
return (
<div>
<h1>Welcome, {session.user?.name}</h1>
</div>
);
}
|
ログイン後にコピー
ログイン後にコピー
セッション管理とセキュリティのベスト プラクティス
安全なセッションを維持し、ユーザー データを保護することは、どの認証フローにおいても重要です。
-
トークンストレージに HTTP のみの Cookie を使用する:
- JWT を localStorage または sessionStorage に保存しないでください。 XSS 攻撃を防ぐには、HTTP のみの Cookie を使用します。
-
セッションの有効期限とリフレッシュ トークン:
- 有効期間の短いアクセス トークンとリフレッシュ トークンを実装して、セッションの安全性を確保します。これには next-auth のセッション管理機能を使用できます。
-
ロールベースのアクセス制御 (RBAC):
- ユーザーに役割を割り当て、その役割に基づいてアクションを承認します。 next-auth では、これはセッション オブジェクトを使用するか、ミドルウェアとアクションを通じて実行できます。
-
クロスサイト リクエスト フォージェリ (CSRF) 保護:
- CSRF 保護を使用して、悪意のあるサイトからの不正なリクエストを防ぎます。 next-auth にはデフォルトで CSRF 保護が含まれています。
-
安全なヘッダーと HTTPS:
- 常に HTTPS 経由でアプリケーションを提供し、Content-Security-Policy、Strict-Transport-Security、X-Frame-Options などの安全なヘッダーを設定します。
結論
Next.js 15 は、認証を安全に管理するための堅牢なツールとコンポーネントを提供します。サーバー コンポーネント、アクション、ミドルウェアを活用することで、機密データがサーバー上で確実に保護され、クライアントに情報が公開されるリスクが軽減されます。
以上がNext.js 認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。