Next.jsでbasePath設定を行うとclient-side navigationが効かなくなった時の単純な見落とし箇所
Next.jsにて実装したプロダクトをサブディレクトリ配下へデプロイする為にbasePath設定を行いました。
const isProduction = process.env.NODE_ENV === 'production'
// ディレクトリ指定const DIRECTORY = '/sub-directory'
const nextConfig = { trailingSlash: true basePath: isProduction ? DIRECTORY : '', assetPrefix: isProduction ? DIRECTORY : '',}
module.exports = nextConfig
Pathは設定通りサブディレクトリを向いており特に問題なしかと思いきや、ページ遷移すると何故かclient-side navigation(クライアントナビゲーション)が効く箇所と効かない箇所が見られました。
basePathはproduction build時のみ設定する形をしていたので問題切り分けの為一律にbasePathを効かせ、local環境でも確認してみるもやはり特定の<Link />
のみclient-side navigationが効きません。
実装部分が原因なのは明白ですがしばらく同現象をググるも特にHITしません。なんだなんだ?と焦ってきましたが、よくよく考えるとclient-side navigationが効かないという状態はルーティングがうまくいっていない可能性がありそうです。
今一度該当箇所を確認するとpathname
の値にスラッシュが含まれていないではありませんか。
<Link href={{ pathname: 'post', query: { slug: item.slug }, }}> <a>{item.title}</a></Link>
そうですスラッシュ忘れにより遷移先がディレクトリではない意図しない形になっていたのが原因です。
/なし:http://localhost:3000/sub-directory/post?id=909
/あり:http://localhost:3000/sub-directory/post/?id=909(これが正の遷移先)
スラッシュを足して、正してあげれば万事解決。
<Link href={{ pathname: 'post', pathname: '/post', query: { slug: item.slug }, }}> <a>{item.title}</a></Link>
実に単純な見落としでした。