2021/05/19
はじめに
Next.js でブログを SSG して，Github Pages にデプロイしようと思いました．
初めての React 系フレームワークだった(Gatsby も併せて初めて触りました)ので，手間取った点もあります．
多くの人が詰まりそうな点があったので公開します．
TL;DR
next exportする！
本題
何に困ったのか？
漠然と，next buildをすれば SSG されて，.next内に静的サイトが生成されるのかなーと思い込んでいた点．
そして，特に考えもせずに，ステージングのようなイメージで Firebase Hosting でブログを確認しようと考え，デプロイ用ディレクトリの設定をした後，firebase deployをした．
しかし，URL にアクセスすると，自分の作成したはずのページではなく，firebase initが生成したindex.htmlが表示された．
何が原因だったのか？
Next.jsのデプロイメントのページを確認してみた．
next buildbuilds the production application in the.nextfolder. After building,next startstarts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.
ここでいう production application というのは，Next.js で SSR するためということらしく，どうやら SSG するには他のアプローチが必要とのこと．
つまり，Github Pages や Firebase Hosting のような静的サイトをホスティングするサービスを使う場合は，next buildだけでは不十分だということらしい．
じゃあどう解決するのか？
結論から言うと，next exportをすると良い．
next exportは，
まずは，静的 HTML エクスポートの生成については，先程のデプロイメントのページの最下部からジャンプすることができる．
該当ページによると，next exportコマンドを用いると，outディレクトリに静的 HTML が生成されるとのこと．
また，SSG として Next.js を用いたい場合は，npm run buildを以下のように設定することが推奨されている．
"scripts": {
"build": "next build && next export"
}
ここまでで，npm run buildによってoutディレクトリにホスティングサービスにデプロイするためのファイル群が生成される．
そのまま，outをデプロイする設定をしてしまっても問題はない．
さらに便利に使いたい
outをデプロイしてもよいのだが，正直，デプロイするディレクトリの名前としては分かりづらい．
そこで，静的 HTML の生成ディレクトリ名をbuildにしようと思う．
next exportコマンドのヘルプを見ると・・・
$ next export --help
Description
Exports the application for production deployment
Usage
$ next export [options] <dir>
<dir> represents the directory of the Next.js application.
If no directory is provided, the current directory will be used.
Options
-h - list this help
-o - set the output dir (defaults to 'out')
-s - do not print any messages to console
ふむふむ，-oオプションで指定できるそうだ．
以下のように設定すると良い．
"scripts": {
"build": "next build && next export -o build"
}
おわりに
以上です．
今回は，build/に静的 HTML を保存することにしましたが，
今後 Next.js の理解が深まり，build/というディレクトリ名を他の用途で使う必要があれば，
out/を静的 HTML を保存する先に戻そうかと考えています．
参考
-
Next.jsのデプロイメントのページ