SDKs

Next.js SDK

Package: @veriq/next

Client component that captures errors, Web Vitals, navigation breadcrumbs, and console calls. Works with App Router and Pages Router.

Install with Claude Code

Paste this prompt into Claude Code. It will install the SDK, configure your app, and add the DSN env var automatically.

Add the @veriq/next SDK to my Next.js project.

Steps:
1. Run: npm install @veriq/next
2. In app/layout.tsx, import VeriqClient from '@veriq/next' and render <VeriqClient dsn={process.env.NEXT_PUBLIC_VERIQ_DSN!} /> inside <body>
3. Add NEXT_PUBLIC_VERIQ_DSN=[YOUR_DSN] to .env.local
4. Optionally add NEXT_PUBLIC_APP_VERSION and NEXT_PUBLIC_ENV env vars
5. Verify by triggering a test error: import { captureException } from '@veriq/next' and call captureException(new Error('test')) from a button click

My DSN: [paste your DSN from Project Settings → API Keys]

Install

bash

npm install @veriq/next

VeriqClient

Add to your root layout inside <body>:

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>
  );
}

Env vars

bash

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

Manual capture

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

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

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

Source maps

bash

npm install -D @veriq/cli

json

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