Next.js 不再预生成页面 HTML答案

【问题标题】：Next.js no longer pre-generates page HTMLNext.js 不再预生成页面 HTML
【发布时间】：2021-07-23 10:53:29
【问题描述】：

我正在使用 Next.js 构建一个 Jamstack 应用程序，在过去一个月左右的某个时间点，页面停止了预生成 HTML（页面在加载时水合得很好，所以我没有注意到这个发生了）。

使用pages目录中世界上最简单的组件：

const Test = () => {
  return <h1>Hello worm</h1>;
};

export default Test;

...导致发送到浏览器的标记中的<div id="__next"></div> 元素为空（当我使用props、getStaticPaths() 或getStaticProps() 时也是如此）。

我知道一些 Redux 包可能会导致这种行为，但我没有使用 Redux。我的package.json 看起来像这样：

{
  "name": "sprintwell-takeshape",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@takeshape/routing": "^7.38.2",
    "isomorphic-fetch": "^3.0.0",
    "next": "^10.2.3",
    "next-pwa": "^5.2.23",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-markdown": "^6.0.2",
    "sass": "^1.34.1",
    "shopify-buy": "^2.11.0"
  }
}

（编辑）只是为了增加混乱，当我进行构建时，结果页面暗示构建的页面 do 具有预先生成的 HTML：

Page                                                           Size     First Load JS
┌ ● /                                                          732 B           149 kB
├   /_app                                                      0 B            83.3 kB
├ ● /[slug]                                                    910 B           149 kB
├   ├ /guarantee
├   ├ /privacy-policy
├   ├ /terms
├   └ [+7 more paths]
├ ○ /404                                                       3.74 kB        87.1 kB
├ λ /api/add-email                                             0 B            83.3 kB
├ ● /collections (ISR: 86400 Seconds)                          1.59 kB         149 kB
├ ● /collections/[slug]                                        1.91 kB         150 kB
├   ├ /collections/tea-cosies
├   ├ /collections/mp3-players
├   ├ /collections/clothing
├   └ [+5 more paths]
├ ● /products (ISR: 86400 Seconds)                             1.76 kB         150 kB
├ ● /products/[slug]                                           2.07 kB         150 kB
├   ├ /products/checkerboard-tea-cosy
├   ├ /products/fair-isle-cosy
├   ├ /products/christmas-cosy
├   └ [+27 more paths]
└ ● /test (ISR: 86400 Seconds)                                 304 B          83.6 kB
+ First Load JS shared by all                                  83.3 kB
  ├ chunks/0999c87ecb7e0a864f9e303ce1593fb7c2a32c6e.bbad1c.js  13.3 kB
  ├ chunks/11100001.b545b5.js                                  13.6 kB
  ├ chunks/framework.f8bd46.js                                 42.1 kB
  ├ chunks/main.fd1a9a.js                                      9.46 kB
  ├ chunks/pages/_app.3df493.js                                4.08 kB
  ├ chunks/webpack.50bee0.js                                   751 B
  └ css/b93e53639e8085f31884.css                               16.5 kB

谁能指出我正确的方向？

【问题讨论】：

也许您在自定义应用程序或文档中做了一些奇怪的事情？
你能分享页面/应用文件和你的配置“next.config.js”吗！
谢谢，Danila 和 Mohammad - 我一直在查看我的 Git 日志，我怀疑你是对的。

标签： javascript reactjs next.js shopify-api

【解决方案1】：

对于未来的人们，这就是正在发生的事情。我的结帐逻辑基于TakeShape's example Shopify repo。这包含了很多逻辑in _app.js，包括第 81 行附近的这一部分：

let content;
if (shopify === null || checkoutId === null) {
  content = null;
} else {
  content = <Component {...pageProps} />;

content 用于应用组件的return。我包含了这段代码，但并没有真正思考它为什么存在。我目前的猜测是，如果它在服务器端运行并且对象不存在，它会隐藏错误。不过需要注意的是，这段代码在the live version of TakeShape's demo 上没有问题。

在我的版本中，当我将 <Component {...pageProps} /> 添加回 return 语句时，它似乎没有抱怨。所以……修好了？

【讨论】：