[Next.js] file-loader, url-loader無しで mp3 をimportできる

結論

下記を参照のこと。

https://github.com/vercel/next.js/discussions/12810#discussioncomment-1297794

Webpack 5 であれば使える設定のはず。
Next.js 10 以降かな。

next.config.js

module.exports = {
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(mp3)$/,
      type: "asset/resource",
      generator: {
        filename: "static/chunks/[path][name].[hash][ext]",
      },
    });

    return config;
  },
};

custom-env.d.ts

declare module '*.mp3' {
  const src: string;
  export default src;
}

file-loaderとurl-loaderを使った設定が拡散されているけど、
パッケージに依存しない上記のやり方のほうが絶対いいと思っている。

日本中に拡散されろ！