如何将 NextJS 页面下载为静态 HTML 文件？

【问题标题】：How can I download a NextJS page as a static HTML file?如何将 NextJS 页面下载为静态 HTML 文件？
【发布时间】：2021-07-09 13:22:09
【问题描述】：

所以我用 Next 制作了这个网站，在一个页面上有一些图表（图表内容在获取 API 时会发生变化）和信息。我想在页面上添加一个按钮，当按下它时，将页面下载为 HTML 文件，并将所有 JS 和 CSS 包含在 HTML 文件中，而不是单独包含，有没有人知道如何解决这个问题。（图表内容应与下载时一致）

（我之所以要这样做是因为我想将这些文件分发给其他人，并且我想让他们在没有互联网连接的情况下阅读它）

【问题讨论】：

这是一个大问题。您必须将数据存储到本地文件并以某种方式在浏览器中打开站点包时加载它（而不是进行 API 调用）。我会寻找不同的策略，例如 PDF 生成。

标签： reactjs webpack next.js

【解决方案1】：

您无法真正下载 React 的“页面”，因为 React 中没有可供下载的页面。

Next 使这进一步复杂化，因为它在服务器端渲染所有内容并在客户端补充水分。如果您检查其中一个页面，您将看到 JSON 块 Next 用于数据。查找__NEXT_DATA__ 脚本（通常在页面的页脚中）。

我认为您可以使用两种策略：

在构建过程中截取图表并将其推送到 AWS S3 存储桶或类似存储桶（繁琐）
当我遇到这样的需求时，我只是将图表的数据作为 JSON 下载提供在图表下方，它充分满足了用例。

如果您只想下载资产并查看一下，解决方法可能是利用 next/export 包。这允许您运行yarn build 并生成整个站点的静态导出。这应该包括您要查找的文件。

只是一些需要思考的想法。

【讨论】：