Next.js v12.2 で Stable になった middleware をアップグレードする記事

Next.js 12.2でStableになったMiddlewareのbetaからの変更点

ちょうと middleware を使っていたので読んだ。

Nested Middleware の廃止とか Edge Runtime で Buffer クラスが使えなくなったりとか色々あったけど、今回刺さったのはレスポンスを返せなくなったところ。

記事にもあるように、

return new Response('Auth Required', {
  status: 401,
  headers: {
    'WWW-Authenticate': 'Basic realm="Secure Area"',
  }
})

みたいな感じで気軽に返していたけど、これができなくなった。

なんで〜便利だったのに〜と思って公式ドキュメントを見たら、

middleware-upgrade-guide | Next.js

To respect the differences in client-side and server-side navigation, and to help ensure that developers do not build insecure Middleware, we are removing the ability to send response bodies in Middleware. This ensures that Middleware is only used to rewrite, redirect, or modify the incoming request

DeepL で翻訳すると

クライアントサイドとサーバーサイドのナビゲーションの違いを尊重し、開発者が安全でないMiddlewareを構築しないようにするために、Middlewareでレスポンスボディを送信する機能を削除しています。これにより、Middlewareは受信したリクエストの書き換え、リダイレクト、変更にのみ使用されるようになります。

レスポンスを返せると悪さができてしまうということか。

あと地味に気づきにくくて時間を使ったのが、ファイル名の変更。

もともと /pages/_middleware.ts とか、 /pages/hoge/_middleware.ts みたいにアンダースコアをつけていたが Stable になってアンダースコアが取れた。

また Nested Middleware は廃止になったため /pages/middleware.ts だけになる、と思い込んでいたのだが、ファイルを置く階層が変更になり pages ディレクトリと同階層になった。

つまり /pages と同じ /middleware.ts ということになる。

これに気づかずに結構時間を食ってしまった。