Next.js 15集成百度统计方法 - 详细教程
2025/3/14
本文详细介绍了在Next.js 15中集成百度统计的两种方法，包括使用Next.js Script组件和自定义Document，以及如何跟踪客户端路由变化并验证安装。
在 Next.js 15 中集成百度统计（Baidu Tongji）可以通过以下步骤实现：
方法 1：使用 Next.js Script 组件（推荐）
-
在根布局组件中添加代码
修改app/layout.tsx（或.jsx）文件：import { Html, Head, Main, NextScript } from 'next/document' import Script from 'next/script' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="zh-CN"> <Head> {/* 百度统计脚本 */} <Script id="baidu-tongji" strategy="afterInteractive" dangerouslySetInnerHTML={{ __html: ` var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?YOUR_BAIDU_HM_ID"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); `, }} /> ) } -
替换 YOUR_BAIDU_HM_ID
将代码中的YOUR_BAIDU_HM_ID替换为你的百度统计 ID。
方法 2：通过自定义 Document（适用于 Pages Router）
如果使用 Pages Router（pages/_document.tsx）:
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?YOUR_BAIDU_HM_ID";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
`,
}}
/>
)
}
}
export default MyDocument
客户端路由事件跟踪（SPA 支持）
如果需要跟踪 Next.js 客户端路由变化（页面切换）：
-
创建跟踪工具
新建lib/tracking.ts：export const trackPageView = (url: string) => { if (typeof window !== 'undefined' && window._hmt) { window._hmt.push(['_trackPageview', url]) } } -
在组件中监听路由
修改app/layout.tsx：'use client' import { usePathname } from 'next/navigation' import { useEffect } from 'react' import { trackPageView } from '@/lib/tracking' export default function Layout({ children }: { children: React.ReactNode }) { const pathname = usePathname() useEffect(() => { trackPageView(pathname || '/') }, [pathname]) return <>{children}</> }
验证安装
- 部署后访问网站
- 登录百度统计后台查看实时数据
- 检查浏览器开发者工具 Network 面板中的
hm.js请求
注意事项：
- 使用
dangerouslySetInnerHTML时需确保代码来源可信 afterInteractive策略可避免阻塞页面加载- 百度统计可能需要 20 分钟到数小时才会显示初始数据
以下是 JavaScript 版本的客户端路由事件跟踪实现：
1. 创建跟踪工具文件
新建 lib/tracking.js:
export const trackPageView = (url) => {
if (typeof window !== 'undefined' && window._hmt) {
window._hmt.push(['_trackPageview', url])
}
}
2. 在布局组件中添加路由监听
修改 app/layout.jsx:
'use client'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'
import { trackPageView } from '@/lib/tracking'
export default function Layout({ children }) {
const pathname = usePathname()
useEffect(() => {
// 跟踪页面访问
trackPageView(pathname || '/')
// 可选：调试用控制台输出
console.log('Tracked page view:', pathname)
}, [pathname])
return <>{children}</>
}
标签：Nextjs
上次更新：