Next.jsの静的サイトをNetlifyでデプロイする時にexportコマンドを有効にする

Next.jsで実装した静的サイトをNetlifyでデプロイするとexportコマンドを実行できずにハマってしまった。

通常Next.jsで静的サイトを実装するには下記コマンドでHTMLを生成する。

1
$ next build & next export

だけどNetlifyはビルド時にNext.js用のプラグインが動作している。
そのため、Netlifyのビルドコマンドを下記のようにbuildだけを設定すればそれだけでサイトが公開される。

1
next build

通常は困ることはないけれど、exportしたあとにサイトマップを生成するなど、exportコマンドにフックして何かしたい場合にNetlifyのプラグインを使うと意図した通りにならない。

そこでプロジェクトのルートにnetlify.tomlを作成して下記の用に環境変数を設定すればプラグインの動作を無効にできる。

1
2
[build.environment]
NETLIFY_NEXT_PLUGIN_SKIP = "true"

Netlifyのドキュメントは下記
https://docs.netlify.com/integrations/frameworks/#next-js

これでpackage.jsonに記載したexportをNextlifyのビルドコマンドに設定すれば、postexportのコマンドも動作させられるようになる。

1
2
3
4
"scripts": {
  "export": "next build & next export",
  "postexport": "next-sitemap --config sitemap.config.js"
}

目次