【Next.js】Imageコンポーネントの画像最適化を無効化する方法

個別に無効化する

特定のImageコンポーネントのみ画像最適化を無効化するにはunoptimizedpropsをtrueにします。

import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}

全て無効化する

全てのImageコンポーネントで画像最適化を無効にするにはnext.config.jsに以下のように記述します。

next.config.js

module.exports = {
  images: {
    unoptimized: true,
  },
}