next.jsでgithub pagesのサブディレクトリにビルドする方法
投稿日:2023/10/19
1. next.config.jsを編集する
1/* 公開時のサブディレクトリ */
2const SUB_DIRECTORY = "/blog"; //これは適切な値にしてください。
3
4/* 本番環境と開発環境の分岐用のフラグ */
5const isProd = process.env.NODE_ENV == "production";
6/** @type {import('next').NextConfig} */
7const nextConfig = {
8 output: "export",
9 basePath: isProd ? SUB_DIRECTORY : "",
10 assetPrefix: isProd ? SUB_DIRECTORY : "",
11 publicRuntimeConfig: {
12 basePath: isProd ? SUB_DIRECTORY : "",
13 },
14};
15
16module.exports = nextConfig;
2. github actionsの設定をする
これについてはこちらを参考にしてください。
最後に
このようにしてnext.jsをgithub pagesにデプロイできます。これを知るまではゴリ押しでパスの解決を行っていましたが、これで安心師でデプロイできるようになりました。