Next.js 14.0.4中React TSX组件无法播放本地MP3文件但可正常播放在线MP3文件的问题求助

大家好，我现在遇到了一个挺头疼的问题：我写了一个封装HTML <audio> 和 <source> 标签的React组件，播放在线MP3文件完全正常，但加载本地MP3文件时总是返回GET 404错误，甚至尝试用import导入本地MP3时，Next.js终端还会提示“Module not found: Can't resolve './name.mp3'”，实在搞不懂哪里出问题了，想请大家帮忙看看。

问题详情 #

• 在线MP3链接（比如https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3）可以正常加载并播放，组件UI显示正常，能正常控制播放。
• 本地MP3文件（比如./name.mp3）：组件UI能显示，但音频时长显示为0:00，无法加载声音，控制台返回ERROR 404 GET localhost:3000/name.mp3。
• 尝试用import导入本地MP3时，终端直接报错模块找不到。

我的组件代码（AudioPlayButton.tsx） #

type Props = {
  captionText: string,
  src: string,
  type?: string,
  allowDownload: boolean,
}

export default function AudioPlayButton({
  captionText,
  src,
  type = "mp3",
  allowDownload = true,
}: Props) {
  return <div>
    <figure style={{...Style.column, ...Style.spaceAround}}>
      <figcaption style={Style.caption}>{captionText}:</figcaption>
      <audio controls>
        {
          type == "mp3" ?
          <source src={src} type="audio/mp3"></source>
          :
          <></>
        }
      </audio>
      <p>
        {
          allowDownload && type == "mp3" ?
          <span>Download <a href={src}>MP3</a></span>
          :
          <></>
        }
      </p>
    </figure>
  </div>;
}

页面中的使用代码（page.tsx） #

'use client'
import AudioPlayButton from '@/components/showcase/ui/AudioPlayButton';

export default function Home() {
  return (
    <main>
      {/* 这个会显示播放器UI，但时长0:00，控制台报404 */}
      <AudioPlayButton captionText={'Play Pronunciation'} src={"./name.mp3"} allowDownload={true}></AudioPlayButton>

      {/* 这个可以正常加载并播放 */}
      <AudioPlayButton captionText={'Play Pronunciation'} src={"https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"} allowDownload={true}></AudioPlayButton>

      {/* 尝试导入本地MP3的写法，终端报错Module not found */}
      {/* import namePronunciation from "./name.mp3"; */}
      {/* <AudioPlayButton captionText={'Play Pronunciation'} src={namePronunciation } allowDownload={true}></AudioPlayButton> */}
    </main>
  )
}

我已经确认本地MP3文件的路径是对的，和page.tsx在同一个目录下，但就是加载不出来，有没有大佬能指点一下问题出在哪？

备注：内容来源于stack exchange，提问作者Kuei