【Next.js】?page=n のリクエストがきたら /page/[page] にrewriteする

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

ファイルの階層は以下のようになっている

├── pages
│   ├── foo
│   │   ├── page
│   │   │   └── [page].tsx
│   │   └── index.tsx

ここで単純に以下のようにしてみたが出来なかったので調査した

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

nextjs.org

ドキュメントによると、rewreite設定でクエリパラメータをキャプチャしたい場合は以下のようにhasオブジェクトを使う

module.exports = {
  async rewrites() {
    return [
      {
        source: '/foo',
        has: [
          { 
            type: 'query',
            key: 'page',
            value: "(?<page>^[2-9]\\d*|[1-9]\\d{2,}$)",
          }
        ],
        destination: '/foo/page/:page',
      },
    ],
  },
}

typeにはheaderやcookie、host、queryが指定できる

keyにはtypeで指定したパラメータのプロパティ

valueは任意だが、指定する場合は正規表現を使用してフィルターしたものをキャプチャをすることができる

キャプチャはJavaScriptにおける名前付きキャプチャグループの記法になる

developer.mozilla.org

記法は(?<Name>x)で、 "x" に一致した値が、<Name> で指定された名前に従ってキャプチャされる

^[2-9]\\d*|[1-9]\\d{2,}$は2ページ〜999ページの値が来ることを想定した正規表現を記載した

これで?page=n のリクエストがきたら /page/[page] にrewriteすることができた