Next.js App Router

Utilisez Liquidify avec App Router et React Server Components.

Installez le paquet React :

Code

pnpm add @liquidify/react

Feuille de styles globale

Importez la feuille de styles depuis le layout racine :

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

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

Composants clients

Les contrôles interactifs et les fournisseurs Liquidify sont des composants clients. Gardez la page sur le serveur et créez un petit composant client là où commence l’interaction :

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

import { Button } from "@liquidify/react"

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

Code
// 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>
)
}

Chargez les données sur le serveur et transmettez uniquement des valeurs sérialisables au client. Définissez les callbacks et les interactions dans le composant client.