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.

Snick

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 , #76181516 – Doghouse

Answer 1

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.

Melbourne

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? – Snick

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. – Melbourne

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

Answer 2

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'
  },
};

Tannenbaum

Answer 3

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/**',
      },
    ],
  },
}

Northrop

Answer 4

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.

Abattoir