Question

144

How to export static images on Nextjs?

rated 0 times [ 146] [ 2] / answers: 1 / hits: 12525 / 2 Years ago, mon, december 27, 2021, 12:00:00

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..

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shekinah

Add To Favorites

Follow

Total Points: 699

Total Questions: 112

Total Answers: 110

Location: Philippines

Member since Sat, Jul 11, 2020

4 Years ago

shekinah questions

1 Vite.js (Vue): Unwanted Page Reload Happens Only On Samsung Internet

Mon, Feb 7, 22, 00:00, 2 Years ago

1 use effect run only when a state becomes false

Tue, Apr 6, 21, 00:00, 3 Years ago

1 Async await - does await block other code from running?

Mon, Dec 28, 20, 00:00, 3 Years ago

1 Passing props in React from one file to another

Fri, Oct 23, 20, 00:00, 4 Years ago

1 How to get current state inside useCallback when using useReducer?

Fri, May 1, 20, 00:00, 4 Years ago

View All

answered 2 Years ago casandra · Accepted Answer

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} />