Next.js TypeScript中添加视频失败：模块解析错误求助

我在Next.js + TypeScript项目中添加视频时遇到了Webpack加载错误，项目代码结构如下：

具体报错信息 #

./public/videos/thevid.mp4 Module parse failed: Unexpected character '' (1:0)
您可能需要合适的loader来处理该文件类型，当前未配置任何loader来处理此文件。
（此二进制文件的源代码已省略）

已尝试的操作 #

• 使用了next-video、react-video等多个npm包
• 在.d.ts文件中声明了.mp4类型

解决方案 #

方案1：直接引用public目录资源（推荐）

Next.js的public目录下的资源可通过绝对路径直接调用，无需import，绕开Webpack解析问题：

<video src="/videos/thevid.mp4" controls />

方案2：配置Webpack规则（需import场景）

如果必须通过import引入视频，在next.config.js中添加Webpack资源模块配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(mp4|webm|ogg)$/,
      type: 'asset/resource',
      generator: {
        filename: 'videos/[name].[hash][ext]'
      }
    });
    return config;
  }
};

module.exports = nextConfig;

同时确保类型声明文件（如types.d.ts）的定义正确：

declare module '*.mp4' {
  const src: string;
  export default src;
}

方案3：适配Next.js版本选择库

若使用Next.js 13+ App Router，优先用原生video标签配合public路径；若依赖第三方库，选择适配Next.js Webpack配置的包，避免多个库的配置冲突。

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