ユーザーアイコン

mizuko

3か月前

0
0

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を設定すると、マッチするパスがチェックされる。