HTML-NextJS使用每个页面上带有head标记的_文档-堆栈溢出

顺晟科技

2022-10-18 12:24:07

257

我正在为我的网站和所有应该在<head>位于<body>。我使用_document.tsx作为Google字体和其他一些脚本。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和homeindex.tsx，我从如下所示的devtool元素中获得结果。

就像这张图片一样，我在_document.tsx和index.tsx头上设置的所有内容都在<body>。只有一些我没有在<head>。因此，Warning: next-head-count is missing.错误被触发，我按照Next.JS建议的步骤进行操作，但没有发生任何变化。对此有什么解决方案或想法吗？

顺晟科技：

我做了我的<代码><；头>；标记作为一个组件，并在我得到的每个页面中使用它。然后我看到了<Head>在其中。这导致我的所有脚本标记都在<html lang="en">定位到<body>。删除后，一切工作正常。[解决方案]：不要使用<body><html>

上一篇：JavaScript-是否可以仅通过下一篇：HTML-如何使用媒体查询根据屏幕大