応用

proxy（旧middleware）

なぜ学ぶか： 「ログインしていない人が/dashboardに来たら/loginに飛ばしたい」— 全ページにifを書くのではなく、入り口で一括処理するのがproxyです。例を見てください。

まずはこの例を見てみましょう

// proxy.ts（プロジェクト直下）— 全リクエストの「関所」
export function proxy(request: NextRequest) {
  // ログインの証（cookie）が無ければ /login へ転送
  const session = request.cookies.get("session");
  if (!session) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next(); // 問題なければ通す
}

// 関所を置く場所: /dashboard 配下だけに限定
export const config = { matcher: ["/dashboard/:path*"] };

ページに届く「前」に実行され、「通す・転送する」を判断する関所です。

proxy＝全リクエストの関所

ページに届く前に実行されます。例では「ログインの証が無い人は/loginへ転送」しています。

matcherで置く場所を絞る

例のconfig.matcherで対象を/dashboard配下に限定しています。指定しないと画像やCSSまで巻き込むので、実質必須です。

軽い処理だけ置く

全リクエストで動くので、重い処理を置くと全ページが遅くなります。cookieの確認くらいに留めます。

少し前までmiddlewareという名前だった

Next.js 16でmiddlewareからproxyに改名されました。AIは古い名前（middleware.ts）で生成しがち。見かけたら「proxyの旧名だ」と読み替え、新規に書くならproxy.tsにします。

コード例

// proxy.ts（プロジェクト直下）— 全リクエストの関所
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function proxy(request: NextRequest) {
  // ログインの証（cookie）が無ければ /login へ転送
  const session = request.cookies.get("session");
  if (!session) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  return NextResponse.next(); // 通す
}

// 関所を置く場所: /dashboard 配下だけに限定
export const config = { matcher: ["/dashboard/:path*"] };

AIが認証つきアプリを作ると必ず登場します。「全ページに認証チェックを書き散らす」より「関所1つ」の方が漏れがありません。AIが古い名前middleware.tsで生成してきたら、proxy.tsに読み替えましょう。

ステップ 1 / 2

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。