在 Next.js 项目中添加百度统计

在 Next.js 项目中添加百度统计（百度统计是百度提供的网站流量分析工具），可以通过以下步骤实现：

1. 获取百度统计代码

登录百度统计后台，找到你需要统计的网站，获取对应的统计代码。代码通常如下：

<script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
</script>

其中，你的统计ID 是百度统计提供的唯一标识符。

2. 在 Next.js 项目中添加统计代码

Next.js 支持在 _app.js 或 _document.js 中添加全局脚本。以下是两种常见方式：

方法 1：在 `_app.js` 中添加

打开 pages/_app.js 文件（如果没有则新建）。

在 useEffect 中添加百度统计代码，确保只在客户端运行：

import { useEffect } from 'react';
import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 百度统计代码
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  }, []);

  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

方法 2：在 `_document.js` 中添加

打开 pages/_document.js 文件（如果没有则新建）。

在 <Head> 中添加百度统计代码：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 百度统计代码 */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                var _hmt = _hmt || [];
                (function() {
                  var hm = document.createElement("script");
                  hm.src = "https://hm.baidu.com/hm.js?你的统计ID";
                  var s = document.getElementsByTagName("script")[0]; 
                  s.parentNode.insertBefore(hm, s);
                })();
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

3. 验证统计代码是否生效

部署项目后，访问网站并查看百度统计后台，确认是否有数据记录。
可以使用浏览器的开发者工具（F12）检查网络请求，查看是否加载了百度统计的脚本（hm.js）。

4. 注意事项

客户端渲染：确保百度统计代码只在客户端运行，避免在服务器端执行。

环境变量：可以将统计 ID 放在环境变量中，避免硬编码：

const baiduAnalyticsId = process.env.NEXT_PUBLIC_BAIDU_ANALYTICS_ID;
hm.src = `https://hm.baidu.com/hm.js?${baiduAnalyticsId}`;

通过以上步骤，你可以在 Next.js 项目中成功添加百度统计，并开始跟踪网站流量数据。