Next JS 版本 12+：静态站点生成答案

【问题标题】：Next JS Version 12+: Static Site GenerationNext JS 版本 12+：静态站点生成
【发布时间】：2021-12-27 22:00:52
【问题描述】：

我在一个新项目中使用 Next.js 版本 12.0.4，在之前的项目中使用过 Next.js 版本 10。

静态站点渲染在构建时有什么变化吗？当我使用包含大量 .js 文件且没有我期望的本机文本“内容”的 html 文件执行 npm run build （依次执行“下一个构建和下一个导出”）时，它会渲染我的所有输出页面。

也就是说，输出中没有任何标准的 HTML <h1>、<h2> 等，只是一堆 javascript 供客户端水合。

Next.js 的早期版本（或者可能是我的配置？）似乎可以很好地呈现纯粹的最终 HTML。

我正在尝试呈现一个简单的 About 页面（没有动态路由，该路由没有动态 props），虽然它在“/about/index.html”输出位置正确呈现了一个页面，但该页面有一个一堆 .js 文件和一个 JSON 有效负载。该页面确实可以正确显示，但出于 SEO 和其他原因，我真的希望“out”目录中的输出是带有 HTML 预渲染的实际 .html 文件。

在我的 next.config.js 中，我指定了：

module.exports = {
  exportPathMap: function () {
    return {
      "/": { page: "/" },
      "/about": { page: "/about" },
    };
  },
};

我还在 about 页面组件 (about.tsx) 上指定了 getStaticProps。（如果这很重要，我正在使用打字稿。）

渲染后的 /about/index.html 文件包含大量 .js 文件，但没有真正的 HTML“内容”。

我是否错过了配置设置？我该怎么做才能让它在我想要的地方呈现纯 HTML？

【问题讨论】：

标签： next.js

【解决方案1】：

啊哈！好的，所以这个错误当然是我这边的编码错误。

在 _app.tsx 中，我有一个我编写的身份验证包装器。通过（糟糕的）设计，如果用户未通过身份验证，它故意不为它渲染孩子。因此，预渲染器不会渲染“常规” html 元素，因为预渲染器当然不会登录。

如果您遇到同样的问题，请确保您没有将所有视图包装在某个有条件地呈现子元素的提供程序元素中。

【讨论】：