How To Use the Image component in your NextJS Applications?

When working with NextJS you have to place all of your static images in the public folder of your application. In my case, I have placed there one image called sample_image.png.

You can now reference it anywhere in my application with the absolute path which starts from the public folder.

import Image from 'next/image'

export default function Home() {
  return (
    <div>
      <h2>Sample image</h2>
      <Image src='/sample_image.jpeg' width={120} height={60} />
    </div>
  )
}

No need to get to the public file location using the “../../”
The Image component is available out of the box in NextJs.

That’s all, happy coding!