Next.js のビルド・エクスポート方法
package.jsonファイルに以下のスクリプトを追記する。
"scripts": {
// -o 出力先ディレクトリを指定
"build": "next build && next export -o output", // ★追記
},
以下のコマンドで実行する。
npm run build
next/image を使用していると next export でエラーとなる
Next.js で利用を推奨されているImage (next/image パッケージ)を利用していると、next export 実行時にエラーとなり、静的 HTML が生成されない問題がある。
2021 年 12 月現在、Next.js を使用した静的 HTML ファイルを作成する場合、Imageパッケージは next export ではサポートされていない。
<Image/>タグを使用して画像を表記している場合は <img/>タグを使用することでnext export 実行時のエラーを回避できるため、本プロジェクトでは画像ファイル利用時には <img/>タグを利用するようにする。
<img/>タグを利用した際の画像最適化
良い方法がないか調査中（★ いい方法があればコメントいただければと思います）。
検討したこと
以下の記事が参考になるかと思ったが、脆弱性(high)を含む npm パッケージが含まれており、node_modules が汚くなるかもしれないと思い保留中（2022 年 1 月調査時点）