next.config.js 설정 문제

next.config.js 파일입니다.

.svg 등의 이미지 파일의 확장자가 필요하여 아래와 같이 설정하였습니다.

참조 사이트:

https://tomboy90.medium.com/next-js-url-loader-%EC%82%AC%EC%9A%A9-e2acf4898b7b

const withAssetsImport = require('next-assets-import');

module.exports = withAssetsImport({
  urlLoaderOptions: {
    rules: [
      {
        test: /\.(png|jpg|gif|mp4)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
});

여기에서

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  distDir: '.next',
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === 'production';
    const plugins = [
      ...config.plugins,
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),
    ];
    return {
      ...config,
      mode: prod ? 'production' : 'development',
      devtool: prod ? 'hidden-source-map' : 'eval',
      plugins,
    };
  },
});

강의에서 알려주신 이것도 같이 적용하고싶은데, 여러 방법을 시도해봤으나 둘중에 하나만 적용이 되고있는 상태입니다.

어떤식으로 접근을 하면 좋을까요?

인프런 커뮤니티 질문&답변