【Next.js】サブディレクトリにデプロイする

Next.jsでは、パスがデフォルトで/になっているらしい。

なので、例えばソース内で

<img src="/image/a.jpg">

みたいに書いた状態で、example.com/sub/にアプリをデプロイすると、example.com/image/a.jpgを探しに行ってしまいます。

このパスの問題については、next.config.jsに

module.exports = {
  assetPrefix: "/sub",
  basePath: "/sub",
};

のように書くと解決できます。

参考：Next.js アプリを GitHub Actions でビルドして GitHub Pages で公開する｜まくろぐ

ただし、上の方法で解決できるのは

next/image
next/link
その他webpackで自動生成されるJSファイル（/_next/static/などのファイル）

などだけであって、publicフォルダ内のリソースを自分で埋め込んでいる場合は効かないみたいです。

例えば

<img src="/image/a.jpg">

みたいに書いている場合は、自分でサブディレクトリに合わせたパスに直さないといけないらしいです。

なので、私は以下のような関数を作り、

export function addUrlPrefix(url: string) {
  return process.env.NEXT_PUBLIC_URL_PREFIX
    ? `/${process.env.NEXT_PUBLIC_URL_PREFIX}${url}`
    : url;
}

publicフォルダのリソースを使用している全部のパスに、以下のように上の関数でラップするようにし、

<img src={addUrlPrefix("/image/a.png")}/>

build時に、環境変数であるNEXT_PUBLIC_URL_PREFIXにsubのような文字列を渡すようにすることで解決しました。

NEXT_PUBLIC_URL_PREFIX=sub npm run build

（ちなみにNext.jsでは、NEXT_PUBLIC_という接頭辞を付けることで、ブラウザ上でも参照できる環境変数にできるみたいです）

基本機能：環境変数｜ Next.js

ただ、実装が終わってから気づいたのですが、以下の記事のやり方の方もあったみたいです。（どちらも実装の手間は同じくらい）

Next.js の public 以下のファイルのパスを正しく扱う｜まくろぐ

おわり