Widget
Next.js
Add the Lumifeed widget to a Next.js App Router project.
Next.js
Installation
npm install @lumifeed/reactAdd to layout
Add the widget to your root layout so it appears on every page:
// app/layout.tsx
import { LumifeedWidget } from "@lumifeed/react"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<LumifeedWidget apiKey={process.env.NEXT_PUBLIC_LUMIFEED_KEY!} />
</body>
</html>
)
}With auth session
If you're using NextAuth.js v5:
// app/layout.tsx
import { LumifeedWidget } from "@lumifeed/react"
import { auth } from "@/auth"
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const session = await auth()
return (
<html lang="en">
<body>
{children}
<LumifeedWidget
apiKey={process.env.NEXT_PUBLIC_LUMIFEED_KEY!}
user={
session?.user
? {
userId: session.user.id!,
name: session.user.name ?? undefined,
email: session.user.email ?? undefined,
}
: undefined
}
/>
</body>
</html>
)
}Environment variables
Add to your .env.local:
NEXT_PUBLIC_LUMIFEED_KEY=pk_live_your_key_hereNotes
- The widget component is a client component — it renders in the browser only
NEXT_PUBLIC_prefix is required for client-side env vars in Next.js- The widget is lazy-loaded and won't block your page's initial render