Next.jsで静的ビルドする方法

　この記事では，Next.jsで静的サイトをビルドする方法をご紹介します．

静的ビルドとは？
静的ビルドの手順
1. next.config.mjsの編集
2. 今度こそ動いてくれるか...

静的ビルドとは？

　静的ビルドの方法をご紹介する前に，Next.jsで作成したWebアプリケーションのデプロイに必要なビルドと呼ばれる手順について簡単にまとめてみます．

ビルドの必要性

　Next.jsのソースファイルをそのままFTPでApacheの「public_html」等にアップロードしても，残念ながら，Webアプリケーションにアクセスすることはできません．これは，Next.jsのソースファイルをWebブラウザが直接的に認識し，レンダリングすることが出来ないためです．

　このソースファイルを“ブラウザが認識・レンダリングできる形式”に変換してあげる作業のことを，ビルドと呼びます．ビルドには，人間が書いた高級言語を機械語に翻訳するコンパイルやファイル同士の統合・結合を行うリンキング等が含まれます．

通常のビルド

　Next.js標準のコマンドでビルドを行うことができます．

npm run build

続けて，「npm run start」コマンドを実行すると，ビルド済みのWebアプリケーションにアクセスされるため，「npm run dev」によるローカルホスト立ち上げの時と比べ，動作が速くなります．

通常ビルドにおけるデプロイ

「npm run build」を実行する前に，next.config.mjsの中身を以下のように変更しておきます．

/** @type {import('next').NextConfig} */
const nextConfig = {
   output: "export",
};
export default nextConfig;

こうすることで，ビルド時に ./out ディレクトリ（静的サイト）が出力され，デプロイの下準備が完了します．

あとは，Next.jsのプロジェクトフォルダをGitHubにPushすれば，GitHub PagesやVercelにデプロイすることができます．

GitHub Pagesにデプロイする場合はGitHub Actionsの作成，Vercelにデプロイする場合はGitHubリポジトリ連携が必要になります．

（完全）静的ビルド

　先ほどの手順で ./out ディレクトリには，HTMLファイルやVanilla JSファイルが生成されてはいるのですが，これらのファイルをそのままFTPでApacheの「public_html」にアップロードしても，残念ながらページは上手く表示されないはずです．

　この段階では，パス周りに不備があり，HTMLから必要なCSSやVanilla JSを呼び出せない状態です．何となくそれっぽいサイトは表示されるものの，「ボタンを押しても動かない，CSSで装飾されていない，フォントが埋め込まれていない」といった状態にあると思います．

　今回は，生成AIに相談した結果，パス周りを上手いこと調整する方法を確立できたので，備忘録を兼ねて記事にまとめたいと思います．

静的ビルドの手順

　概ね通常のビルドと同じですが，細かい違いがあるので，相違点をピックアップしてご紹介します．

next.config.mjsの編集

　前述の通り，パスを微調整してあげる必要があります．

　例えば，「http://localhost:3000/my-app」や「http://example.com/my-app」の「my-app」のように，Prefixが付いたURLにアクセスしてWebアプリケーションを実行する場合は，basePathを追加する必要があります．

/** @type {import('next').NextConfig} */
const nextConfig = {
   basePath: '/my-app',      // これを追記
   output: "export",
};

export default nextConfig;

今度こそ動いてくれるか...

　今度は，CSSやフォントによる装飾がなされており，Vanilla JSの処理も問題なく実行されているように見えます...　が！

　ここで，もう１つ致命的な問題がありました． Next.jsのルーティングでは，「http://localhost:3000/my-app/login」や「http://localhost:3000/my-app/dashboard」のような形式でURLが定義されるのですが，先ほどのビルドで生成された ./out ディレクトリの中身は，

/out
  └─ my-app
      └─ index.html
      └─ auth.html      
      └─ dashboard.html

このようになっています．

どうやらこのままでは，「http://localhost:3000/my-app/login.html」や「http://localhost:3000/my-app/dashboard.html」のように，末尾にhtml拡張子を明示した形でアクセスする必要があるようです．

　かと言って，HTMLのリンクを全て末尾にhtml拡張子を明示した形に置き換えるのは，果てしない作業になりそうです．高々これ位の規模であれば，何とかなりそうですが，本格的なWebアプリケーションとなれば，この方法は現実的ではありません．

　そこで，再び生成AIに相談することにしました．方針としては，「http://localhost:3000/my-app/login」の形式でアクセスがあったものに対し，自動で末尾のhtmlを補完してくれないかというものです．自動で補完する.htaccessを書いてくれました．

<IfModule mod_rewrite.c>
    RewriteEngine On
    # 拡張子なしでアクセスされた場合、自動で .html を補完
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ $1.html [L]
</IfModule>

これでルーティング（ページ遷移）も含めて動作してくれるようになりました．

後は，この .htaccessをプロジェクトのルートに配置し， ./ out 全体をFTPでアップロードすれば，身近なレンタルサーバ上でも簡単にNext.jsアプリをデプロイすることができます．