初めに

　この記事ではNext.js が提供しているImage コンポーネント (next/image)についてのお話です。
　__imgタグのこと__ではないので注意してください。

内部の画像を表示

　内部ではルートディレクトリ配下にあるpublicを基準にして表示させることができます。
　とても簡単ですね
　【例】
　/public/images/test.png

test.js

<Image src={'/images/test.png'} alt="sample" width={300} height={300} />

　公式にも書いてある通り
　ルートディレクトリ直下にnext.config.jsを作り
　【例】
　example.comの場合　

next.config.js

module.exports = {
  images: {
    domains: ["example.com"]
  },
}

こんな感じでドメインを指定してやると認識してくれます。

　問題はこちらです。
　このままいくとバケットのURLをそのままドメインに突っ込みたくなるところをぐっとこらえて。
　こうです。

next.config.js

module.exports = {
  images: {
    domains: ["s3.[region].amazonaws.com"]
  },
}

　東京の場合ap-northeast-1これをregionのところに入れてあげればいいですね。

　特にはまっていませんが、ちょっと調べる羽目になったので誰かのお役に立てれば幸いです。