Nextjs 在每个页面上使用带有 head 标签的 _document答案

【问题标题】：Nextjs using _document with head tag on each pageNextjs 在每个页面上使用带有 head 标签的 _document
【发布时间】：2021-10-03 18:49:02
【问题描述】：

我正在为我的网站使用带有 typescript 的 Next.js，所有应该在 <head> 中的组件都在 <body>。
我将_document.tsx 用于谷歌字体和其他一些脚本。

pages/_document.tsx

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

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap"
            rel="stylesheet"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap"
            rel="stylesheet"
          />
          ...
        </Head>
        <body className="min-w-max">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

pages/index.tsx

export default function Home() {
    return (
      <div>
        <Head>
          <title>title</title>
          ...
        </Head>

        ...
      </div>
    )
}

这些是我的_document.tsx 和主页index.tsx，我从下面的 DevTool 元素中得到结果。

就像这张图片一样，我在 Head 上设置的 _document.tsx 和 index.tsx 都在 <body> 中。只有一些我没有在<head> 中写的原始试验元标记。
因此，Warning: next-head-count is missing. 错误被触发，我按照 next.js 建议的步骤进行操作，但没有任何改变。

对此有何解决方案或想法？

【问题讨论】：

无法使用完全相同的_document 复制问题。您能否在代码框或类似内容中提供一个最小的可重现示例？
@juliomalves 我正在检查我的代码以提供更多信息，我刚刚发现了错误并修复了它，我将在下面发布。感谢您的关心。

标签： html next.js head

【解决方案1】：

我将<Head> 标签作为一个组件，并在我获得的每个页面中使用它。然后我在里面看到了<html lang="en">。这导致我在<head> 位置内的所有脚本标签到<body>。删除后，一切正常。

[解决]：不要在<Head>内部使用<html>标签

【讨论】：