NextのImageでvia.placeholder.comの仮画像を表示させる

参考

なぜこの記事を書いたか

https://via.placeholder.com の画像を next/image で読ませても表示されず、解決に苦戦したため

やること

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['via.placeholder.com'],
  },
}

module.exports = nextConfig

imgDiv.tsx

import type { NextPage } from 'next'
import Image from 'next/image'

const ImgDiv: NextPage() = () => {
  return (
    <Image
      src="https://via.placeholder.com/100x100.png"
      width="100px"
      height="100px"
      alt="alt"
    />
  )
}

export default ImgDiv

via.placeholder.com でデフォルトで表示されるものがgifになっているため、末尾にpngをつける必要があるとのこと。