Nextjsでnext/imageコンポーネントが動作しない時の対処法

はじめに

Nextjsでnext/imageコンポーネントを使用していた時に、上手く動作しないことが発生したので、その解決方法を紹介したいと思います。

next/imageとは

next/imageはNextjs10からサポートが開始された画像最適化の機能を有したコンポーネントで、画像形式を自動的にWebPにしてくれたり、遅延ローディングに対応していたりと画像を扱う上で便利な機能が揃っています。
使い方もシンプルで、既存の<img>タグを<Image />に置き換えるだけで簡単に使用することができます。

import Image from 'next/image'

function Home() {
  return (
    <>    
      <Image
        src="/sample.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
    </>
  )
}

export default Home

公式ドキュメント

next/imageが動作しない時の対処法

１・外部から画像を取り込んでいる場合

ローカルではなく外部から画像を取り込んでいる場合は、プロジェクトにnext.config.jsファイルを作成し、画像取り込み先のドメインを指定する必要があります。

next.config.js

module.exports = {
  images: {
    domain: ['http://sample.com']//指定しなければエラーが発生する
  },
}

２・ローカルから画像を取り込んでいる場合

私はこれでハマったのですが、Nextjsがローカルから画像を参照する際はpublicフォルダから画像を参照します。
そしてpublicフォルダは必ずプロジェクトのルートに配置するようにしましょう。私の場合はpublicフォルダをsrcフォルダ内に配置していたため、エラーが発生しました。

↓公式ドキュメントにもしっかり記載されていました・・・
公式ドキュメント

まとめ

以上です。Nextjsでnext/imageを上手く動作できない方の助けになれば幸いです。