Next.js next-head-count缺失错误无法解决的技术求助

看起来你遇到的问题主要是因为错误地在next/head组件中放置了非<head>区块元素，以及没有遵循Next.js关于页面标题的最佳实践导致的。我来一步步帮你解决：

1. 先定位错误根源 #

你在_app.tsx的<Head>里写了<body dir="rtl" />，这是核心问题！<Head>组件的内容只会被插入到HTML的<head>标签中，而<body>标签属于页面的<body>区块，把它放在<Head>里会破坏DOM结构，直接触发next-head-count计数异常的错误。

另外，把所有头部内容都移到_document.tsx虽然暂时解决了计数错误，但违反了Next.js的设计规范——页面级的标题应该在具体页面组件中定义，这样每个页面可以拥有独立的标题，同时Next.js会自动处理SEO优化和标题覆盖逻辑。

2. 代码修复方案 #

第一步：修正_app.tsx的内容

保留全局通用的头部元素（比如favicon、全局meta），移除错误的<body>标签，同时可以设置一个默认标题：

import "../styles/globals.scss";
import Head from "next/head";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        {/* 全局通用的meta和资源链接 */}
        <meta name="description" content="Descriptions" />
        <link rel="icon" href="/favicon.ico" />
        {/* 设置默认标题，后续页面可以覆盖它 */}
        <title>Bitbarg</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

第二步：保持_document.tsx的正确结构

你的_document.tsx已经正确设置了<body dir="rtl">，不需要修改：

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>
    );
  }
}

第三步：在页面级定义专属标题

比如在首页pages/index.tsx中，添加页面特定的标题：

import Head from "next/head";

export default function HomePage() {
  return (
    <>
      <Head>
        {/* 这里的标题会覆盖_app.tsx中的默认标题 */}
        <title>Bitbarg - 首页</title>
      </Head>
      {/* 页面内容 */}
      <div>欢迎来到Bitbarg！</div>
    </>
  );
}

3. 为什么这样能解决问题？ #

• 移除_app.tsx中错误的<body>标签后，Next.js可以正常跟踪<head>元素的数量，next-head-count错误自然消失。
• 页面级定义标题既符合Next.js的最佳实践，又能让每个页面拥有独立的SEO标题，同时next/head组件会自动处理标题的优先级（页面级标题 > 全局默认标题）。

内容的提问来源于stack exchange，提问作者soroush madani