Netlify で Next.js のアプリケーションをデプロイする際の注意点 #React

ReactのフレームワークNext.jsで作成されたアプリケーションは、同じくZEITが提供しているNowでデプロイすることが一般的なようです。
他方で、GitHub PagesやNetlifyのような、汎用的な静的サイトホスティングサービスを使ってデプロイしたい場合もあるでしょう。
これまでcreate-react-appコマンドによる雛形をもとにReactで書きNetlifyにホスティングしていた自分のウェブサイトを、今回Next.jsのフレームで書き直してみたのですが、Next.jsに関してはそもそも日本語の記事が少ないこともあり、気をつけた方がよいと感じた初歩的なポイントをメモしておこうと思いました。

ビルドコマンドの指定は正しく

https://github.com/zeit/next.js/#usage にあるように、本番環境では

next build
next export

この2つのコマンドでデプロイします。これを一つのコマンドとして、 npm run deploy で実行できるように、package.jsonのscriptsに

"scripts": {
  "dev": "next",
  "build": "next build",
  "export": "next export",
  "deploy": "npm run build && npm run export"
}

という風にコマンドを追加しておきましょう。さらに、生成されるページの中身はデフォルトではoutというディレクトリの中に作成されることにも注意して、Netlifyの初期設定画面で、"Build command" をnpm run deployに、 "Publish directory" をoutにしておきましょう。

以上と同様のことが https://www.sanity.io/blog/tutorial-host-your-sanity-based-next-js-project-on-netlify の1.と3.に、より詳しく記述されています。

リダイレクト設定は netlify.toml に書ける

SPAサイトを netlify にデプロイする際は、

_redirects

/*   /index.html   200

を本番環境の直下に置くことで、ページの再読み込みで404になってしまうような現象を回避できます。（https://www.netlify.com/docs/redirects/ の "HISTORY PUSHSTATE AND SINGLE PAGE APPS" や https://crieit.net/posts/Netlify-404 などを参照）
ただ、npm run deployで生成されるoutディレクトリの中に_redirectsは含まれず、あらかじめ用意しても上書きされてしまいます。そこで、元のディレクトリの直下（package.jsonなどと同じ階層）に netlify.toml を用意して、

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

などと記述しておけば、同じ効果が得られます。
netlify.toml には他にも様々な設定を含めることができるので、何か設定を行いたい場合はhttps://www.netlify.com/docs/netlify-toml-reference/ を見ておくと良さそうです。

現在のNext.jsの安定版（Next 7）では404ページのカスタマイズ設定で注意が必要

現在の Next 7 では、デフォルトでは、例えば pages/hoge.js を用意した場合には /hoge/index.html が生成されます。オリジナルの404エラー画面に関しても pages/_error.js を用意するのですが、これが /404/index.html という階層関係でhtmlを生成してしまいます。Netlify、あるいはGitHub Pagesでは、本番環境直下に404.htmlを置かないと正しくオリジナルの404エラー画面を出せません。
この問題は

Export 404.html when running `next export` without `exportPathMap` #5035

で指摘され、

fix: update correct path to use when exporting 404 page #5470

で解決したようなので、近い将来の Next 8 では問題にならなくなるでしょう。ただ現状では npm install --save next@^8.0.0-canary.7 などと次期予定バージョンを指定してあげる必要があります。
あるいは（私は試せていませんが） https://github.com/zeit/next.js/#copying-custom-files にあるように、デフォルトの defaultPathMap を修正して、 exportPathMap を新たに定義させることで、現在の安定版でもうまく 404.html を置けるかもしれません。