Next.jsで外部URLの画像を安全に表示する方法

背景

Next.jsを使用していて、特定の公開URLから画像を表示させたい場合があります。以下のコードではうまくいきませんでした。

<Image
  src="https://oaidalleapiprodscus.blob.core.windows.net/xxx"
/>

解決策

Next.jsの設定ファイル（next.config.mjs）を修正して、特定のドメインからの画像取得を許可しました。

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'oaidalleapiprodscus.blob.core.windows.net',
        port: '',
        pathname: '**',
      },
    ],
  },
};

export default nextConfig;

この設定を適用することで、以下のように画像を表示することができるようになります。

<Image
  src="https://oaidalleapiprodscus.blob.core.windows.net/xxx"
/>