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/>タグを利用するようにする。

良い方法がないか調査中（★ いい方法があればコメントいただければと思います）。

以下の記事が参考になるかと思ったが、脆弱性(high)を含む npm パッケージが含まれており、node_modules が汚くなるかもしれないと思い保留中（2022 年 1 月調査時点）