sugiii8's tech blog.
post: 2023-07-14
INDEX ▶

Next.jsでLintに引っかかった箇所を直してたら発生したこと(next/image)

thumbnail

Next.jsでLintに引っかかった箇所を直してました。

Lintの内容

Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element


パフォーマンスの問題があるのでHTMLのimgタグは使わずにnext/imageコンポーネントを使いましょう的なもの。

やったこと

  • next/imageをimportする
  • <img>を<Image>に置き換える
  • Imageコンポーネントが提供してないpropsを修正する
    • width="100%"になってた箇所を削除
    • classNameに w-full を追加 ※ tailwindが入ってるので


デプロイ後に気づいたこと

  • 画像が表示されてない
  • ユーザーが投稿した画像のみ表示されてない。publicに配置してる画像が問題ない。
  • 画像取得する箇所で400エラーになっていた


調べた

400エラーなので権限周りとかそういうことなのだなと推測しつつ。
こちらの記事の通り、next/imageで外部URLを取得する際にはドメインを予め指定しておく必要がある。
弊ブログはmicroCMSとNext.jsを組み合わせていて、画像もmicroCMSの管理下に配置している。
なので設定を追加した

# next.config.js

module.exports = {
  images: {
    domains: ['images.microcms-assets.io'],
  },
}


修正後、無事に表示されるようになりました。