next/image configuration in Next.js config file

Question

I’m implementing the Next.js Image component in my Headless project. The CMS that I’m using is WordPress. And since the image is coming from an external website, I need to specify the domain on next.config.js, as the documentation specifies:

https://nextjs.org/docs/basic-features/image-optimization

const nextConfig = {
    image: {
        domains: ['https://example.com'],
    },
}

But in my next.config.js file I’ve already have this configuration:

const withStyles = require('@webdeb/next-styles');

module.exports = withStyles({
    sass: true,
    modules: true,
});

So my struggle is to combine this two on the config file.

Just for some context, without the image configuration, I have this error:

Error: Invalid src prop on next/image, hostname is not configured under images in your next.config.js

I've tried putting it together like the code bellow with the use of next-compose-plugins, but the error keeps showing:

const withStyles = require('@webdeb/next-styles');
const withPlugins = require('next-compose-plugins');

const nextConfig = {
    image: {
        domains: ['https://example.com'],
    },
}

module.exports = withPlugins([
    [withStyles({
        sass: true,
        modules: true,
    })]
], nextConfig);

Without the nextConfig at the end of the module.exports, the code works without a problem.

A detail on the URL that I need to pass is that it's a subdomain and an homolog environment, but it doesn't need credentials to be accessed. I don't think it's the issue, tho.

Since I'm new with the Next.js, I just can't figure out how this configuration needs to work.

Please tell me, I have updated next.js 12.3.4. and prescribe remotePatterns. But when building, I get into images (the "url" parameter is not allowed). Have you ever encountered such a thing ? I described the problem in more detail in the topics below: github.com/vercel/next.js/discussions/50028 , stackoverflow.com/questions/76181016/… — XAZG Неизвестный
– XAZG Неизвестный, Commented May 20, 2023 at 13:55

juliomalves · Accepted Answer · 2021-03-08 17:33:45Z

7

Your config object should be passed to the last plugin call. So in your case it would look like the following:

const withStyles = require('@webdeb/next-styles');

module.exports = withStyles({
    sass: true,
    modules: true,
    images: {
        domains: ['https://example.com'],
    }
});

Also note that the correct entry for the next/image configuration is images and not image. Which is why it's probably not working when you tried with next-compose-plugins, as everything else seems to be correct in that code snippet.

answered Mar 8, 2021 at 17:33

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Grazielle Carvalho Over a year ago

Thank you so much. It worked. Probably the biggest issue was the images without the s at the end. But something that I don't understand is why the config object can be passed at the end of the next-styles package. But how does this work?

juliomalves Over a year ago

Essentially, the plugins work in a way that they'll use the relevant fields from the config object for what they need to do. In this case withStyles will use sass and modules fields to add the appropriate webpack configuration to the object which is then returned to be handled by the next plugin and so on, until you're left with the final config object.

Grazielle Carvalho Over a year ago

Thanks for the explanation. Now its more clear to me.

Ezaz Ahmed · Accepted Answer · 2023-11-11 13:27:39Z

5

If you're using Next.js version 12.3.0 or above, the previous solution may not work. To ensure proper configuration, use the following format:

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'your-domain.com',
        port: '',
        pathname: '/your-account/**',
      },
    ],
  },
}

answered Nov 11, 2023 at 13:27

Ezaz Ahmed

712 silver badges3 bronze badges

Comments

Gimnath · Accepted Answer · 2022-10-06 16:02:01Z

1

For anyone whose above methods doesn't work, please remove the https:// or http:// in next.config.js;

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['https://your-domain.com'], //make it 'your-domain.com'
  },
};

answered Oct 6, 2022 at 16:02

Gimnath

1,07614 silver badges14 bronze badges

Comments

isMattCoding · Accepted Answer · 2024-02-27 21:11:45Z

I was having this problem, and I struggled to find a solution that worked for a while.

Most responses I found involved modifying next.config.js, or adding yarn add sharp as per the documentation.

These didn't work for me, but I realised that during deployment, the terminal was still telling me to run yarn add sharp (which I had already done locally). It seems that the changes to the yarn.lock were not being taken into account during the deployment pipeline.

I would recommend to anyone facing this problem in the future to double check that the dependencies are installing correctly at deployment.

The solution that worked for me was running yarn cache clean && rm -rf yarn.lock && rm -rf node_modules && yarn && yarn build and then re-deploying.

President James K. Polk · Accepted Answer · 2025-09-19 19:58:41Z

0

domains is deprecated, use this instead:

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'hostname.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}
 
export default config

edited Sep 19 at 19:58

President James K. Polk

42.3k34 gold badges113 silver badges149 bronze badges

answered Sep 19 at 7:21

user31523436

1

Collectives™ on Stack Overflow

next/image configuration in Next.js config file

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related