Next.js 15 无法从public目录提供静态音频文件的问题求助

问题描述 #

我在Next.js 15应用里尝试播放MP3音频文件，但public/audio/目录下的音频文件完全无法被正常提供服务。我检查浏览器开发者工具时发现，audio文件夹根本没被生成或提供，明明文件是存在的。

环境信息 #

• Next.js：15.3.5
• Node.js：22.14.0
• 浏览器：Edge（最新版本）

项目结构 #

sample-project/
├── public/
│   └── audio/
│       └── sample.mp3 (确认存在，大小38KB)
├── app/
│   └── todolist/
│       ├── page.tsx
│       └── todoList.tsx
└── package.json

相关代码（todoList.tsx） #

const playDeleteSound = async () => {
  try {
    const audio = new Audio('/audio/sample.mp3');
    await audio.play();
  } catch (error) {
    console.log('Audio playback error:', error);
  }
};

我已经尝试过的方法 #

• 直接访问URL：输入http://localhost:3000/audio/sample.mp3返回302状态码
• 查看浏览器开发者工具：Sources标签里完全看不到audio文件夹

预期行为 #

MP3文件应该像public/images/下的图片一样，作为静态资源从public目录提供服务，可以通过/audio/sample.mp3访问到。

实际行为 #

• 直接访问音频文件URL返回302
• 开发者工具里看不到audio文件夹
• new Audio()无法加载文件

我的疑问 #

• 从public目录提供音频文件是否需要特定的配置？
• 静态音频资源有没有已知的限制？
• 在Next.js 15中处理音频文件的推荐方式是什么？

补充说明 #

• public/images/下的图片可以正常加载
• 如果把Audio的参数换成在线的MP3文件URL，播放完全正常
• 确认文件存在且路径没有错误（38KB的MP3文件）

希望有人能帮我解决这个问题，非常感谢！

内容来源于stack exchange