Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

368
Views
Next.js Export - Custom Image Loader Not Working

I'm trying to build and export my Next.JS project, and I'm stuck with Image Optimization error while exporting.

I've created a custom loader, creating a file /services/imageLoader.js with the following content:

export default function LocalImageLoader({src, width, quality}) {
    var fileName = src.split("/").pop();
    return `./_next/static/media/${fileName}`;
}

And, inside all my pages where I used the next/image component, I've added the loader attribute to , pointing to my LocalImageLoader funcion, this way:

import LocalImageLoader from '../services/imageLoader';
import logoImage from '../resources/images/logo.png';

// boring stuff here
<Image loader={LocalImageLoader} src={logoImage} alt="Logo" className="img-fluid" />
// more boring stuff here

After that, everytime I try to run npm run export (I've set up the export script in my package.json, that runs next build && next export), and the following error comes in my screen:

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`.
  Read more: https://nextjs.org/docs/messages/export-image-api
    at /home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/export/index.js:256:23
    at async Span.traceAsyncFn (/home/raphael/Projects/Next/learning/testProject/node_modules/next/dist/trace/trace.js:74:20)

Can someone say me what I'm doing wrong?

Thanks!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You forgot to add your custom loader to next.config.js. You will need to do something like in snippet below. In case if you won't succeed there are available loaders, because default loader won't work when you export.

module.exports = {
  images: {
    loader: 'custom',
    path: 'https://example.com/myaccount/',
  },
}

More info here: https://nextjs.org/docs/api-reference/next/image#loader-configuration

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!