npm run build
next バージョンの確認
npx next --version
こちらのように /api/ 以下のファイルはサーバーサイドとなりますので取り除きます
Page Size First Load JS
├ λ /api/hello 0 B 86.6 kB
module.exports = {
reactStrictMode: true,
}
↓
module.exports = {
reactStrictMode: true,
trailingSlash: true,
}
npm run build ; npx next export
エクスポートが成功すると out ディレクトリに htmlファイルが生成されるので表示して確認します。 php でサーバを起動する場合は
php -S 0.0.0.0:8000 -t out
で http://localhost:8000/ へアクセスして確認します。
next export
. エラーの修正<Image> タグを使用していると 静的サイトエクスポートできないのでエラーとなります。
代わりに <img>タグに戻しましょう
// import Image from 'next/image'
あわせて .eslintrc.json の設定も変更します
{
"extends": "next/core-web-vitals"
}
↓
{
"extends": "next/core-web-vitals",
"rules": {
"@next/next/no-img-element": "off"
}
}