Next.js: 이미지를 정적 폴더로 이동하는 Webpack 로더

다음과 같은 이미지를 가져올 수 있기를 원합니다.

import image from './image.png; // image variable should have static url

내 로더는 다음과 같습니다( next.config.js ):

module.exports = {
  webpack: config => {
    // handle images
    config.module.rules.push({
      test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        {
          loader: 'file-loader',
          options: {
            context: 'public',
            name: '/static/images/[name]-[hash].[ext]',
            publicPath: '/',
          },
        },
      ],
    });

    return config;
  },
};

결과는 거의 좋습니다.

이미지 파일은 .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image 변수는 /static/images/image-ef89065b898bb1e3e802c62e4b264417.png 이지만 http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png 이미지를 로드하려고 하면 404 오류가 발생합니다.

어떤 아이디어?

추신. 수동으로 파일을 static 폴더로 이동하고 싶지 않습니다. 일부 구성 요소와 관련된 이미지가 구성 요소 자체와 동일한 폴더에 있기를 원합니다.