百度统计的使用很方便，统计数据维度多，也支持单页应用。在此记录博客 (Next.js) 接入百度统计的方式。

配置百度统计

https://tongji.baidu.com/

添加网站，填写域名。只要埋点的域名和设置的域名匹配，即可成功埋点。

配置单页应用自动埋点

对于 Next.js 的 SSG 模式，首次启动后，后续的页面和数据加载会类似于单页应用的模式。

所以需要到百度统计的设置里开启“单页应用数据统计”，这样会基于 History API 或者 hashchange 自动记录页面 PV 日志。

路径：使用设置 - 规则设置 - 单页设置。

另外，如果需要自行控制埋点时机，也可以通过 JS API 处理。可参考文档： https://tongji.baidu.com/web/help/article?id=324

接入代码

通过 https://nextjs.org/docs/pages/api-reference/components/script 接入统计代码。

strategy 选择 afterInteractive ，在页面 hydration 后尽早加载。

通过 dangerouslySetInnerHTML 的 __html 填写百度统计提供的代码。

<Script
  id="baidu-tongji"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: ``,
  }}
/>

因为这个代码会转义，百度统计无法识别已安装代码。等待一段时间后判断是否有埋点数据即可。