CODEWITHSUNDEEP
next.jsnextjs-image
Salma EL BARMAKI
Salma EL BARMAKI

Reputation: 147

npm run build gives an Error : Image Optimization

I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export". But I get this Error:

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

Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:

module.exports = {
  images: {
    loader: 'imgix',
    path: '/images/',
  },
}

I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.

I know this is probably a stupid question, but I'm stuck.

Upvotes: 2

Views: 3014

Answers (1)

Salma EL BARMAKI
Salma EL BARMAKI

Reputation: 147

I hosted them on https://imgbb.com and wrote this in next.config.js

module.exports = { 
    images: { 
        domains: ['i.ibb.co'],
    },
}

and it worked.

Usage:

<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg" 
       alt="ESMASA TRAVAUX"
       width={1050}
       height={500}
/>

Upvotes: 3

Related Questions