Next.js(SSG)で出力したサイトをサブディレクトリに設置する方法

Next.jsのnext export機能を使って静的サイトを出力し、example.com/sub-path/のようなサブディレクトリに設置するには、いくつかの設定が必要です。この記事では、設定方法と、正しく設定しなかった場合に起こる不具合、またGitHub Pagesにデプロイする場合の補足も含めて解説します。

サブディレクトリ設置に必要な設定

まず、next.config.tsに以下の設定を行うことで、本番環境でのみ/sub-pathを有効にし、ローカル開発時には無効化できます。

1import type { NextConfig } from 'next';
2
3const subPath: string =
4  process.env.NODE_ENV === 'development' ? '' : '/sub-path';
5
6const nextConfig: NextConfig = {
7  output: 'export',
8  trailingSlash: true,
9  basePath: subPath,
10  assetPrefix: subPath,
11};
12
13export default nextConfig;
14

basePathはルーティングのベースパスを、assetPrefixはJSやCSSなどのアセットの読み込み先を指定します。これらがサブパスに対応していないと、出力されたHTMLが画像やスクリプトを正しいパスで参照できず、Webページが正しく動作しません。

設定しない場合に起こる不具合

• ページが読み込まれてもCSSやJavaScriptが反映されない
• 画像が表示されない
• <Link>などでのページ遷移が機能しない

これらの不具合は、アセットやリンクのパスが/sub-pathを考慮せずに/から始まってしまうことが原因です。

静的出力の実行とデプロイ

以下のコマンドで、Next.jsのビルドと静的ファイルの出力を行います。

1npx next build && npx next export

出力されたoutフォルダの中身を、Webサーバの/sub-pathディレクトリにアップロードしてください。

(おまけ) GitHub Pagesにデプロイする場合の補足

GitHub Pagesでは、_next/などアンダースコアで始まるフォルダが無視されるため、出力先のpublicディレクトリに空の.nojekyllファイルを配置する必要があります。

このファイルがあることで、GitHub PagesのJekyll処理をスキップし、Next.jsのフォルダ構造を正しく扱ってくれます。

まとめ

• サブディレクトリに対応させるにはbasePathとassetPrefixを適切に設定する
• 設定しないとCSS・JS・画像のパスが誤り、サイトが正しく表示されない
• GitHub Pagesに配置する場合は.nojekyllを追加する

このように、静的出力をサブディレクトリに設置する場合はパスの扱いに注意が必要です。正しく設定することで、快適なデプロイと動作が可能になります。