例えばhttps://example.com/game
という URL に成果物をアップロードするためにどこか/game
というディレクトリに置く必要があるとします。
その時に、デフォルト設定の成果物をアップロードしてしまうと、 NextJS は/_next/xxx.js
を読もうとしますが実際には/game/_next/xxx.js
である必要がある為読み込むことができません。
そんな時には、next.config.js
でassetPrefix
を設定します。これで生成されるファイルの参照パスの頭に指定したパスを付けることができます。
また、一応NODE_ENV=production
を付けた時だけプレフィックスを付けるという設定にしています。
これは成果物をローカルで確認したい時にローカルサーバーを建てて見るだけで簡単にチェックできるようにするためです。(/game/_next/xxx.js
とかになるとそういうディレクトリ構造でサーバーを建てないと駄目で面倒)
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
assetPrefix: isProd ? 'https://example.com/game' : '',
};
package.json
のscripts
は以下のようにします。
{
"scripts": {
"next.build": "next build",
"next.export:prod": "NODE_ENV=production next export",
"next.export:dev": "next export",
"build:prod": "yarn next.build && yarn next.export:prod",
"build:dev": "yarn next.build && yarn next.export:dev
}
}
あとは適当なbuild.*
を実行するといいと思います。
yarn build:prod # 本番用ビルド
yarn build:dev # 確認用ビルド