[next.js] next.config.jsでのリダイレクト。クエリパラメーター付きの注意点

概要

next.jsでリダイレクトを行ういくつかある方法で、next.config.jsを使用した方法について記載します。

基本

基本的なリダイレクト方法は公式を参照ください。
.htaccess だと $1 などを使用していたと思いますが、その辺りが :slug など書き方が違っていたりします。

クエリパラメータ付きのリダイレクト先への注意点

現在（2023.03.03時点）で、リダイレクト元のクエリパラメーター付きURLをリダイレクトの際に、パラメータを外してリダイレクトすることはnext.config.jsでの設定では難しいようです。

例

/old?qu=abc を /new へリダイレクトしたい
https://exsample.com/old?qu=abc
↓
https://exsample.com/new

上記を行いた場合下記のような設定になりますが、結果は https://exsample.com/new?qu=abc となってしまいます。

next.config.js

{
  source: '/old',
    has: [
      {
        type: 'query',
        key: 'qu',
        value: 'abc',
      },
    ],
  destination: '/new',
  permanent: false,
},

公式にも

When /old-blog/post-1?hello=world is requested, the client will be redirected to /blog/post-1?hello=world.

と記載があります。

下記のissueでReadmeが更新されただけのようですね。
https://github.com/vercel/next.js/issues/27194

対応方法は？

ページ側で強制的に外す感じでしょうか？（ちょっと適当です）
再リダイレクトするか、router.pushでasPathでパラメーターをなくすとか？かなと思います。

それならクエリ文字列を含むリダイレクトについてはnext.config.jsではなくはなからページ側で行うなどでも良いかもしれないですね。

参考にさせていただいたサイト