Add Vident to Next.js

Set up frontend monitoring in Next.js with App Router or Pages Router. Captures errors, sessions, and Web Vitals from real users.

Features

Works with App Router and Pages Router
Session replay and error capture
Core Web Vitals from real users

Setup

Install

npm install vident-browser

components/vident-provider.tsx

'use client';

import { useEffect } from 'react';
import { createVidentBrowser } from 'vident-browser';

export function VidentProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    createVidentBrowser({
      apiKey: process.env.NEXT_PUBLIC_VIDENT_API_KEY!,
    });
  }, []);

  return <>{children}</>;
}

app/layout.tsx

import { VidentProvider } from '@/components/vident-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <VidentProvider>{children}</VidentProvider>
      </body>
    </html>
  );
}

Other Frameworks

Add Vident to React

Add Vident to Vue

Add Vident to Angular

Add Vident to Any Website

Start catching errors in minutes

Create your free account and add Vident to your app. Two lines of code, no credit card.

Get started free