最近ポートフォリオをNext.jsで作ろうと思っていて完成したのでGithubPagesにデプロイしたのだが一部の表示がおかしくなったまま表示された。

表示としては静的なhtmlのような感じでwebpackとかその辺のバンドルされたファイルが読み込めていなかった感じ。

そもそもGithubPagesの注意点

そもそもGithubPagesは二つ以上のリポジトリで使うとどちらかがサブディレクトリで配下になってしまうのでシンプルに***.github.ioで表示させたい場合に注意したい。（この場合リポジトリ名を[自分のアカウント名].github.ioにする）

独自ドメインとかは知らん。その場合は独自ドメインとかLetsencryptとか使ってサブディレクトリでもなんかいい感じにするはず

シンプルにGithubPagesにデプロイするNext.jsの設定

/** @type {import('next').NextConfig} */
const branchName = "";
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  assetPrefix: branchName,
  basePath: branchName,
}

module.exports = nextConfig

上記のように書けばよい。そうすればドメイン配下の/_next/static/css/とか/_next/static/chunks/のjsとかを拾ってこれるので表示が崩れることはないはず。

ここからドメインの配下にある場合はここのbranchnameにそのディレクトリ名を入れるといけるはず。