React Academy · レッスン

Middlewareベースのルート保護

Next.js middlewareとauth callbacksを使い、edgeで未認証ユーザーをリダイレクトします。

「Middlewareベースのルート保護」はCoddyKit上の無料React Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

Next.js ミドルウェアとは

ミドルウェアは、リクエストがルートに到達する前に Edge で実行されます。リダイレクト、リライト、ヘッダーの追加ができるため、サーバーコンポーネントを読み込まずに認証チェックを行うのに適しています。

ミドルウェアの作成

プロジェクトルートにmiddleware.tsを作成します。middleware関数とconfigの matcher をエクスポートしてください。

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

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

Matcher パターン

matcher配列ではパスパターンを使用します。任意のサブパスには:path*を使い、否定先読みでパスを除外できます。

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Auth.js ミドルウェア統合

Auth.js（v5）には、すぐに使えるミドルウェアのエクスポートが用意されています。matcher とともにmiddleware.tsから再エクスポートしてください。

// middleware.ts
export { auth as middleware } from '@/auth';

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

ミドルウェアでの JWT チェック

joseライブラリを使ってミドルウェアで JWT トークンを検証してください（Edge に対応しており、Node.js の crypto モジュールは必要ありません）。

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

ロールベースのミドルウェア

トークンからユーザーのロールを読み取り、権限が不十分な場合は未認証ページにリダイレクトしてください。

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

ルートハンドラーへのデータの受け渡し

ミドルウェア内でリクエストヘッダーを設定し、トークンを再取得せずにデコード済みのユーザーデータをサーバーコンポーネントへ渡してください。

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

ミドルウェアでの URL のリライト

NextResponse.rewrite()を使うと、ブラウザーのアドレスバーを変更せずに別のページを表示できます。A/B テストや機能フラグに便利です。

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

ミドルウェアでの地域情報と IP

NextRequestオブジェクトからリクエストの地域情報と IP を取得し、地域に応じたリダイレクトやブロックに利用できます。

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

ミドルウェアのパフォーマンス

ミドルウェアは、マッチしたすべてのリクエストに対して Edge で実行されます。処理を軽量に保ち、負荷の大きい計算や大規模なインポートは避けてください。Edge 対応のライブラリだけを使用してください。

認証ルートと公開ルートの組み合わせ

よく使われるパターンは、認証ロジックの前に特定の公開パスの許可リストを確認し、それ以外のすべてを保護する方法です。

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

確認問題

Node の crypto モジュールの代わりに、Next.js ミドルウェア内で JWT を検証するにはどのライブラリを使うべきですか？

まとめ

プロジェクトルートにmatcher設定を含むmiddleware.tsを作成します。Edge 対応のjoseで認証トークンを確認し、未認証ユーザーをリダイレクトして、レスポンスヘッダー経由でデコード済みのデータをサーバーコンポーネントに渡してください。ミドルウェアは高速かつ依存関係を少なく保ちます。

よくある質問

「Middlewareベースのルート保護」レッスンは無料ですか？

はい。「Middlewareベースのルート保護」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Middlewareベースのルート保護」で何を学びますか？

Next.js middlewareとauth callbacksを使い、edgeで未認証ユーザーをリダイレクトします。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Middlewareベースのルート保護」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る