Next jsをGitHub Pageにデプロイしたときにnext/linkが正しく遷移するようにする

状況

Nextjs のプロジェクトで GitHub Pages にデプロイし下のようなコードを書いた時に https://aaaaaaaaaaaaaa.github.io/bbbbbbbbbbbb/page1 に遷移してほしいのに https://aaaaaaaaaaaaaa.github.io/page1 に遷移してしまう。

<Link href="/page1">
  <a>リンク</a>
</Link>

解決策

GitHub 側

GitHub の Settings > Environments から github-pages を選んで環境変数名には BASE_PATH、value には /<Github Pagesのリポジトリ名> を入力する

Next.js 側

next.config.js でこのように trailingSlash を true にすることで html ファイルが pagepath/index.html のように生成されるようにした生成されるようにし、basePath と assetPrefix を GitHub Pages のベース URL 設定します。これを入力してから、もう一度ビルドすると正しくページが遷移するようになります。

next.config.js

module.exports = {
  trailingSlash: true
  assetPrefix: process.env.BASE_PATH || '',
  basePath: process.env.BASE_PATH || '',
}