Los paquetes Liquidify usan ESM. Los controles interactivos y los proveedores de materiales son componentes de cliente. Las páginas, la carga de datos y los layouts pueden permanecer en el servidor.

En Next.js, añade la directiva de cliente al módulo más pequeño que gestione la interacción:

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

import { Button } from "@liquidify/react"

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

Un componente de servidor puede renderizar ese componente y pasarle datos serializables. No pases callbacks, nodos DOM ni otros valores no serializables.

Importa @liquidify/react/styles.css en la entrada global de estilos o en el layout raíz. Mantén los valores controlados iniciales iguales en ambos entornos. Coloca la lógica del navegador en efectos o eventos, no al evaluar el módulo.