无法访问已部署的 Next.js 应用程序上的公共文件

Question

我正在尝试设置我的个人网站，以便观众可以单击按钮并下载我的简历。在我的开发服务器上，我只需将其添加resume.pdf到公共 Next.js 文件夹中，当我尝试下载时，它就可以工作。

 <a href='/resume.pdf' download>
   <button>
     Download Resume
   </button>
 </a>

然而，一旦我的网站托管在 Vercel 上，每当我尝试下载简历时，我的 Chrome 下载器都会告诉我：

404 Failed - No file

我注意到，每当我尝试从公共文件夹中渲染图像时，都会发生同样的行为。

next.config.js是否有我缺少的设置？我似乎无法在网上找到有关此问题的任何有用信息。

Answer 1

假设resume.pdf直接在public文件夹内

<a href='/resume.pdf' download="resume.pdf">
   <button>
     Download Resume
   </button>
 </a>

或者您可能需要 href 的完整网址。因为download属性只适用于同源url。因此，如果 href 与站点的来源不同，它将无法工作。

 <a href='https://your domain.com/resume.pdf' download="resume.pdf">
       <button>
         Download Resume
       </button>
     </a>

如果这不起作用，您可以在 iframe 中显示 pdf 文件，而不是下载按钮。

  <div>
        <iframe style={{width: '100%', height: '800px'}} src="/resume.pdf"/>
      </div>