Skip to main content
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

1

Environment variable

.env.local:
NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
2

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

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

1

Environment variable

.env.local:
NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
2

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.