Next.js Image Example

index.js

import Image from 'next/image'
import { useState } from 'react'

function Home() {
  const [load, setLoad] = useState(false)
  return <>
    <h1>Image Optimizer Home</h1>
    {load ? <>
      <Image src="https://source.unsplash.com/3840x512/weekly?water" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?hill" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?jungle" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?prairies" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?nyc" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?paris" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?tokyo" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?berlin" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?ocean" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?mavericks" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?kyoto" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?shanghai" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?singapore" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?toronto" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?spain" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?nice" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?apple" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?microsoft" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?foxtort" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?next" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?sunset" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?moon" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?rainbow" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?rome" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?keyboard" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?screen" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?html" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?beer" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?garden" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?bridge" width="3840" height="512" layout="intrinsic" />
    </> : <button onClick={() => setLoad(true)}>Load 30 Images</button>}
  </>
}

export default Home

next.config.js

// prettier-ignore
module.exports = {
  images: {
    domains: ['source.unsplash.com'],
  },
}