Next.js项目下载public目录PDF文件遇「文件未找到」错误求助

核心问题：路径错误 #

Next.js的public文件夹是静态资源根目录，构建后其中的文件会直接部署到站点根路径下，所以不能用相对项目文件的路径（比如../../public/resume.pdf）访问，必须使用根相对路径或通过导入获取正确URL。

解决方法 #

方法1：使用根相对路径 #

直接将PDF路径改为/resume.pdf，这是访问public文件夹内文件的标准方式：

"use client";

import downloadPDF from "@/utils/downloadPDF";
import Button from "@/components/common/Button";

const ResumeButton = () => {
  const resumeClick = (e) => {
    e.preventDefault();
    // 直接使用根路径访问public中的PDF
    downloadPDF("/resume.pdf", "HaroonAhmed.pdf");
  };
  return (
    <Button
      bgColor="bg-lime-600"
      textColor="text-white"
      className="my-4"
      handleClick={resumeClick}
    >
      Download Resume
    </Button>
  );
};

export default ResumeButton;

方法2：导入PDF文件获取自动处理的路径 #

Next.js支持直接导入静态资源文件，会自动返回正确的访问URL，这种方式更适配不同部署环境：

"use client";

import downloadPDF from "@/utils/downloadPDF";
import Button from "@/components/common/Button";
// 导入PDF文件，Next.js会自动处理路径
import resume from "../../public/resume.pdf";

const ResumeButton = () => {
  const resumeClick = (e) => {
    e.preventDefault();
    // 使用导入文件的src属性作为URL
    downloadPDF(resume.src, "HaroonAhmed.pdf");
  };
  return (
    <Button
      bgColor="bg-lime-600"
      textColor="text-white"
      className="my-4"
      handleClick={resumeClick}
    >
      Download Resume
    </Button>
  );
};

export default ResumeButton;

验证文件位置 #

确保resume.pdf确实放在项目根目录的public文件夹下，路径为public/resume.pdf，而非嵌套在子文件夹（如public/docs/resume.pdf）中，若嵌套则路径需对应调整（比如/docs/resume.pdf）。

工具函数无需修改 #

你的downloadPDF工具函数逻辑是正确的，只要传入正确的URL即可正常工作。

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