警告：缺少下一个人数

Question

我正在使用来自 Next documentation. 的自定义 _document.js 结果，我不断收到打印到控制台的警告消息。我试图重新启动我的服务器并清空浏览器的缓存。我的 _document.js 应该在 "pages" 文件夹中。我通过向我的 <Head> 添加一些标签并检查我的网站以查看标签是否被添加到 <Head> 来确保文件正在被读取。（我的网站运行正常，我只是厌倦了这条警告消息。）

控制台警告：

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

这是我的 _document.js 文件：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Answer 1

显然我在 index.html 中也有一个 <head> 标签。删除它后错误消失了。我的_document.js没有问题。我在 index.js 中的单独 <head> 中导入样式，这就是发生错误的原因。

解决方案：我将 <head> 内容从 index.js 移动到 _document.js 并从 index.js.

中删除了 <head> 标签

Answer 2

将不受支持的 html 标签添加到 <Head> 标签时，也会出现此错误。

在我的例子中，我不小心在组件的 <Head>...</Head> 标签内添加了一个 <p>...</p> 标签，这引发了这个错误。

Answer 3

在我的例子中，从 next/Document 导入的 Head 组件在自定义 _document 中，但它在 body 标签内，将其移动到 Html 组件内并固定在 body 标签外它。

// Incorrect
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <body>
          <Head />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}


// Correct
export default class MyDocument extends Document {
  render (): JSX.Element {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Answer 4

在我的案例中，“将 HTML 转换为 JSX”vscode 扩展在 next/head 组件中添加了包装器 div 标记。我删除了 div 标签，警告消失了。

Answer 5

在我的例子中，next 的 Head 组件中有一个不正确的 html 标签。这个错误90%的意思是Head里面的内容有问题。尝试将 Head 中的元素一个一个地删除，您将找到导致问题的原因。

Answer 6

对我来说，我在 <Head> 中有一个自定义组件 <MobileView>。所以改变它就成功了。

Answer 7

我有同样的问题，它与 <Head> 标签内的 <html lang="en" /> 有关。

警告：缺少下一个人数

Warning: next-head-count is missing

javascript

next.js

head