Next.js应用加载本地静态PDF点击跳转404配置问题排查

问题原因&解决方法 #

1. 直接错误：href变量被错误包裹为对象 #

你在定义AGB的导航项时，错误将导入的PDF路径变量用大括号包裹，生成了一个JS对象而非字符串路径：

// 错误写法：多了一层大括号，生成 {Agb: 'xxx/AGB.pdf'} 对象
{ name: 'AGB', href: {Agb} },

对象转换为字符串后就是你地址栏显示的[object Object]，自然返回404。
修复：去掉多余大括号即可

{ name: 'AGB', href: Agb },

2. webpack配置遗漏项 #

当前的file-loader配置没有指定输出路径和公共访问路径，Next.js构建后PDF文件的访问路径会不匹配，需要补充配置项：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.pdf$/,
      // 排除不需要处理的文件夹，避免冲突
      exclude: /node_modules/,
      use: [
        {
          loader: 'file-loader',
          options: {
            // 公共访问路径，对应Next.js静态资源访问规则
            publicPath: '/_next/static/pdf',
            // 构建后文件输出路径
            outputPath: 'static/pdf',
            // 保留原文件名，也可以加hash避免缓存
            name: '[name].[ext]',
            // 关闭ES模块导出，适配CommonJS导入规则
            esModule: false
          },
        } 
      ]
    })
    return config
  },
}

3. 额外优化建议 #

给target="_blank"的a标签补充rel="noopener noreferrer"属性，避免安全风险：

<a 
  href={item.href} 
  className="text-base text-gray-500 hover:text-gray-900" 
  target="_blank"
  rel="noopener noreferrer"
>
  {item.name}
</a>

如果不想额外配置webpack，也可以直接把PDF文件放到项目根目录的public文件夹下，不需要导入也不需要配置loader，直接写路径即可：

{ name: 'AGB', href: '/AGB.pdf' },

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