How to export static images on Nextjs?

Question

when I want to export my nextjs app, it says that I cannot export my images on static websites.

Error: Image Optimization using Next.js' default loader is not compatible with next export. Possible solutions: - Use next start to run a server, which includes the Image Optimization API. - Use any provider which supports Image Optimization (like Vercel). - Configure a third-party loader in next.config.js. - Use the loader prop for next/image.

How can I make it so that it does ?

Is there a way for me to simply tell it to render images statically ? I dont want to go throught other onlines images loaders..

Answer 1

You need to set up a custom image loader in Next.js

In your next.config.js file, add this property to the export:

images: {
  loader: "custom"
}

---

And make a script called loader.js that exports this:

function imageLoader({ src }) {
  return `/images/${src}`; // REPLACE WITH YOUR IMAGE DIRECTORY
}

module.exports = imageLoader;

---

For each Image component, set the loader prop manually:

const imageLoader = require("PATH TO loader.js");

<Image loader={imageLoader} />