Next JS中如何使用public文件夹内的视频文件？

你写的video标签语法本身没有问题，出现404错误可以从以下几个方向排查：

• 文件路径与命名检查
  • 确认video.mp4直接放在public根目录下，而非public的子文件夹中。如果放在子文件夹（如public/assets/video.mp4），需要把src改为/assets/video.mp4，路径开头的/默认指向public根目录，寻址逻辑是正确的。
  • 检查文件名大小写是否完全匹配：MacOS、Linux等系统的文件系统区分大小写，若实际文件名为Video.mp4或video.MP4，写/video.mp4就会触发404。
  • 新增视频文件后重启本地开发服务，部分框架不会实时监听public目录的新增文件，重启后才能识别到新加入的静态资源。
• 项目配置检查
  • 如果使用Vite搭建项目：确认vite.config.js中的publicDir配置没有被修改，默认值为public，如果修改为其他名称，需要将静态资源放到对应配置的文件夹下。
  • 如果使用CRA（Create React App）搭建项目：若你在package.json中配置了homepage字段，需要使用process.env.PUBLIC_URL拼接路径，写法如下：

    <source src={`${process.env.PUBLIC_URL}/video.mp4`} type='video/mp4' />
    

  • 如果使用Next.js框架：若配置了basePath参数，资源路径需要加上basePath前缀；App Router版本依旧支持public目录托管静态资源，逻辑和常规项目一致。
• 快速验证方法
  直接在浏览器地址栏输入http://localhost:3000/video.mp4，如果依然返回404，说明资源没有被正确托管到对应路径，回到前两步排查即可。

内容的提问来源于stack exchange，提问作者Ujith Nimantha