如何在已有next.config.js文件中配置next-images

你只需要将现有配置对象作为参数传入withImages函数，就能完成两者的配置合并，具体修改如下：

修改步骤 #

• 在文件顶部添加next-images的引入语句
• 将原有的nextConfig作为参数传入withImages()，替换原导出语句

修改后的完整代码 #

var fs = require('fs');
const withImages = require('next-images')

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 = withImages(nextConfig)

这样修改后，Next.js会同时加载next-images的配置逻辑和你原本的自定义配置，满足业务需求。

内容的提问来源于stack exchange，提问作者Ayo Adesina