Next.js 13中使用音频文件报错，如何配置加载器解决？

方案一：使用Public目录（推荐，无需额外配置） #

Next.js的public目录是官方推荐的静态资源存放位置，放在这里的文件可直接通过根路径访问，不需要import，也不用修改webpack配置。

1. 将音频文件移动到项目根目录的public/sounds文件夹下（若sounds文件夹不存在则创建），最终路径为public/sounds/tick1.wav。
2. 修改SoundComponent代码，直接用根路径创建Audio实例：

"use client";

export default function Sound() {
  const tick = new Audio("/sounds/tick1.wav");
  const metronomeSoundHandler = () => {
    tick.play();
  };

  return (
    <>
      <button onClick={metronomeSoundHandler}>Play</button>
    </>
  );
}

修改完成后重启开发服务器，即可正常播放音频。

方案二：配置Webpack Loader（适合必须用import的场景） #

如果需要通过import语法引入音频文件，需要手动给webpack添加处理音频文件的规则：

1. 安装file-loader依赖：

npm install file-loader --save-dev
# 或使用yarn
yarn add file-loader --dev

2. 修改next.config.js，添加webpack配置项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  webpack: (config) => {
    // 添加处理音频文件的规则
    config.module.rules.push({
      test: /\.(wav|mp3|ogg)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'static/sounds/',
            publicPath: '/static/sounds/'
          }
        }
      ]
    });
    return config;
  }
}

module.exports = nextConfig

3. 保持你原有的SoundComponent代码不变，重启开发服务器后即可正常使用import引入的音频文件。

错误原因说明 #

你遇到的报错是因为Next.js默认的webpack配置未包含.wav这类二进制音频文件的解析规则，webpack无法识别该文件类型，因此提示需要配置对应的loader。上述两种方案分别通过Next.js内置的静态资源机制、手动配置webpack loader两种方式解决了该问题。

内容的提问来源于stack exchange，提问作者gndy Br