[Next.js] GitHub Pagesに公開時の画像パスがズレる問題をbasePathを変えずに対処する方法

環境

• Next.js
  • ビルド: Static Generation
  • バージョン: 14.1.0
• GitHub PagesにNext.jsでビルドした静的サイトをテスト公開している
  • URL: https://username.github.io/repository-name/
• 本番時は別の独自ドメインを使う
• src/publicをsrc/assetsにシンボリックリンクを貼っている

問題

以下のような形で画像を表示しようとした場合、GitHub Pagesはサブディレクトリがベースになってしまうため、https://username.github.io/sugoi.pngにアクセスしようとしてしまう。

<img src="/sugoi.png" alt="すごい画像" />

ページがhttps://username.github.io/repository-name/であれば、以下のような指定をすれば良い。

<img src="sugoi.png" alt="すごい画像" />

ただ、https://username.github.io/repository-name/2nd/と階層を深くした場合は上記の方法では対応できない。

パスを変える

以下のように環境変数でパスを出し分けて、imgのsrcに指定をしていく方法もある。

const PATH = process.env.GITHUB_PAGES === 'true' ? '/repository-name' : '';

export default function Home() {
  return <img src={`${PATH}/sugoi.png`} alt="すごい画像" />;
}

ただ、これを続けていくのは面倒であり、GitHub Pagesのみでの対応の想定なのでシンプルにしたい。

対処方法

以下のような形でimportするとパスを取得できる。

※画像はpublicディレクトリに配置しているが、assetsディレクトリをシンボリックリンク経由でアクセスができる状態

import SignatureImage from '@/assets/signature.png';

export default function Home() {
  return <img src={SignatureImage.src} alt="" height="140" width="400" />;
}

以下のような画像情報を取得できる。

{
  src: '/_next/static/media/signature.3e8d984e.png',
  height: 140,
  width: 400,
  blurDataURL: '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsignature.3e8d984e.png&w=8&q=70',
  blurWidth: 8,
  blurHeight: 3
}