🙄
Next.jsでpageExtensionsを設定している場合はmiddlewareのファイル名も設定に準じたものにする必要がある
この記事は以下の環境について書いています。
バージョン等が違う場合は事情が異なる場合があるので注意してください。
- Next.js v13.3.0
Next.jsのpageExtensions設定とは？
Next.jsではpagesファイルを名前で区別つきやすくするために拡張子をカスタマイズできる機能としてpageExtensionsという設定を用意しています。
という設定にすると ではなく が参照される感じ。
Next.jsのmiddlewareとは？
Next.jsではEdgeでリクエストに応じた処理(e.g. レスポンスヘッダーの書き換え、リダイレクト等)を実行する仕組みとしてmiddlewareを用意しています。
Next.jsプロジェクトのrootディレクトリ配下に というファイルを配置しておくと書かれた処理が該当リクエスト処理時に実行されます。
pageExtensions設定がされている時はmiddlewareのファイル名に気をつける
Next.jsのドキュメントにはmiddelwareのファイル名は と記載されています。
ですがpageExtensions設定がされている時はmiddlewareファイルの名前もその設定に準じたものにしないと読み込んでくれません。
つまりpageExtensionsが以下のような設定の場合は
middlewareのファイル名は とする必要があります。
こちらの件は以下のPull Requestでmiddlewareのページに注意文が追加されましたが、
以下のPull Requestにて追加された注意文が削除されています。
削除理由としてはそもそもpageExtensions設定は頻繁に使われるものではなく、middlewareのドキュメントで注意を促すほど重要ではないとのことでした。わかる。
まとめ
pageExtensions設定をするとドキュメントに記載されたファイル名とは異なるファイル名をつけることがあり、場合によってはけっこうハマる(ハマった)ので、よっぽどのことがない限り設定するべきではなさそうです。