Next.js - Lucent

Fully automated for Next.js App Router. One manual step for Pages Router (wrap <Component>). Both variants scaffold correctly via npx @lucenthq/cli init.

Install with the CLI

npx @lucenthq/cli init luc_pk_...

Pick Next.js when prompted, then choose your router.

App Router

Environment variable

.env.local:

NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...

Provider component

app/providers.tsx:

"use client";

import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <LucentProvider publicKey={process.env.NEXT_PUBLIC_LUCENT_PUBLIC_KEY!}>
      {children}
    </LucentProvider>
  );
}

Wire it into the root layout

app/layout.tsx:

import { Providers } from "./providers";

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

The CLI performs all three steps automatically for App Router.

Pages Router

Environment variable

.env.local:

NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...

Wrap your app

pages/_app.tsx:

import type { AppProps } from "next/app";
import { LucentProvider } from "@lucenthq/sdk/react";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <LucentProvider publicKey={process.env.NEXT_PUBLIC_LUCENT_PUBLIC_KEY!}>
      <Component {...pageProps} />
    </LucentProvider>
  );
}

Manual step required. The CLI adds the import { LucentProvider } line to pages/_app.tsx but leaves the actual <Component> wrapping to you — the exact shape of your App export varies too much to automate safely. Copy the example above after running the CLI.

Notes

LucentProvider must be rendered in a client component. For App Router this means the Providers wrapper file needs "use client" at the top — the rest of your layout tree can stay a server component.
Use NEXT_PUBLIC_ prefix so the key is available to the browser. Never store a key that isn’t prefixed luc_pk_ in a client‑accessible variable.
The provider should sit at the root of your tree and never remount. If you wrap per‑page it will reset the session on every navigation.

​Install with the CLI

​App Router

​Pages Router

​Notes

Install with the CLI

App Router

Pages Router

Notes