Vercel Analytics

The template ships with privacy‑friendly, zero‑config page analytics via Vercel. It tracks page views and performance across Production and Preview deployments, and surfaces insights in your Vercel dashboard.

Already wired for you

The template includes the analytics component in app/layout.tsx:

// app/layout.tsx
import { Analytics } from '@vercel/analytics/next'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

If you deploy to Vercel and enable Web Analytics for your project, data will start flowing automatically. No keys or ids are needed.

Enable on Vercel

Push your project to a Git provider and deploy to Vercel.
Open your project in the Vercel dashboard → Analytics.
Click Enable for Web Analytics. Deployments will start sending data.
Use Preview deployments to verify before going to Production.

Add it (if you removed it)

If you removed the component and want to re‑enable analytics:

pnpm add @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/next'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

Local development

Analytics primarily targets deployed environments. You can keep the component in development; events are batched and handled by the SDK. For accurate data, test in a Preview or Production deployment.

Optional: Speed Insights

For Core Web Vitals and performance diagnostics, add Vercel Speed Insights:

pnpm add @vercel/speed-insights

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

Troubleshooting

No data: Ensure Analytics is enabled in the Vercel dashboard.
Ad blockers: Some users may block analytics; expect slight undercounting.
Double counting: Include <Analytics /> only once, typically in app/layout.tsx.

Tip: Keep analytics lightweight. For event‑level tracking, consider a dedicated analytics provider. Vercel Analytics focuses on page and performance insights.

Already wired for you

The template includes the analytics component in app/layout.tsx:

// app/layout.tsx import { Analytics } from '@vercel/analytics/next' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <Analytics /> </body> </html> ) }

If you deploy to Vercel and enable Web Analytics for your project, data will start flowing automatically. No keys or ids are needed.

Add it (if you removed it)

If you removed the component and want to re‑enable analytics:

pnpm add @vercel/analytics // app/layout.tsx import { Analytics } from '@vercel/analytics/next' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <Analytics /> </body> </html> ) }

Optional: Speed Insights

For Core Web Vitals and performance diagnostics, add Vercel Speed Insights:

pnpm add @vercel/speed-insights // app/layout.tsx import { SpeedInsights } from '@vercel/speed-insights/next' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body> {children} <SpeedInsights /> </body> </html> ) }

Troubleshooting

No data: Ensure Analytics is enabled in the Vercel dashboard.

Ad blockers: Some users may block analytics; expect slight undercounting.

Double counting: Include <Analytics /> only once, typically in app/layout.tsx.

Tip: Keep analytics lightweight. For event‑level tracking, consider a dedicated analytics provider. Vercel Analytics focuses on page and performance insights.