Next.js 15 App Router部署后pdf.worker.mjs加载失败（MIME类型错误）

问题根源 #

本地开发正常但部署后Worker加载失败，核心原因是：

• Dockerfile中public目录的复制路径错误，导致静态资源无法被Next.js正确映射
• Worker文件的访问路径配置或资源部署位置不匹配

解决方案 #

1. 修正Dockerfile的资源复制逻辑 #

Next.js生产环境会自动将项目根目录public下的资源映射为静态资源，不需要手动复制到.next/public。正确的Dockerfile示例如下：

# 构建阶段
FROM node:20-alpine AS builder
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
COPY . .
RUN yarn build

# 生产运行阶段
FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV production

# 复制构建产物与必要文件
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

EXPOSE 3000
CMD ["yarn", "start"]

关键说明：直接保留根目录的public文件夹，Next.js的start命令会自动处理静态资源的路由映射，避免手动复制到.next/public导致的路径冲突。

2. 确保Worker路径配置正确 #

在React组件的钩子中，使用绝对路径指向public目录下的Worker文件：

import { useEffect } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';

export default function PdfViewer() {
  useEffect(() => {
    // 绝对路径确保生产环境下正确访问
    pdfjsLib.GlobalWorkerOptions.workerSrc = '/pdf.worker.mjs';
  }, []);

  // PDF渲染逻辑...
}

注意：不要使用相对路径，必须以/开头，保证不同部署域名下都能正确定位资源。

3. 验证静态资源可访问性 #

部署完成后，直接在浏览器访问http://你的域名/pdf.worker.mjs：

• 如果能看到Worker文件的JS代码，说明资源部署正常
• 如果返回404或HTML页面，重新检查Dockerfile的复制步骤，确认public目录被正确复制到容器的/app/public路径下

4. 可选：无需手动放置Worker文件的方案 #

可以通过动态导入的方式直接引用pdfjs-dist内置的Worker，避免手动管理文件：

import { useEffect } from 'react';
import * as pdfjsLib from 'pdfjs-dist';
import 'pdfjs-dist/web/pdf_viewer.css';

export default function PdfViewer() {
  useEffect(() => {
    pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
      'pdfjs-dist/build/pdf.worker.mjs',
      import.meta.url
    ).toString();
  }, []);

  // PDF渲染逻辑...
}

这种方式下，Next.js会在构建时自动处理Worker的依赖打包，无需手动将pdf.worker.mjs放到public目录。

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