我知道这是重复的，但我不能用这些答案解决我的问题。下面是我的代码：
//_document.tsx
import Document, { Html, Head, Main, NextScript } from "next/document";
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body dir="rtl">
<Main />
<NextScript />
</body>
</Html>
);
}
}
//_app.tsx
import "../styles/globals.scss";
import Head from "next/head";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<Head>
<title>Bitbarg</title>
<meta name="description" content="Descriptions" />
<link rel="icon" href="/favicon.ico" />
<body dir="rtl" />
</Head>
<Component {...pageProps} />
</>
);
}
export default MyApp;字符串
我仍然得到这个错误。我尝试在_document.tsx中使用all _app.tsx Head标签，这删除了错误，但我得到了新的错误：
标题应该使用next/head在页面级别定义。
我试着只把下面的代码放在_app.tsx中，但它又给了我一个next-head-count错误。
<Head>
<title>Bitbarg</title>
</Head>型
1条答案
按热度按时间r1wp621o1#
看起来您遇到错误是因为您试图在
_document.tsx和_app.tsx文件中使用Head组件，这导致呈现页面级元数据时发生冲突。Head组件应该只在单独的页面组件中使用，而不是同时在_document.tsx和_app.tsx中使用。要解决此问题，请执行以下步骤：
1.从
_app.tsx文件中完全删除Head组件，包括title、meta和link标记。1.将
Head组件保留在_document.tsx文件中，以定义应出现在所有页面上的任何公共元数据。例如，您可以在此处设置title、description和favicon。但请确保删除了可能从_app.tsx复制的任何冲突元数据。更新后的
_document.tsx应该如下所示：字符串
通过执行这些步骤，您应该能够解决“next-head-count is missing”错误，并正确定义页面级元数据。请记住，各个页面组件仍然可以使用
Head组件来设置每个页面唯一的特定元数据。因为我已经在_document.js中使用了它