我们在写样式的时候会用图片作为背景 ，例如下面的用法

background: url("../images/login-background.png") no-repeat 0 -50px;

在webpack进行构建的时候 我们会用url-loader 来处理，但是在nextjs中，直接使用是不行的 ，因为nextjs的静态文件夹是public 只有这个文件夹下的文件才能被访问到。我们从网上查找解决方案，大多是用的next-images 这个包去处理的。一般来说 这么用就行了，但是有些特殊情况 ，比如我们要用antd的icon，自定义icon的时候需要自己去加载svg文件，这个时候svg这种模式就需要单独处理了。所以我们还是需要自己来配置，我们从源码可以看到，实现还是用url-loader来做的。那么我们自己调整下即可。

let rules =  [
    {
        test: /\.(png|jpe?g)/,
        use:[
            { loader: 'url-loader' ,options: {
                    limit: config.inlineImageLimit,
                    fallback: 'file-loader',
                    publicPath: `${config.assetPrefix || '/_next/static/images/'}`,
                    outputPath: `${options.isServer ? "../" : ""}static/images/`,
                    name: "[name]-[hash].[ext]",
                    esModule: false
                }}
        ]
    },
    {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
            {
                loader: 'babel-loader',
            },
            {
                loader: '@svgr/webpack',
                options: {
                    babel: false,
                    icon: true,
                },
            },
        ],
    }
];

config.module.rules = _.concat(config.module.rules,rules);

核心思路就是把静态文件打包到static文件夹下。