Next.jsで静的サイトを生成した際に出てくる Error: Image Optimization using Next.js .. について

本ページでは、Next.jsで静的サイトを生成した際に出てくることがあるエラーの解決方法に関するページです。

解決方法 #

解決方法1 (optimization無効化)#

リポジトリのルートディレクトリに以下の内容のファイルを next.config.js として作成します。

const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true
    }
}

module.exports = nextConfig

output: ディレクティブは静的サイトを生成するための設定です。 images: ディレクティブで unoptimized: true を設定する事で optimization を無効にする事ができます。

この状態で再度 npm run build によってエラーを回避できます。

解決方法2 (静的サイト生成に対応したoptimization対応CDNの利用?)#

Loaderを明示することで機能を利用する方式もあるようなのですが、リンク先のマニュアルを少し下にスクロールしていくと以下の記述があります。 (下線は当サイトが引いたもの)

Images can not be optimized at build time using next export, only on-demand. To use next/image with next export, you will need to use a different loader than the default. Read more in the discussion.

下線部の通り、Github discussion のスレッドにリンクされているのみで具体的な解決方法が記述されていません。個人的にはそこまで必要な機能ではなかったのでこれ以上の調査はしておりません...。

説明 #

エラー内容 #

表題の件のエラーとは静的サイト生成の設定で npm run build を実行した際の以下のエラーのことです。 Next.js 14.0.4 で確認しています。

> Image Optimization using the default loader is not compatible with 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

このエラーは静的サイトを生成する際に出力される可能性があります。 Next.jsでは配信する画像のサイズ最適化を実施していますが、これは動的に行われるものであるため静的サイトを作成した際には利用することができません。そのためこの最適化機能を無効にするか、配信時の画像サイズ最適化に対応するCDNを loader を明示する必要があります。

エラー内容(Next.js 12.x でのエラー)#

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
....

解決方法1で解決した際のWarning #

解決方法1 で解決した場合、ビルド時に下記のWarningログが出ます。

9:46:34 PM: warn  - You have enabled experimental feature (images) in next.config.js.
9:46:34 PM: warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

解決方法1 では experimental という実験的な機能 (まだ開発段階の機能) を利用しているため、きちんと動かない可能性があるという警告が表示されています。

ただ、画像を最適化しない = そのままの画像を表示する、というだけだと思われるのでそうそう問題は起きないと思われます。

気になる場合は画像サイズ自体の削減を試してみる #

最適化ができないことでサイト表示時間などに影響があるのではないか、と思われる場合にはそもそもの配信対象画像サイズを削減することを検討してみると良いかもしません。

PNG / JPEG / Webp などで該当ファイルが最も小さいファイルサイズになるものを探す
TinyPng を使ってみる
単純な図形の組み合わせの場合 SVG も考慮してみる

PNG/JPG/TIFFファイルをWebpに変換する方法
Netlifyでのビルド時に利用されるソフトウェアのバージョンを指定する方法について