Next.js App Router

Usa Liquidify con App Router y React Server Components.

Instala el paquete React:

Código

pnpm add @liquidify/react

Hoja de estilos global

Importa la hoja de estilos desde el layout raíz:

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

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

Componentes de cliente

Los controles interactivos y proveedores de Liquidify son componentes de cliente. Mantén la página en el servidor y crea un componente de cliente pequeño donde empiece la interacción:

Código
// app/settings/save-button.tsx
"use client"

import { Button } from "@liquidify/react"

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

Código
// 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>
)
}

Carga los datos en el servidor y pasa únicamente valores serializables al cliente. Define los callbacks y la interacción dentro del componente de cliente.