5

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

enter image description here

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Grazielle Carvalho
  • 423
  • 1
  • 3
  • 11
  • 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: https://github.com/vercel/next.js/discussions/50028 , https://stackoverflow.com/questions/76181016/what-wrong-next-js-image-dont-work-on-server – XAZG Неизвестный May 20 '23 at 13:55

2 Answers2

4

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.

juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • 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? – Grazielle Carvalho Mar 08 '21 at 18:13
  • 2
    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. – juliomalves Mar 08 '21 at 18:31
  • 1
    Thanks for the explanation. Now its more clear to me. – Grazielle Carvalho Mar 08 '21 at 19:03
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'
  },
};
Gimnath
  • 824
  • 9
  • 11