【Next】`images.domains` is deprecated in favor of `images.remotePatterns`.の解決方法

はじめに

Next.jsをアップデートした際に発生したエラーと、その解決方法についてまとめた記事です。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

現象

Next.jsをアップデート後、ビルド時に以下のようなエラーが発生しました。

`images.domains` is deprecated in favor of `images.remotePatterns`.
Please update next.config.mjs to protect your application from malicious users.

エラーメッセージを見る限り、next.config.mjsに設定しているimages.domainsが原因のようです。

原因

Next.js 16以降ではimages.domainsが非推奨となり、代わりにimages.remotePatternsの使用が推奨されるようになったことが原因でした。

解決方法

next.config.mjsの設定を以下のように変更しました。

変更前:

next.config.mjs

images: {
  domains: ["i.ytimg.com"],
}

変更後:

next.config.mjs

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "i.ytimg.com",
    },
  ],
}

このようにremotePatternsを使って明示的に許可する画像の取得元を定義することで、エラーは解消され、無事にビルドが通るようになりました。

終わりに

バージョンアップによって仕様が変わることはこれからもあるのでしっかりとキャッチアップしていきたいです。

参考