node.jsnext.jsnextjs-imagenext-images

How to Config next-images with existing next.config.js file


I want to use the npm package next-images in my nextjs app.

After reading the documentation for next-images, it says you need to create a next.config.js file with the following code:

const withImages = require('next-images')
module.exports = withImages()

However I already have a next.config.js file, currently it has code inside it that looks like this:

var fs = require('fs');

const nextConfig = {
    reactStrictMode: true,
    images: {
        remotePatterns: [
            {
                protocol: "http",
                hostname: "**",
            },
            {
                protocol: "https",
                hostname: "**",
            },
        ],
    },
    env: {
        customSnipcartJS: fs.readFileSync('public/file2.js').toString(),
        snipcartInstallJS: fs.readFileSync('public/file1.js').toString()
    }
}

module.exports = nextConfig

So my question is, how do I merge the required config code for next-images with my existing configuration I already have in my next.config.js


Solution

  • In case someone else runs in to something like this I found a solution.

    I managed to get this to work, you can pass your custom next config in to the withImages method.

    So this now works.

    var fs = require('fs');
    const withImages = require('next-images');
    
    module.exports = withImages({
        reactStrictMode: true,
        images: {
                disableStaticImages: true,
                remotePatterns: [
                {
                    protocol: "http",
                    hostname: "**",
                },
                {
                    protocol: "https",
                    hostname: "**",
                },
            ],
        },
        env: {
            customSnipcartJS: fs.readFileSync('public/file2.js').toString(),
            snipcartInstallJS: fs.readFileSync('public/file1.js.js').toString()
        }
    })