在_document.js的Head中不应使用
我已经根据文档设置了一个简单的_document文件来设置Favicon，并使用Next/Head设置每个页面的标题(最终会在其中放入更多元数据(。然而，由于这样做，我收到了以下警告(最终指向_document文件(：
title元素接收到一个数组，该数组包含多个子元素。在浏览器中，title元素只能将文本节点作为子级。如果被渲染的子节点总共输出了多个文本节点，浏览器将在标题中显示标记和注释作为文本，水合可能会失败并返回到客户端渲染
一切似乎都在工作，但警告有点困扰我，所以我只想检查一下我是否做得很好。
_document.js
import { Html, Head, Main, NextScript } from "next/document";
import Favicon from "../components/layout/favicon";
export default function Document() {
return (
<Html>
<Head>
<Favicon />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
example page
import Head from "next/head";
export default function Services() {
<div>
<Head>
<title>Services</title>
<meta name="description" content="TBC" />
</Head>
....
</div>
}
我不相信是这个，但为了完成任务，Favicon组件：
favicon.js
export default function Favicon() {
return (
<>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/site.webmanifest" />
<link
rel="mask-icon"
href="/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</>
);
}
希望这是足够的信息，但如果还需要什么，请告诉我。
提前干杯。
title。而是将其放入_app正如在：nextjs.org docs 中所说