📝
[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が更新されただけのようですね。
対応方法は？
ページ側で強制的に外す感じでしょうか？（ちょっと適当です）
再リダイレクトするか、router.pushでasPathでパラメーターをなくすとか？かなと思います。
それならクエリ文字列を含むリダイレクトについてはnext.config.jsではなくはなからページ側で行うなどでも良いかもしれないですね。
参考にさせていただいたサイト
Discussion