next.config.jsのimagesの指定について調べてみた

kossyです。Next.js使いになるべく、必死でインプット中です。

まずはconfigファイルからだろう(異論は認めます)ということで、next.config.jsを触っている時に copilot にサジェストされた、imagesの指定について備忘録として残してみます。

以下はChatGPT(GPT-4)の回答です。

imagesオブジェクトは、Next.js アプリケーションの next.config.js ファイル内で使用され、
画像の最適化設定をカスタマイズします。
具体的には、images オブジェクト内の domains 配列に指定されたドメインからの画像を
Next.jsの画像最適化機能を使用して処理することを許可します。
この例では、avatars.githubusercontent.com というドメインからの画像が最適化の対象になります。

Next.js の画像最適化機能は、<Image /> コンポーネントを介して提供されます。
このコンポーネントは、画像を自動的に最適化し、
ロード時間を短縮し、パフォーマンスを向上させます。
しかし、デフォルトでは、Next.js は同一のオリジンから提供される画像のみを最適化します。
そのため、外部のドメイン（例えば、画像ホスティングサービスやCDN）から提供される画像を最適化するには、
そのドメインを next.config.js の images.domains 配列に明示的に追加する必要があります。

この設定を行うことで、指定されたドメインからの画像は、
Next.js によって自動的に最適化されるようになります。
画像は適切なサイズにリサイズされ、適切なフォーマット（例: WebP）に変換されることがあります。
これにより、ブラウザが必要とするサイズの画像をダウンロードし、
ページのロード時間を短縮し、ユーザー体験を向上させることができます。

最適化のための設定などができると言う理解で良さそうです。

ちなみに以下の記事を見ると、外部URLの画像を差し込むとエラーになるようです。

chaika.hatenablog.com

公式ドキュメントは以下で、domains以外にもremotePatternsの設定ができるようでした。 nextjs.org

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

まずはChatGPT大先生の解説だけ頭に叩き込んでおけば良さそうです。

勉強になりました。