如何在 Next.js 中设置预加载标头？答案

【问题标题】：How do I set preload headers in Next.js?如何在 Next.js 中设置预加载标头？
【发布时间】：2021-04-26 14:01:09
【问题描述】：

当文件具有随机构建名称时，如何在 Next.js 中设置预加载标头？

我从页面源代码中看到，静态文件是使用 html 中的链接标签预加载的。我宁愿将这些预加载在标头中，因为这也启用了 HTTP/2 服务器推送。

根据文档，您可以在 next.config.js 中设置自定义标头。这很好，但主要问题是每次构建时文件名都会得到随机字符串。

例如，我还有一些我想推送的本地字体文件，以及 Tailwind 生成的 CSS 文件。

如何为 Next.js 中的资源设置预加载标头？

编辑：

我已经设法在标题中硬编码字体文件，因为这些文件在重建时会保持随机名称。 Tailwind CSS 似乎不可能以这种方式硬编码，因为它在我重建后立即获得了一个新名称。我想在这种情况下我可以修改构建文件夹，但这两种方法都不太理想。

为什么这不是使用 React/Next.js 的人更常见的问题？据我所知，只要服务器支持，使用 HTTP/2 服务器推送可以让一切变得更快。

【问题讨论】：

【解决方案1】：

这是一个可行的（但它有效吗？）解决方案，需要设置 Apache2 或 NGINX 反向代理：

【讨论】：