如何在React应用中启用Vercel Web Analytics及代码放置位置

首先确保你已经安装了依赖包：

npm install @vercel/analytics
# 或者用yarn
yarn add @vercel/analytics

接下来根据你的React项目类型，找到对应的根文件并添加代码：

1. Create React App (CRA) 项目 #

根文件是src/index.js（用TypeScript的话是src/index.tsx）

• 在文件顶部添加导入：

  import { Analytics } from '@vercel/analytics/react';
  

• 找到根组件渲染的代码块，把<Analytics />放在<App />的同级外层（确保它能全局生效）：

  // React 17及以下写法
  ReactDOM.render(
    <React.StrictMode>
      <Analytics />
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  
  // React 18写法
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <Analytics />
      <App />
    </React.StrictMode>
  );
  

2. Vite React 项目 #

根文件是src/main.jsx（TypeScript对应src/main.tsx）

• 顶部导入组件：

  import { Analytics } from '@vercel/analytics/react';
  

• 在根渲染逻辑里加入<Analytics />：

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <Analytics />
      <App />
    </React.StrictMode>,
  );
  

3. Next.js 项目（Vercel官方框架） #

App Router（Next.js 13+） #

根布局文件是app/layout.js（或app/layout.tsx）

• 导入后在布局的JSX中添加组件：

  import { Analytics } from '@vercel/analytics/react';
  
  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <body>
          <Analytics />
          {children}
        </body>
      </html>
    );
  }
  

Pages Router #

根文件是pages/_app.js（或pages/_app.tsx）

• 在自定义App组件中加入：

  import { Analytics } from '@vercel/analytics/react';
  
  function MyApp({ Component, pageProps }) {
    return (
      <>
        <Analytics />
        <Component {...pageProps} />
      </>
    );
  }
  
  export default MyApp;
  

注意事项 #

• 组件只需在全局根位置添加一次，就能追踪整个项目的页面访问数据
• 本地开发时默认不会触发分析数据上报，部署到Vercel后会自动生效
• 无需额外配置，Vercel会自动关联你的项目分析面板

内容的提问来源于stack exchange，提问作者Manish Pandey