NextJs 项目版本从 9.0.1 升级到 9.0.4 的问题答案

【问题标题】：Issues with NextJs project version upgrade from 9.0.1 to 9.0.4NextJs 项目版本从 9.0.1 升级到 9.0.4 的问题
【发布时间】：2020-03-03 02:56:55
【问题描述】：

我从 package.json 将我的项目版本从 9.0.1 升级到 9.0.4

"next": "9.0.4"

此项目升级的目的是使用 NextJs 9.0.4 版本中包含的内置压缩。

根据 NextJs 文档，我已确保来自 next/document 的 Head 仅在 _document 内部使用，而来自 next/head 的 Head 用于其他任何地方。

import Document, { Html, Head, Main, NextScript } from "next/document"; // For _document.js use only
import Head from "next/head"; // For every other pages and _app

这次项目版本升级后，我注意到了几件事

首先缺少 next-head-count 标记。当我在开发模式下运行它时，它弹出了这个控制台错误

index.js:1 Warning: next-head-count is missing. https://err.sh/next.js/next-head-count-missing

我检查了这一点，发现 next-head-count 是在 body 标记内呈现的，而它本应在 head 标记内呈现。

其次，我注意到链接标签和标题都呈现在头部和正文标签内。

<head>
  // All the link tags rendered in here
</head>
<body>
  // next-head-count rendered in here 
  // Title tag in here
  // All the link tags rendered in here too
</body>

这些在 NextJs 中正常吗？我害怕在实时模式下，下一个人数错误会让我破坏 SEO、功能和其他东西。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

经过数小时的调试和谷歌搜索，终于找到了根本原因。

事实证明，Head 标签内不允许有 div。 Head 中的任何 div（或生成 div 的 React 组件）都会导致 Head 在 Body 中呈现。 Head 中有一个 GoogleTagManager 组件，它返回一个 div 块。删除之后，一切正常，头部按预期正确渲染。

【讨论】：