Next.js 13导入PDF实现简历下载报错，求配置修改方案

核心原因 #

你不需要导入public/resume.pdf文件，Next.js会自动将public目录下的文件作为静态资源托管，直接通过路径访问即可。导入文件会触发webpack尝试解析二进制PDF，导致缺少对应loader的错误。

最简单的解决方案（推荐） #

直接在React组件中使用静态资源路径，无需导入：

<a href="/resume.pdf" download>下载简历</a>

• href="/resume.pdf"：直接指向public目录下的PDF文件，Next.js会正确映射这个路径
• download属性：触发浏览器下载行为，而非直接打开PDF

若需通过webpack处理（可选） #

如果需要webpack处理文件名哈希、资源优化等场景，可修改next.config.mjs，添加webpack配置以支持PDF文件：

import remarkGfm from 'remark-gfm'
import createMDX from '@next/mdx'

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  webpack: (config) => {
    // 添加对PDF文件的处理规则
    config.module.rules.push({
      test: /\.pdf$/,
      type: 'asset/resource',
      generator: {
        filename: 'static/[hash][ext][query]'
      }
    })
    return config
  }
}

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
})

export default withMDX(nextConfig)

配置完成后，可正常导入PDF文件使用：

import ResumePDF from '../public/resume.pdf'

<a href={ResumePDF} download>下载简历</a>

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