使用Webpack file-loader在Next.js中加载PDF出现404错误怎么办？

问题根源 #

你将PDF文件放在public/documents/目录下，却额外配置Webpack的file-loader来导入处理，这和Next.js对public目录静态资源的默认处理逻辑冲突。Next.js会自动托管public目录下的资源，直接通过根路径访问即可，无需额外配置loader打包这类文件。

具体修复步骤 #

1. 移除冗余的Webpack配置
   删除nextConfig中添加的file-loader规则，Next.js内置了静态资源处理能力，不需要额外配置：

   const nextConfig = {
     output: "standalone",
     // 删掉以下file-loader相关配置
     // webpack: (config, options) => {
     //   config.module.rules.push({
     //     test: /\.(png|gif|mp4|pdf)$/i,
     //     use: [
     //       {
     //         loader: "file-loader",
     //         options: {
     //           name: "[name].[ext]",
     //         },
     //       },
     //     ],
     //   });
     //   return config;
     // },
   };
   

2. 直接使用public目录路径
   不再通过import导入PDF文件，直接在a标签的href中填写public目录下的根相对路径：

   <a
     href="/documents/leaders-instructions.pdf"
     target="_blank"
     download // 若需要强制下载而非浏览器打开，添加此属性
   >
     下载PDF
   </a>
   

3. 重启开发服务
   修改配置后重启Next.js开发服务器，确保新配置生效。

补充说明 #

如果你的PDF文件需要放在src目录下通过Webpack打包，需调整file-loader的输出路径配置，确保打包后文件能被正确访问：

loader: "file-loader",
options: {
  name: "[name].[ext]",
  outputPath: "documents/", // 指定打包后输出到documents目录
  publicPath: "/documents/", // 设置前端访问路径
},

但更推荐使用public目录存放静态资源，这是Next.js的标准实践，配置更简单、访问更可靠。

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