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

Question

我将我的项目版本从 package.json

的 9.0.1 升级到 9.0.4

"next": "9.0.4"

此项目升级的目的是使用 NextJs 9.0.4 版本中包含的 built-in 压缩。

而且我已经确保，根据 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 标签内呈现。

其次，我注意到 link 标签和标题在 head 和 body 标签内呈现。

<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中正常吗？我害怕 next-head-count 错误会让我在实时模式下破坏 SEO、功能和其他东西。

Answer 1

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

原来Head标签里面不允许有div。 Head 内的任何 div（或生成 div 的 React 组件）都会导致该 Head 在 Body 内呈现。 Head 中有一个 GoogleTagManager 组件，其中 returns 一个 div 块。删除它后，一切正常，头部按预期正确渲染。

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

Issues with NextJs project version upgrade from 9.0.1 to 9.0.4

reactjs

next.js