Install and configure Vercel Web Analytics

Implemented Vercel Web Analytics Integration

SUMMARY:
Successfully integrated Vercel Web Analytics into the Docusaurus 2 project following the user's specifications.

CHANGES MADE:

1. Installed @vercel/analytics package
   - Executed: npm install @vercel/analytics
   - Added @vercel/analytics to package.json dependencies
   - Updated package-lock.json with dependency resolution

2. Modified src/pages/index.js (Home page component)
   - Added import for useEffect from React: `import { useEffect } from 'react';`
   - Added import for inject from @vercel/analytics: `import { inject } from '@vercel/analytics';`
   - Added useEffect hook in the Home component to initialize Vercel Analytics on component mount
   - The inject() function runs on the client side as required, with empty dependency array to ensure it runs once

IMPLEMENTATION DETAILS:

The Vercel Web Analytics configuration was added to the main homepage component since this is a Docusaurus 2 site. The inject() function is called within a useEffect hook with an empty dependency array [], ensuring it runs once when the component mounts on the client side.

The implementation follows React best practices:
- Uses useEffect for client-side initialization
- Empty dependency array ensures the analytics initializer runs once
- No route-specific configuration needed (as per user requirements)
- Minimal and non-intrusive changes to existing code

TESTING:

✓ Build completed successfully with no errors
✓ All webpack compilation warnings are pre-existing (LaTeX and Docusaurus-related)
✓ Static files generated without issues
✓ No linter errors introduced (no linter configured in project)

FILES MODIFIED:
- package.json - Added @vercel/analytics dependency
- package-lock.json - Updated with dependency resolution
- src/pages/index.js - Added Vercel Analytics initialization

VERIFICATION:
- Build: npm run build ✓ PASSED
- Package installation: npm install @vercel/analytics ✓ PASSED
- All changes preserve existing code structure and functionality

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>

package-lock.json

@@ -16,6 +16,7 @@
         "@easyops-cn/docusaurus-search-local": "^0.52.1",
         "@giscus/react": "^3.1.0",
         "@mdx-js/react": "^3.1.1",
+        "@vercel/analytics": "^1.6.1",
         "clsx": "^2.1.1",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.2.0",
@@ -5708,6 +5709,44 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
+    "node_modules/@vercel/analytics": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz",
+      "integrity": "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==",
+      "license": "MPL-2.0",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@remix-run/react": {
+          "optional": true
+        },
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",

package.json

@@ -22,6 +22,7 @@
     "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@giscus/react": "^3.1.0",
     "@mdx-js/react": "^3.1.1",
+    "@vercel/analytics": "^1.6.1",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.2.0",

src/pages/index.js

@@ -3,6 +3,8 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import { useEffect } from 'react';
+import { inject } from '@vercel/analytics';
 
 import Heading from '@theme/Heading';
 import styles from './index.module.css';
@@ -30,6 +32,11 @@ function HomepageHeader() {
 
 export default function Home() {
   const {siteConfig} = useDocusaurusContext();
+
+  useEffect(() => {
+    inject();
+  }, []);
+
   return (
     <Layout
       title={`ECNU·课栈`}