chakkun1121's blog

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にデプロイできます。これを知るまではゴリ押しでパスの解決を行っていましたが、これで安心師でデプロイできるようになりました。

参考資料