记录 Next.js 网站添加谷歌统计和百度统计

Next版本为14 并且项目使用了 Next.js 的 App Router 而不是传统的 Pages Router

首先，我们需要创建一个新的组件来处理分析代码。在 app 目录下创建一个新文件，例如 components/Analytics.tsx:

然后，我们需要在应用的根布局文件中使用这个组件。在 app/layout.tsx 文件中添加以下内容:

最后，确保在项目根目录下的环境变量文件中，例如 .env.local 文件中添加了 Google Analytics 和百度统计 ID：

NEXT_PUBLIC_GA_ID=YOUR_GOOGLE_ANALYTICS_ID
NEXT_PUBLIC_BAIDU_ANALYTICS_ID=YOUR_BAIDU_ANALYTICS_ID

这种方法适用于 Next.js 13 及以上版本使用 App Router 的项目。它具有以下优点：

1. 使用 next/script 组件来优化脚本加载。
2. 利用 App Router 的客户端组件来处理路由变化。
3. 在整个应用中只需添加一次 Analytics 组件。