How to decorate a Next.js website

Import the client boundary into a Server Component

Zeenat contains its own client boundary. A Next.js App Router layout can remain a Server Component while it renders a seasonal decoration across every route.

Add the component to a layout

Use the root layout for a site-wide scene or a nested layout for one route group.

import { Zeenat } from "zeenat";

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

Ship indexable content beneath the overlay

Zeenat's decorative client work does not replace server-rendered page content. Keep headings, descriptions and links in Server Components, and let the overlay remain non-semantic.