Install Vercel Web Analytics integration

analytics.js

@@ -0,0 +1,4 @@
+// Vercel Web Analytics
+import { inject } from '@vercel/analytics';
+
+inject();

index.html

@@ -686,6 +686,7 @@ <h3>ℹ️ Quick Start - Try These!</h3>
     <script defer src="public/js/session.js"></script>
     <script defer src="public/js/terminal.js"></script>
     <script defer src="public/js/main.js"></script>
+    <script type="module" src="analytics.js"></script>
     <script type="module" src="speed-insights.js"></script>
   </body>
 </html>

my-workflow-app/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from '@vercel/analytics/next';
 import "./globals.css";
 
 const geistSans = Geist({
@@ -28,6 +29,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Analytics />
       </body>
     </html>
   );

my-workflow-app/package.json

@@ -9,18 +9,19 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@vercel/analytics": "^2.0.1",
+    "next": "16.0.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }