課題

Next.jsで作成したアプリケーションを静的ウェブサイトとしてExportしたい。そこでpackage.jsonのbuildの箇所を書き換えた上で

"scripts": {
  "dev": "next dev",
  "build": "next build && next export", <----ここ
  "start": "next start",
  "lint": "next lint"
},

npm run buildしたところ、

npm run build

以下のようなエラーがでてExportに失敗する。

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Configure `images.unoptimized = true` in `next.config.js` to disable the Image Optimization API.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at C:\MyFile\GitHub\personal-website\src\node_modules\next\dist\export\index.js:149:23
    at async Span.traceAsyncFn (C:\MyFile\GitHub\personal-website\src\node_modules\next\dist\trace\trace.js:79:20)

解決

next.config.jsで画像を最適化させないよう設定する。下記のimagesの項目の部分がそれ。

const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    images: {
      unoptimized: true,
    },
  }

このようなことをする必要があるのは、Next.jsの仕様による。

  This is because Next.js optimizes images on-demand, as users request them (not at build time).

（意訳：（デフォルトでは）Next.jsは画像をユーザーのリクエストがあった際にオンデマンドで最適化する。最適化が行われるのはビルド時じゃない）