Next.js Setup

Get started with Cluebase in under 2 minutes. No backend setup required.

Install the SDK

Install the cluebase-next package using your preferred package manager.

bash

npm install cluebase-next

Add the Provider

Wrap your application with the CluebaseProvider and add your API key.

That's all you need!

Cluebase automatically sends errors to our hosted backend. No API routes needed.

App Router (Next.js 13+)

app/layout.tsx

import { CluebaseProvider } from 'cluebase-next';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <CluebaseProvider apiKey={process.env.NEXT_PUBLIC_Cluebase_API_KEY ?? ''}>
          {children}
        </CluebaseProvider>
      </body>
    </html>
  );
}

Pages Router

pages/_app.tsx

import { CluebaseProvider } from 'cluebase-next';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <CluebaseProvider apiKey={process.env.NEXT_PUBLIC_Cluebase_API_KEY ?? ''}>
      <Component {...pageProps} />
    </CluebaseProvider>
  );
}

Add Your API Key

Add your API key to .env.local:

.env.local

NEXT_PUBLIC_Cluebase_API_KEY=lum_your_api_key_here

Get your API key from your Cluebase Dashboard.

Test It

Trigger an error to verify everything is working:

tsx

<button onClick={() => { throw new Error('Test Cluebase!') }}>
  Trigger Error
</button>

You're all set!

If you see the Cluebase overlay, errors are being captured and sent to your dashboard.