● 1. まずビルドを実行してエラーがあるかどうかを確認する

npm run build

next バージョンの確認

npx next --version

● 2. サーバーサイドのページがある場合は取り除く

こちらのように /api/ 以下のファイルはサーバーサイドとなりますので取り除きます

Page                                       Size     First Load JS
├ λ /api/hello                             0 B            86.6 kB

● 3. next.config.js 設定の変更

module.exports = {
  reactStrictMode: true,
}

　　　↓

module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
}

● 4. エクスポートの実行

npm run build ; npx next export

エクスポートが成功すると out ディレクトリに htmlファイルが生成されるので表示して確認します。 php でサーバを起動する場合は

php -S 0.0.0.0:8000 -t out

で http://localhost:8000/ へアクセスして確認します。

● Error: Image Optimization using Next.js' default loader is not compatible with next export. エラーの修正

・1. ＜Image＞タグを戻す

<Image> タグを使用していると 静的サイトエクスポートできないのでエラーとなります。
代わりに <img>タグに戻しましょう

・2. next/image を 削除する

// import Image from 'next/image'

・3. eslint の設定を変更する

あわせて .eslintrc.json の設定も変更します

{
  "extends": "next/core-web-vitals"
}

　　↓

{
  "extends": "next/core-web-vitals",
  "rules": {
    "@next/next/no-img-element": "off"
  }
}