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
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()
}
})