> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lucenthq.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Next.js
> Install Lucent in a Next.js app. Works with both App Router and Pages Router.
**Fully automated** for Next.js App Router. One manual step for Pages Router
(wrap ``). Both variants scaffold correctly via `npx @lucenthq/cli init`.
## Install with the CLI
```bash theme={null}
npx @lucenthq/cli init luc_pk_...
```
Pick **Next.js** when prompted, then choose your router.
## App Router
`.env.local`:
```bash theme={null}
NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
```
`app/providers.tsx`:
```tsx theme={null}
"use client";
import { LucentProvider } from "@lucenthq/sdk/react";
import type { ReactNode } from "react";
export function Providers({ children }: { children: ReactNode }) {
return (
{children}
);
}
```
`app/layout.tsx`:
```tsx theme={null}
import { Providers } from "./providers";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
The CLI performs all three steps automatically for App Router.
## Pages Router
`.env.local`:
```bash theme={null}
NEXT_PUBLIC_LUCENT_PUBLIC_KEY=luc_pk_...
```
`pages/_app.tsx`:
```tsx theme={null}
import type { AppProps } from "next/app";
import { LucentProvider } from "@lucenthq/sdk/react";
export default function App({ Component, pageProps }: AppProps) {
return (
);
}
```
**Manual step required.** The CLI adds the `import { LucentProvider }` line
to `pages/_app.tsx` but leaves the actual `` 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.