Next.js で Static Site Generation したアプリをサブディレクトリに配置する
Nextはデフォルトでアセットがrootに配置されている前提でビルドする。しかし、SSRでビルド済みファイルをサクッとGithub Pagesにデプロイしたい場合などサブディレクトリにデプロイするケースで困ってくる。デフォルトではアセットをrootに読みに行ってしまって404になってしまうので、真っ白。相対パスで参照されるようにしたい。
assetPrefix を利用すると参照先のURLを変更可能。
開発ビルド時には特に困らないので、本番ビルドでのみ assetPrefix が指定されるようにする。
code:next.config.js
const isProd = process.env.NODE_ENV === "production";
/** @type {import('next').NextConfig} */
const config = {
assetPrefix: isProd ? "." : undefined,
};
module.exports = config;