Next.jsでMiddlewareが大量に実行される場合の対処法

Next.jsでWEBアプリケーションを開発している時に、middlewareが大量に叩かれるという問題が発生した。
Supabaseを使用しており、middlewareでgetUser()が大量に叩かれてAPIのLimit制限を食らっていた。

諸々調査した結果、解決したので記載しておく。

環境

• Vercel
• Supabase
• Next.js（１４．x） App Router

解決方法① PreFetchではMiddlewareをパスするように設定

<Link>を使用していると、prefetchが行われるため、リストページなどでは大量にmiddlewareが実行される。

RLSを導入しているので、ログインしていなければ、ログインページにリダイレクトされればOK。

middleware.ts

export async function middleware(req: NextRequest) {
    ...
}

// Ensure the middleware is only called for relevant paths.
export const config = {
  matcher: [
    {
      source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
      missing: [
        { type: "header", key: "next-router-prefetch" },
        { type: "header", key: "purpose", value: "prefetch" },
      ],
    },
  ],
};

解決方法② 静的画像はmiddlewareをパスするように設定

コンポーネントのファイル内に画像を入れていると画像が呼び出される度にmiddlewareが実行される。
sourceでブロック出来ていると思ったけど、そうではないらしい。

middleware.ts

export async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;

  // 画像ファイル系は処理をしない
  if (
    pathname.endsWith(".svg") ||
    pathname.endsWith(".ico") ||
    pathname.endsWith(".jpg") ||
    pathname.endsWith(".jpeg") ||
    pathname.endsWith(".png") ||
    pathname.endsWith(".gif")
  ) {
    return NextResponse.next();
  }
    ・・・
}

これで、middlewareに画像系の場合は、次の処理に進ませないで処理を終了させる。

---

この二つで、middlewareが１ページで複数回実行される問題は解決した。
なんかあれば追記します。