More than 1 year has passed since last update.

【Next.js + Rails + CarrierWave + S3】 Next.jsのnext/imageで画像を表示させる方法

Posted at 2022-02-15

初めに

　この記事では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のところに入れてあげればいいですね。

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