Next.jsの認証チェックはlayoutやpageではなくmiddleware.tsで行う / PaPut

mizulba

1年以上前

Next.jsの認証チェックはlayoutやpageではなくmiddleware.tsで行う

Next.js

フロントエンド

知識

運用

Next.jsのApp RouterでSSRな処理を行いたい時、layout.tsやpage.tsで行うが、next/LinkなどのCSRの画面遷移はキャッシュが効いているとSSRを通らない。そのため、画面遷移の度にチェックしたい認証チェックなどはmiddleware.tsを使う。

src/middleware.ts

export async function middleware(
  request: NextRequest
): Promise<NextResponse<unknown>> {
  const url = new URL(request.url);
  const accessToken = request.cookies.get('accessToken');
 
  // ここで認証チェックを行う
}

export const config = {
  matcher: ['/user/:path*', '/login'],
};

configのmathcerを設定すると、マッチするパスがチェックされる。