Next.js中使用react-pdf加载public目录PDF文件时出现MissingPDFException的问题求助

我来帮你解决这个问题，你遇到的MissingPDFException本质是路径配置错误导致的，Next.js对public目录的静态资源处理有特定规则，咱们一步步调整：

问题根源 #

你的代码里犯了两个关键错误：

1. 错误地用import导入public目录下的PDF文件，并且webpack配置的file-loader输出路径不符合Next.js的静态资源规则，导致生成了错误的访问路径http://localhost:3000/_next/public/document.pdf；
2. 对Next.js public目录的访问逻辑不清晰——public目录下的文件是直接通过根URL访问的，不需要经过webpack打包后的_next路径。

解决方案 #

1. 简化PDF文件的引用方式（最推荐）

直接放弃用import导入PDF，改用根路径字符串访问public目录下的文件，这是Next.js官方推荐的静态资源访问方式：

修改你的PDFViewer组件：

import { pdfjs, Document, Page } from "react-pdf";

// 推荐使用CDN的worker资源，避免本地路径配置问题
pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;

const PDFViewer = () => (
  // 直接用根路径指向public目录下的PDF文件
  <Document file="/document.pdf">
    <Page />
  </Document>
);

export default PDFViewer;

2. 移除错误的webpack配置

你之前在next.config.js里的file-loader配置是多余且错误的，直接删掉这部分配置：

const nextConfig = {
  // 保留你原本的其他配置（如果有的话），移除PDF相关的loader规则
};

module.exports = nextConfig;

Next.js默认会处理public目录下的静态资源，会自动将这些文件复制到构建输出的根目录，不需要额外配置loader。

3. 保留正确的动态导入设置

你在Main组件里用dynamic导入并设置ssr: false是完全正确的，因为react-pdf依赖浏览器环境的API，不能在服务端渲染，继续保持这个配置：

import dynamic from "next/dynamic";

const PDFViewer = dynamic(() => import('@/components/PDFViewer'), { ssr: false })

export default function Main() {
  return (
    <div>
      <PDFViewer />
    </div>
  )
}

额外检查项 #

• 确认public目录下确实存在document.pdf文件，文件名拼写、大小写完全一致（Linux/macOS系统区分大小写）；
• 如果需要自定义PDF的访问路径，比如放到public/pdf/document.pdf，那么组件里的路径就要改成/pdf/document.pdf。

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