Next.jsで動的URLをRewriteする

ブログをNext.jsに移管する際に、タグ一覧のURLを /tags/:slug => /tags/:slug/posts に変更した。

新規アクセスの場合は新しいURLで問題ないが検索エンジンにインデックスされているデータは旧URLなので、そのままだと404ページになってしまう。

そこでnext.config.jsにRewrites設定を追加。

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/tags/:slug',
        destination: '/tags/:slug/posts',
      }
    ]
  },
}

module.exports = nextConfig

これで /tags/:slug にアクセスした場合も /tags/:slug/posts が表示されるようになった。

metaタグのcanonicalには新URLが指定してあるので、検索エンジンに新URLがインデックスされるようになったらRewrite設定を削除する予定。

参考

• Rewrites with dynamic routes · Discussion #13170 · vercel/next.js