📄

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

commits1 min read

状況

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_PATHvalueには/<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 || '',
}
GitHubで編集を提案

Discussion

ログインするとコメントできます