Next.jsで静的サイトを生成する方法について

本ページでは、Next.jsで静的サイトを生成する方法について解説します。

方法 #

package.json の下記個所を

"scripts": {
    "dev": "next dev",
    "build": "next build",  // ここを書き換える
    "start": "next start",
    "lint": "next lint"
},

以下のように書き換えます。

"scripts": {
    "dev": "next dev",
    "build": "next build && next export",  // ここを書き換える
    "start": "next start",
    "lint": "next lint"
},

そしてこの状態で npm run build を実行することによって静的サイトが生成されます。

next export というコマンドは Next.js のプロジェクトを静的サイトとして出力するコマンドです。デフォルトでは out/ というディレクトリにファイルが生成されます。

生成するファイルの出力先を変更するには、 next export コマンドに -o を渡します。

next export -o export/

静的ファイル生成は、表示するデータを事前にレンダリングしてHTMLにするため、JavaScriptを利用した幾つかの機能が利用できなくなります。

利用できなくなる機能については公式ドキュメントをご確認ください。

特に、 <Image> コンポーネントを利用した動的な画像サイズ変更などはチュートリアルでもよく利用される技術ですが、利用に制限が出てくる場合もあるためご注意ください。

Netlifyを利用してNext.jsアプリを静的サイトとしてデプロイしたい場合、 NETLIFY_NEXT_PLUGIN_SKIP という環境変数を true に設定する必要がある。この設定をしていない場合ビルドでこけてしまうため注意。