在 Next.js 项目中添加百度统计
2025/2/10
在 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); })(); `, }} /> ); } } 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 项目中成功添加百度统计，并开始跟踪网站流量数据。