Next.jsでmp3をimportする

前回はfile-loaderで動画メディアを変換する方法について書きましたが、
今回はmp3ファイルをimportします。

next.config.js のwebpack設定に以下を加えます。

const nextConfig = {
  ...
  webpack(config, options) {
    config.module.rules.push({
      test: /\.mp3$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 8192,
        },
      },
    });
    return config;
  },
};

url-loader は対象のファイルをbase64形式のDataURLへ変換し、js内にバンドルします。
limit オプションに数字か文字列を指定すると、その値を最大バイトとしてそれ以上のサイズのファイルは、フォールバックとしてfile-loaderで変換されます。 （file-loaderはurl-loaderの初期値のフォールバック先です）
file-loader は url-loader を異なり、ファイルをコピーし、import先ではそのURLを返します。
大きなファイルはDataURLへ変換するとバンドルサイズが肥大化するため、limit オプションを加えておきましょう。