【Next.js】dynamicルートじゃないindexルートのrewrite設定

Next.js v14で/fooというリクエストがあった時に、URLはそのままで/foo/barというページを表示させるようにrewriteしたい

この時、フォルダの階層は以下のようになっていて、/fooはindexルートと呼ばれるルーティングになっている（foo.tsx, bar.tsxでもいい）

├── pages
│   ├── foo
│   │   └── index.tsx
│   ├── bar
│   │   └── index.tsx

この時、rewriteの設定をnext.config.jsに書くのだが、以下のように書いてもrewreiteがされなかった

module.exports = {
  async rewrites() {
    return [
      {
        source: '/foo',
        destination: '/bar',
      },
    ]
  },
}

ドキュメントを確認したところ、rewrites関数で配列を返す場合、ファイルシステム（page および /publicファイル）のルーティングチェック後、dynamicルートのルーティングチェック前にrewriteが適用されるとのこと

When the rewrites function returns an array, rewrites are applied after checking the filesystem (pages and /public files) and before dynamic routes.
next.config.js Options: rewrites | Next.js

つまり、/fooはpageに該当するため、rewrite前にルーティングチェックが終わってしまっていることになる

この制御を変えるには、配列ではなく、beforeFilesやafterFiles、fallbackをキーに持つオブジェクトを返すようにする必要がある

beforeFilesはファイルシステムのルーティングチェック前にrewriteさせたい設定を記載する時のためで、今回はこれを使う必要があった

module.exports = {
  async rewrites() {
    return {
      beforeFiles: [
        {
          source: '/foo',
          destination: '/bar',
        },
      ]
    }
  },
}

配列を返す時と同じ設定はafterFilesであり、ファイルシステムとdynamicルートの両方のチェック後にrewriteを適用させたい場合はfallbackを使う