Next.js で静的サイトをビルドする手順メモ

Next.js で記事のような静的コンテンツを書き出すとき、最初に next build が本番サーバーとして動く前提の設定になっていてハマりました。環境も含めてメモに残しておきます。

前提環境

• Next.js 14（App Router）
• Node.js 20 LTS
• ホスティング: 静的ファイルを nginx で配信

手順

1. next.config.mjs で静的出力を有効にする
2. 画像最適化を使わない設定に切り替える
3. output: 'export' を指定してビルド
4. out/ ディレクトリの内容をホスティング先へアップロード

// next.config.mjs
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true }
};

export default nextConfig;

ハマったポイント

• output: 'export' と next/image の組み合わせは、unoptimized: true にしないとビルドがエラーになります。
• 動的ルート（[slug] など）を使う場合は generateStaticParams を忘れずに。忘れると該当ページが生成されません。
• trailingSlash: true にすると、/blog/ のような URL がそのまま静的に出るので、nginx の設定と揃えると迷いにくいです。

まとめ

npm run build

で out/ が生成されれば成功です。あとは中身を public_html などにそのままアップロードするだけで配信できます。生成物の量が少なければ確認も速いので、最初に一度中身を眺めることをおすすめします。