How to use custom loader?

[boy51]

I find the documentation kind of confusing.

I'm trying to next export and I get the error

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start`, which starts the Image Optimization API.
    - Use Vercel to deploy, which supports Image Optimization.
    - Configure a third-party loader in `next.config.js`.
  Read more: https://err.sh/next.js/export-image-api
    at D:\Repos\webnature\node_modules\next\dist\export\index.js:14:795
    at async D:\Repos\webnature\node_modules\next\dist\build\tracer.js:3:470

No problem, I have to setup my loader. I want to use contentful and according to this PR there is a loader for contentful out there, but we should use custom image loaders instead.

So in the docs it says to use the loader prop on the image component. I did this and made a container for my image

const ContentfulImage = props => {
  return <Image loader={contentfulLoader} {...props} />
}

And use this container everywhere. So now I should be good, right?

But if I next export i still get the same error.

So I guess I'm supposed to declare my custom loader in next.config.js?

module.exports = {
  images: {
    loader: () => {
      return 'https://google.com'
    },
  },
}

Now I get this error

> Build error occurred
Error: Specified images.loader should be one of (default, imgix, cloudinary, akamai), received invalid value (({ src, width, quality }) => {
      return 'https://image.stern.de/...'
    }).
See more info here: https://err.sh/next.js/invalid-images-config
    at assignDefaults (D:\Repos\webnature\node_modules\next\dist\next-server\server\config.js:5:4613)    
    at loadConfig (D:\Repos\webnature\node_modules\next\dist\next-server\server\config.js:8:1081)        
    at D:\Repos\webnature\node_modules\next\dist\build\index.js:2:227
    at D:\Repos\webnature\node_modules\next\dist\build\tracer.js:3:360
    at NoopTracer.withSpan (D:\Repos\webnature\node_modules\@opentelemetry\api\build\src\trace\NoopTracer.js:47:16)

So how is this supposed to work? I can't find any info on how to "Configure a third-party loader in next.config.js" as the error says.

[leerob]

Confirmed, this is an issue. Locking the discussion and moving to #21079 👍