middleware.ts -> proxy.ts

proxy.ts

import { NextRequest } from "next/server";

export default function proxy(req: NextRequest) {
  console.log("middleware", req);

  return NextResponse.next();
}

export const config = {
  matcher: ["/edit/:path*"],
};

proxyの { } 内：
- リクエストの前に実行する内容
config.matcher：
- proxyの内容を実行するルート
- :path*が付くと「後ろの階層にも適用」という意味

NextResponse.next()

middleware の処理を**そのまま続けて通常通りにリクエストを通す（次に進める）**ためのレスポンスです。
これを書くことで「このmiddlewareはリクエストを止めない・書き換えない」という明示的な意思表示になります。

NextResponse.next()の部分が無くてもproxyは機能する

ライブラリ：ラッパーが必要

様々なライブラリのDocsにはproxy.tsに書くコードが掲載されているが、大抵の場合ミドルウェア関数がそのままexportされているだけなので、他のproxy処理を書く場所がない。

next-intlの例：

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';

export default createMiddleware(routing);

対策はラッパー：

const intlMiddleware = createMiddleware(routing);

export async function proxy(req: NextRequest) {
  
// 自分の処理

  return intlMiddleware(req);
}

上記は自分の処理を行うために、ライブラリのミドルウェア（上記はintlMiddleware）をmiddlewareでラップしている。
処理の流れは自分の処理の後にライブラリのミドルウェアが実行される

用途の例

1 . ルート保護

例：ユーザーがログイン（ next-auth ）していない場合 /sign-in ルートにリダイレクト。対象は /edit 以下のルート

import { NextRequest, NextResponse } from "next/server";
import { auth } from "./lib/auth";

export default async function proxy(req: NextRequest) {
  const session = await auth();

  if (!session) {
    return NextResponse.redirect(new URL("/sign-in", req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/edit/:path*"],
};

リダイレクト先は絶対URL

絶対URLとしてリダイレクト先を指定する

 return NextResponse.redirect(new URL("/sign-in", req.url));

req.url でドメイン部分（xxx.com）を取り出し、そこに左側の"/sign-in"をくっつけて絶対URLを生成
上記の例だと https://xxx.com/sign-in へリダイレクト

2 . 言語の切り替え

*next-intlを使っている場合は内部的に自動で行われる

例：リクエストの前にブラウザの accept-languageに基づいてリダイレクトさせる

import { NextRequest, NextResponse } from "next/server";

export default function proxy(req: NextRequest) {

  const pathname = req.nextUrl.pathname;
  const lang = req.headers.get("accept-language") || "";
  const locale = lang.includes("ja") ? "ja" : "en";

  return NextResponse.redirect(new URL(`/${locale}${pathname}`, req.url));
}

export const config = {
  matcher: ["/((?!_next|api|favicon.ico).*)"],
};

/${locale] の部分だけ切り替わる
*このproxyだとユーザーが手動で言語を切り替える余地を与えない点に注意

ルートによる処理の分岐

export const config = {
  matcher: ["/api/:path*", "/admin/:path*"], 
};

matcherで複数パスの指定はできるが、ルート毎にproxy処理を分けたい場合はどうするか

export function proxy(req: NextRequest) {
  if (req.nextUrl.pathname.startsWith("/api")) {
    // /api/* の処理

  } else if (req.nextUrl.pathname.startsWith("/dashboard")) {
    // /dashboard/* の処理
  }
  return NextResponse.next();
}

req.nextUrl.pathname でパスを確認して分岐
共通処理は分岐の前に書く

Nextjs：middleware ( proxy.ts )

Nextjs：middleware ( proxy.ts )