Next.js 15とNextAuth.js v5で認証ミドルウェアを構築する方法
Next.js 15とAuth.js v5を使用して、認証ミドルウェアを効率的に構築する方法を解説します。この設定により、特定のルートへのアクセス制御が可能になり、未認証のユーザーがアクセスした場合は自動的にログインページにリダイレクトされます。React 19のサポートも加わり、最新のフロントエンド技術スタックを活用した堅牢なアプリケーションを構築できます。
1. 認証ミドルウェアの概要
認証ミドルウェアを設定することで、特定のルートにアクセスがあった際にユーザーのセッションをチェックし、未認証の場合にはログインページにリダイレクトさせる処理を一元化できます。NextAuth.js v5のauth()メソッドは、サーバーサイドでも簡単にセッション情報を取得できるため、認証処理をシンプルに実装できます。
2. ミドルウェアの設定例
以下のコードでは、/dashboard以下のすべてのページに対して認証を適用しています。
import { auth } from "@/auth";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
export default auth(async (req: NextRequest) => {
// セッション情報を取得
const session = await auth();
// 未認証のユーザーはログインページにリダイレクト
if (!session) {
console.log("ユーザーは未認証です。ログインページにリダイレクトします。");
return NextResponse.redirect(new URL("/login", req.url));
}
// 認証済みの場合はそのまま次の処理へ進む
return NextResponse.next();
});
// matcherで特定のパスにのみミドルウェアを適用
export const config = {
matcher: ["/dashboard/:path*"],
};
3. コードの解説
auth()メソッドを使用してセッション情報を取得し、ユーザーがログインしているかどうかを判定します。
ログインしていない場合はNextResponse.redirectを用いて、ログインページ（/auth/login）にリダイレクトします。
config.matcherでは、/dashboard配下のパス（/dashboard/:path*）のみにこのミドルウェアを適用する設定です。これにより、ダッシュボード関連ページのみに認証が必要になります。
4. セッション管理の利便性
NextAuth.js v5では、auth()メソッドが導入され、APIルートやサーバーサイドで簡単にセッション情報を扱えるようになりました。これにより、複数のAPIエンドポイントやページで認証を統一的に管理でき、コードの再利用性が向上します。
5. より高度な認証制御のためのカスタマイズ
上記のミドルウェアは基本的な認証チェックのみですが、auth()メソッドを使ってユーザーの権限やロールを確認し、特定の役割を持つユーザーのみがアクセスできるページを設定することも可能です。また、APIリクエストごとにセッションチェックを追加し、APIレベルでのセキュリティも強化できます。
まとめ
Next.js 15とNextAuth.js v5の組み合わせにより、シンプルかつ柔軟な認証ミドルウェアの構築が可能です。セッション管理が簡素化されたことで、認証に関する設定が統一され、コードの保守性が向上します。新しい技術スタックを活用し、セキュアな認証システムをぜひ構築してみてください。
Discussion