NextJS+TS开发视频播放器导入MP4文件遇编译错误求助

方案一：通过next.config.js配置Webpack处理视频文件 #

不需要修改node_modules里的配置，直接在项目根目录创建或修改next.config.js，自定义Webpack规则处理MP4等视频格式：

1. 安装依赖（未安装过的话）：

npm install file-loader --save-dev
# 或
yarn add file-loader -D

2. 修改next.config.js：

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

module.exports = nextConfig;

3. 保留你的custom.d.ts类型声明文件（放在项目根目录或src目录下）：

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

4. 重启Next.js开发服务器，重新编译项目。

方案二：将视频文件放到public目录直接引用 #

如果不想配置Webpack，更简单的方式是利用Next.js的静态资源托管机制：

1. 在项目根目录创建public/videos文件夹，把video.mp4移到这个目录下。
2. 在组件中通过绝对路径直接引用：

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

这种方式无需额外配置，Next.js会自动处理public目录下的静态资源。

为什么之前的类型声明没解决编译错误？ #

custom.d.ts只是告诉TypeScript如何识别MP4模块的类型，解决的是类型检查层面的报错；而Module parse failed是Webpack无法解析MP4的二进制内容，必须通过配置loader或使用public目录的方式，让Webpack正确处理这类资源。

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