Next.jsでTypeScriptを使うときmp3ファイルが読み込めなかった件

概要

Next.jsでタイマー的なアプリを作っているとき、Next.js上でmp3ファイルを扱うのに苦労しました。
ChatGPT様でも解決しなかったためちょっと共有したら助かる人もいるかな？と思い、共有することにします。

前提

Next.js ：
・バージョン13.4.7
やりたいこと：
・Use-Soundでmp3音源を再生したい
困ったこと：
・Next.jsがmp3ファイルをModuleとして読み込んでくれない
・型定義やfile-loaderの設定をするとそもそもアプリが起動しなくなる

対策

型定義をする。

プロジェクト直下に型定義ファイルを置いてください。
私の場合はsound.d.tsを作成しました。
内容は以下です。

// sounds.d.ts
declare module "*.mp3";

これにより、ビルド時のエラーは解消されます。
しかし、実行した際にはmp3ファイルが見つからないとエラーになります。

url-loaderを設定する。

プロジェクト直下にnext.config.jsを作成し、url-loaderの設定を行います。
内容は以下です。

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

module.exports = nextConfig;

next.configやbabelなどがまだTypeScriptに対応していないため、
.jsを使用します。
ChatGPTや検索した情報だと、Next.jsでJavaScriptを使用している場合の対策しか見つからず、
解決には至りませんでした。

おわり

webpackの設定周りの問題らしいんですが、深堀はやめときました。
ちょっとわかってきたと思ったらまたわからないところが出てきて奥が深いです。