我已经根据文档设置了一个simple _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" />
</>
);
}希望这是足够的信息，但请让我知道，如果还需要什么。
先干杯。
1条答案
按热度按时间jdgnovmf1#
title不应该用在_document.js的Head中，而应该放在_app中，如下面的语句所示：nextjs.org docs