NEXTJS_USE_NEXT_IMAGE

The Next.js Image component (next/image) extends the HTML <img> element with features for automatic image optimization.

It optimizes image sizes for different devices using modern image formats, improves visual stability by preventing layout shifts during image loading, and speeds up page loads with lazy loading and optional blur-up placeholders.

Additionally, it provides the flexibility of on-demand image resizing, even for images hosted on remote servers. This may incur costs from your managed hosting provider (see below for more information)

By default, this rule is disabled. Enable it by customizing Conformance.

For further reading, see:

• https://nextjs.org/docs/app/building-your-application/optimizing/images
• https://nextjs.org/docs/pages/api-reference/components/image

Using image optimization may incur costs from your managed hosting provider. You can opt out of image optimization by setting the optional unoptimized prop.

Please check with your hosting provider for details.

• Vercel pricing
• Cloudinary pricing
• imgix pricing

If self-hosting, you'll need to install the optional package sharp, which Next.js will use to optimize images. Optimized images will require more available storage on your server.

This rule will catch the following code.

function App() {
  return <img src="/media/image.png" alt="Example" />;
}

The following code will not be caught by this rule.

function App() {
  return (
    <picture>
      <source srcSet="/hero.avif" type="image/avif" />
      <source srcSet="/hero.webp" type="image/webp" />
      <img src="/hero.jpg" alt="Landscape picture" width={800} height={500} />
    </picture>
  );
}

Replace any <img> elements that are caught by this rule with next/image.

Again, please check with your managed hosting provider for image optimization costs.