Files inside public can be referenced from the root of the application. That is useful to serve static assets like robots.txt and images. For example, if you add an image to public/me.png, the following code will access the image:

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

Note: Be sure to not have a static file with the same name as a file in the pages/ directory, as this will result in an error.

Next.js provides an Image component out of the box to handle the following for you:

• Ensuring your image is responsive on different screen sizes
• Optimizing your images without the need of a third-party tool or library
• Only loading images when they enter the viewport (Lazy loading)

Image Optimization

The Automatic Image Optimization (since version 10) allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.

Automatic Image Optimization works with any image source, even if the image is hosted by an external data source, like a CMS. Next.js optimizes images on-demand, as users request them, not at build time.

import Image from 'next/image'

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
)

Images are optimized dynamically upon request and stored in the <distDir>/cache/images directory. That means it does not work when using next export, which exports static files. The expiration (or rather Max Age) is defined by the upstream server’s Cache-Control header. You can optionally configure Image Optimization for more advanced use cases via next.config.js.

Image layout

The layout behavior of the image changes as the viewport changes size. Defaults to intrinsic. When fixed, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element. When intrinsic, the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports. When responsive, the image will scale the dimensions down for smaller viewports and scale up for larger viewports. When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit. Demos can be found here.

Image domains

To enable Image Optimization for images hosted on an external website, use an absolute url for the Image src and specify which domains are allowed to be optimized. This is needed to ensure that external urls can’t be abused. When loader is set to an external image service, this option is ignored.

module.exports = {
  images: {
    domains: ['example.com'],
  },
}