🙄

Next.jsでoutput: 'export'設定時はImageのOptimizeができない

2023/12/15に公開

next.config.jsmodule.exportsoutput: 'export'を設定する場合、コード内でImageコンポーネントを使っていると以下のようなエラーが発生する。

⨯ Error: Image Optimization using the default loader is not compatible with `{ output: 'export' }`.
  Possible solutions:
    - Remove `{ output: 'export' }` and run "next start" to run server mode including the Image Optimization API.
    - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimization API.

エラーメッセージにある通り、 { images: { unoptimized: true } }を追記すればエラーは解消される。
じゃあ、Imageタグを使った場合の最適化というのは一体なんなのか?
公式ドキュメントによると以下のようなことをしてくれるらしい。

  • WebPやAVIFなどのモダンなフォーマットを使ってデバイスごとに適切なサイズに調整する
  • 画像ローディング中のレイアウトシフト(ずれ)を防ぐ(位置がずれて意図しないリンクをクリックしてしまうとかの防止)
  • lazy loadingによりページ全体の表示を高速化する
  • オンデマンドなリサイズ(ちょっとよくわからない)

なかなかメリットが大きい気がする。
Loaderの設定とかをすることでもエラーを回避できるようなので、サイトの性能を損ないたくない場合はそちらを検討したほうが良さそう。

Discussion