Docs · SDK · Next.js

Install Brevwick in Next.js.

Copy-paste the snippets below. Replace pk_test_demo with the public key from your project — find it under Project settings → Keys.

1. Install

Install the adapter alongside the core SDK.

npm install @tatlacas/brevwick-react @tatlacas/brevwick-sdk modern-screenshot

2. Configure env vars

Wire the project key through your framework’s env convention so it gets inlined into the client bundle at build time.

# Public project key. Inlined at build time by next build — wire it through Dockerfile ARG/ENV + workflow build-args + GH secret.
NEXT_PUBLIC_BREVWICK_PROJECT_KEY=pk_test_demo

3. Wire the SDK

app/providers.tsxTSX

'use client';

import { BrevwickProvider, FeedbackButton } from '@tatlacas/brevwick-react';

const config = {
  projectKey: process.env.NEXT_PUBLIC_BREVWICK_PROJECT_KEY ?? 'pk_test_demo',
};

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <BrevwickProvider config={config}>
      {children}
      <FeedbackButton position="bottom-right" />
    </BrevwickProvider>
  );
}

app/layout.tsxTSX

import { Providers } from './providers';

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

Verify

Run `next dev` and open the app in a browser.
Click the floating feedback button in the bottom-right corner.
Submit a test issue from the dialog.
Confirm the issue lands in /app/issues in the Brevwick dashboard.

Full guide: /docs/sdk/nextjs

Published packages

Browse the registry for version history, source, and download counts.