Next.jsでbasePath設定を行うとclient-side navigationが効かなくなった時の単純な見落とし箇所

2022/06/28（火）

Next.jsにて実装したプロダクトをサブディレクトリ配下へデプロイする為にbasePath設定を行いました。

next.config.js

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>

実に単純な見落としでした。