【Next.js】Middleware を最適化して実行を抑制する [Techblog#48]

Next.js では Middleware を使って、アクセスのあったリクエストに対して動的な処理を実行できます

例えば、リクエストに応じてリダイレクトしたり、ヘッダを付与したりできます

過去の記事だと、この辺が参考になるかなと思います

ただ、開発者モードを開いて見ると、本来のページ以外にも静的なアセットへのアクセスが多いことがわかります

具体的には /next/static から始まるアクセスです (青枠のアクセスが該当します)

これらのアクセスにも Middleware が実行されており、Edge Runtime の使用量としてカウントされます

当サイトの場合、静的なアセットは Middleware の制御が必要なかったので、抑制することにしました

実装はシンプルで middleware.ts に export const config を追加するだけです

export const runtime = 'experimental-edge'
export const middleware = async () => { ... }
export const config = {  matcher: [    // _next を除外    '/((?!_next/static|icon.ico).*)',  ],}

このような設定で matcher に一致するリクエストのみ Middleware が実行されるようになります

これで、静的なアセットへの実行を抑制できました 🎉