Guides

Add veriq to a Next.js project in 5 minutes

Full walkthrough: install, configure, verify, upload source maps. Works with the App Router and Pages Router.

Prerequisites

Next.js 13+ (App Router or Pages Router)
A veriq account and project — Project Settings → API Keys has your DSN

1. Install the SDK

bash

npm install @veriq/next

2. Add VeriqClient

VeriqClient is a client component that initialises error tracking, Web Vitals collection, and console breadcrumbs. Place it inside <body> in your root layout so it loads on every page.

tsx

// app/layout.tsx
import { VeriqClient } from '@veriq/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <VeriqClient
          dsn={process.env.NEXT_PUBLIC_VERIQ_DSN!}
          release={process.env.NEXT_PUBLIC_APP_VERSION}
          environment={process.env.NEXT_PUBLIC_ENV}
        />
        {children}
      </body>
    </html>
  );
}

3. Configure env vars

Copy your DSN from Project Settings → API Keys (it starts with pk_).

bash

# .env.local
NEXT_PUBLIC_VERIQ_DSN=pk_...
NEXT_PUBLIC_APP_VERSION=1.0.0
NEXT_PUBLIC_ENV=production

The DSN is a public key — safe to expose in client-side code. Errors are authenticated server-side using a hashed key.

4. Capture errors manually

Unhandled errors are captured automatically. For handled errors and custom messages:

import { captureException, captureMessage } from '@veriq/next';

try {
  await riskyOperation();
} catch (err) {
  captureException(err);
}

captureMessage('Checkout completed', { level: 'info' });

5. Upload source maps (recommended)

Source maps let veriq show your original TypeScript code in stack traces instead of minified output. Install the CLI and add an upload step to your build:

bash

npm install -D @veriq/cli

json

{
  "scripts": {
    "build": "next build && veriq-cli upload-sourcemaps --project proj_xxx --secret sk_..."
  }
}

The secret key (sk_...) is separate from the DSN — keep it in CI environment variables, never in client code.

What's captured automatically

Unhandled JavaScript errors (via window.onerror)
Unhandled promise rejections
Web Vitals — LCP, FID, CLS, FCP, TTFB
console.error and console.warn as breadcrumbs
Route changes as navigation breadcrumbs
User context (if you call setUser())