経緯
Next.jsの静的HTMLエクスポート機能（Static HTML Export）を使うと、サーバーにNode.jsを必要とせずに、クライントのみで実行できる静的HTMLにアプリを出力することできます。
ただし、create-next-appでスキャフォールディングしたプロジェクトに用意されているdevコマンドで起動したアプリはサーバーサイドレンダリング（以下SSR）が有効になっており、静的HTMLのみの確認ができません。
そこでNext.jsで静的HTMLエクスポートしたアプリをローカルで確認する方法を調べました。
確認環境
- Node.js - 12.4.1
- Next.js - 9.5.2
設定方法
サンプルプロジェクトを作成します。すでに作成済みの場合は飛ばします。
$ npx create-next-app my-static-site
$ cd my-static-site
serveというパッケージをインストールします。静的ファイルをホスティングするローカルサーバーを建てることができます。
開発でのみ使用するため-Dオプションを指定しています。
$ yarn add -D serve
最後にpackage.jsonのnpmスクリプトを修正します。
静的ファイルを出力するexportコマンドと、ローカルサーバーを立ち上げるserveコマンドを定義します。
next exportではファイルはデフォルトで./outディレクトリに出力されます。
そのため、serve ./outでホスティングするディレクトリを指定しています。
SSRせず、完全に静的HTMLエクスポートしかしない場合、誤認防止の為に不要なコマンド削除しても良いと思います。
"scripts": {
- "dev": "next dev",
- "build": "next build",
- "start": "next start"
+ "export": "next build && next export",
+ "serve": "yarn export && serve ./out"
},
実際に下記のコマンドを打つと以下のように表示されます。
$ yarn serve
