Next.js 接入访问统计和文章阅读数
按博客平台放置统计脚本和只读阅读数组件，验证收到浏览数据，处理本地开发和单页导航。
1. 准备两个独立的 ID
在应用的接入与设置中复制应用 ID。再创建文章阅读数组件，明确允许公开阅读数，复制计数组件 ID。应用 ID 与计数 ID 不能互换。全站统计脚本只安装一次；计数脚本只展示数据，不采集访问。
2. 放置脚本和阅读数
App Router 在 app/layout.tsx 加载一次 next/script。阅读数节点放在文章组件中，客户端路由切换后刷新。统计 SDK 自己识别路由变化，不要再手动补同一条浏览事件。
import Script from 'next/script'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html><body>{children}
<Script src="https://antdock.com/js/tracker.js" data-app-id="YOUR_APP_ID" strategy="afterInteractive" />
<Script src="https://antdock.com/api/article-counters/embed.js" data-counter-id="YOUR_COUNTER_ID" strategy="afterInteractive" />
</body></html>
}将 YOUR_APP_ID 和 YOUR_COUNTER_ID 替换成控制台中的真实值。下面的节点放在每篇文章中，显示当前路径的阅读数。
<span data-antdock-counter="YOUR_COUNTER_ID"><span data-page-count="views">—</span></span>单页导航不会重新加载脚本。切换文章并更新节点后刷新只读计数：
'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'
export default function CountsRefresh() {
const path = usePathname()
useEffect(() => {
const frame = requestAnimationFrame(() => window.dispatchEvent(new Event('antdock:page-counts')))
return () => cancelAnimationFrame(frame)
}, [path])
return null
}
// Render <CountsRefresh /> inside RootLayout's <body>.3. 验证确实收到了数据
- 部署到线上，用未设置忽略标记的隐身窗口打开一篇文章。本地地址默认不统计；如需专门验证本地示例，在统计脚本上增加 data-allow-local。
- 在应用的接入验收或访问记录中确认出现该路径的新浏览事件。单页切换文章时再检查新路径，避免重复安装或手动补报同一事件。
- 确认阅读数节点由 — 变为数值。只读计数可能稍后更新；保留期外的数据不代表历史累计数。授权关闭或请求失败时保持 —，不能当作 0。
调试与常见问题
站长可用 ?antdock=ignore 忽略当前浏览器在当前域名的访问，用 ?antdock=track 恢复。DevTools Network 用 -domain:antdock.com 过滤采集请求。广告拦截、CSP 或网络限制可能阻止采集；请核对域名、脚本 ID 和公开计数权限。
计数默认使用当前 URL 路径，忽略查询参数与片段。列表中的多篇文章要分别在父节点设置 data-page-path 为该文章的实际路径。旧平台计数不会自动导入。