【Next.js】Next.js製の静的サイトをNetlifyにデプロイする

Next.jsで作った静的サイトをNetlifyにデプロイする時
の手順をメモしておく。

Next.jsの静的サイトプロジェクトの設定

Next.js製の静的サイトではビルドコマンドとして
下記の二つを実行する必要がある

• next build
• next export

package.jsonの編集

package.jsonには下記のように書く必要がある

Copy
~
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",
    "lint": "next lint",
    "export": "next build && next export"
  },
~

「yarn export」を実行すると

• next build
• next export

の二つが実行されるように設定しておく。
実行した結果は.nextディレクトリではなくoutディレクトリ内に格納される

netlify.tomlの作成

Netlifyはビルド時にNext.js用のプラグインが動作しているため
exportした後にsitemapを生成したい場合などはこのプラグインをスキップ
してやる必要がある。

プロジェクトルートにnetlify.tomlの作成して環境変数を設定すれば
スキップさせることができる。

Copy
[build.environment]
NETLIFY_NEXT_PLUGIN_SKIP = "true"

Netlify側の設定

上記のNext.js製の静的サイトのbuild設定に合わせて
Netlify側の「Build settings」も編集する必要がある。

• Build commandを「yarn export」にする※package.jsonと合わせる
• Publish directoryをoutにする

この状態でデプロイすればNext.js製の静的サイトをNetlifyにデプロイ
することができる。

補足

今回は自分はホームページ作成にあたり、sitemapを作成する必要があったので
「next export」をする必要があったが、exportコマンドにフックして何かしたい
ことがない場合は 通常のnext buildを実行すれば、特に問題なくデプロイできる。
NetlifyのPublish directoryも「.next」のままでいいし、「netlify.toml」も作成
する必要もない。

参考

• フレームワークの統合
• Next.jsの静的サイトをNetlifyでデプロイする時にexportコマンドを有効にする
• sitemap.xml を Next.js でビルド時に自動生成する