Next.js App Router

Use Liquidify with the Next.js App Router and React Server Components.

Install the React package:

pnpm add @liquidify/react

Root stylesheet

Import the stylesheet from the root layout:

// app/layout.tsx
import "@liquidify/react/styles.css"

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

Client boundary

Liquidify's interactive components and providers are client components. Keep the page server-rendered and introduce a small client boundary where interaction begins:

// app/settings/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

export function SaveButton() {
return <Button onClick={() => console.log("save")}>Save</Button>
}

// app/settings/page.tsx
import { SaveButton } from "./save-button"

export default async function SettingsPage() {
const settings = await loadSettings()
return (
  <main>
    <h1>{settings.title}</h1>
    <SaveButton />
  </main>
)
}

Do not pass functions or other non-serializable values from a Server Component into a client boundary. Fetch on the server, pass serializable data, and handle interaction in the client component.