← Next.js コース
10. Proxy(旧Middleware) — リクエスト前の共通処理
ページが表示される前に共通の処理を挟みたいときは、プロジェクトのルートに proxy.ts を置きます。export した proxy 関数の中で、受け取ったリクエストを見てリダイレクトしたり、ヘッダーを書き換えたり、別のパスへ書き換え(リライト)たりできます。リクエストが完了する前に割り込める点が特徴です。
実務では、ログインしていない人を特定ページからログイン画面へ飛ばす(簡易的なチェック)、A/Bテストでの出し分け、共通ヘッダーの付与などに使います。どのパスに適用するかは config の matcher で絞り込めます。重い処理やセッション管理そのものには向かない、と公式にも注意されています。
重要な変更点として、この機能は Next.js 16 で Middleware から Proxy に名前が変わりました(役割は同じ)。古い記事では middleware.ts と書かれていますが、最新では proxy.ts・proxy 関数が現在の名称です。1プロジェクトに1つだけ置けます。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// proxy.ts — プロジェクトのルートに置く(v16でmiddlewareから改称)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export function proxy(request: NextRequest) {
// 例: 未ログインなら /login へリダイレクトする
const isLoggedIn = request.cookies.has("session");
if (!isLoggedIn) {
return NextResponse.redirect(new URL("/login", request.url));
}
return NextResponse.next(); // そのまま通す
}
// matcher でこの処理を適用するパスを限定する
export const config = {
matcher: "/dashboard/:path*",
};