Monitoring (Recommended)

Track usage, performance, and errors in production.

Effective monitoring helps you understand user behavior, detect issues early, and maintain a reliable product. Each analytics service below is completely independent - you can use any combination or just one service based on your needs.

Vercel Analytics

Why Vercel Analytics?

Zero configuration and privacy‑friendly
Real user monitoring with minimal overhead
Built for Next.js; works seamlessly on Vercel
Fast, lightweight, and no cookie banners required

Who is it for?

Vercel Analytics is ideal for developers who want to deploy on Vercel and need zero-configuration analytics. It's privacy-friendly and requires no cookie banners.

Setup

It's already configured in this starter. To enable it in your app shell, just add the component to your root app/layout.tsx:

app/layout.tsx

import { Analytics } from "@/components/analytics";

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

After deployment: Go to your Vercel dashboard → Project Settings → Analytics tab to enable analytics for your deployed app.

Google Analytics

What you get

Acquisition and traffic source reporting
Engagement metrics and event tracking
Funnels, conversions, and audiences
Integrations with Google Ads and Search Console

Setup

Install the official Next.js integration:
```
npm i @next/third-parties
```
Get your GA Measurement ID:
- Go to Google Analytics and create an account
- Navigate to Admin panel → Property → Data Streams
- Select your website's data stream
- Copy the Measurement ID starting with "G-"
Add your GA Measurement ID to .env:
```
NEXT_PUBLIC_GA_ID="G-XXXXXXXXXX"
```

Load the tag in app/layout.tsx:

app/layout.tsx

import { GoogleAnalytics } from '@next/third-parties/google';
import { siteConfig } from '@/lib/config';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <GoogleAnalytics gaId={siteConfig.analytics.googleAnalyticsId} />
      </body>
    </html>
  );
}

After deployment: Make sure your NEXT_PUBLIC_GA_ID environment variable is set in your production environment (Vercel, Netlify, etc.).

Sentry Error Tracking

What you get

Real-time error monitoring and alerting
Performance monitoring and tracing
Session replay for debugging
Release tracking and deployment insights
Integration with popular development tools

Setup

Create a new project on Sentry:
- Go to sentry.io and sign in or create an account.
- Click Projects in the sidebar, then Create Project.
- Select Next.js as the platform and follow the prompts to create your project.
Run the Sentry wizard:
```
npx @sentry/wizard@latest -i nextjs
```
Answer the wizard questions:
- Continue anyway? → Yes
- Sentry SaaS or self-hosted? → Sentry SaaS (sentry.io)
- Already have a Sentry account? → Yes (or create one)
- Route requests through Next.js server? → Yes (avoids ad blockers)
- Enable Tracing? → Yes (performance tracking)
- Enable Session Replay? → Yes (video-like error reproduction)
- Enable Logs? → Yes (application logs)
- Create example page? → Yes (for testing, remove in production)
- Using CI/CD? → Choose based on your setup
- MCP server configuration? → Optional
The wizard will create several files:
- sentry.server.config.ts - Server-side configuration
- sentry.edge.config.ts - Edge runtime configuration
- src/instrumentation-client.ts - Client-side instrumentation
- src/instrumentation.ts - Server-side instrumentation
- src/app/global-error.tsx - Global error boundary
- src/app/api/sentry-example-api/route.ts - Test API route
- .env.sentry-build-plugin - Build plugin configuration

Move the auth token to your main environment file:

# Move SENTRY_AUTH_TOKEN from .env.sentry-build-plugin to .env.local
# Then delete .env.sentry-build-plugin

Update production settings in sentry.server.config.ts sentry.edge.config.ts instrumentation-client.ts instrumentation.ts:

// Change this line for production:
tracesSampleRate: 0.1, // Recommended for production to reduce cost
// Instead of:
// tracesSampleRate: 1, // Development setting

Test your setup by visiting /sentry-example-page (remove in production)

After deployment: Ensure all Sentry environment variables (SENTRY_AUTH_TOKEN, are configured in your production environment.

Production Checklist

Remove the /sentry-example-page route before deploying
Set tracesSampleRate: 0.1 in production to reduce costs
Delete the .env.sentry-build-plugin file after moving the token
Clean up the next.config.ts file if needed

import { Analytics } from "@/components/analytics";

export default function RootLayout({ children }: { children: React.ReactNode }) {

return (

<body>

{children}

</body>

</html>

);

}

import { GoogleAnalytics } from '@next/third-parties/google';

import { siteConfig } from '@/lib/config';

export default function RootLayout({ children }: { children: React.ReactNode }) {

return (

<body>

{children}

</body>

</html>

);

}

StartKit Pro

Monitoring (Recommended)

Vercel Analytics

Why Vercel Analytics?

Who is it for?

Setup

Google Analytics

What you get

Setup

Sentry Error Tracking

What you get

Setup

Production Checklist

StartKit Pro

Monitoring (Recommended)

Vercel Analytics

Why Vercel Analytics?

Who is it for?

Setup

Google Analytics

What you get

Setup

Sentry Error Tracking

What you get

Setup

Production Checklist