Liquid GlassExamples
Liquid GlassExamples
Next.js (App Router)
Using Liquid Glass with Next.js and Server Components.
Next.js (App Router)
Liquid Glass requires access to the DOM and the window object, so it must be used within Client Components.
Setup
1. Global Styles
Import the Liquid Glass CSS in your root layout.tsx or globals.css.
// app/layout.tsx
import '@avenra/liquid-glass/styles';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}2. Client Component Wrapper
Use the 'use client' directive and ensure the library is only initialized on the client side.
'use client';
import { useEffect, useRef } from 'react';
import { createLiquidButton } from '@avenra/liquid-glass';
export default function GlassButton({ label }) {
const btnRef = useRef(null);
useEffect(() => {
// Standard initialization in useEffect
const handle = createLiquidButton(btnRef.current, { label });
return () => handle.destroy();
}, [label]);
return <button ref={btnRef} />;
}Dynamic Imports (SSR: false)
In some cases, especially when using complex components that might trigger SSR errors, you can use Next.js dynamic imports to disable SSR for the component.
import dynamic from 'next/dynamic';
const LiquidButton = dynamic(() => import('./GlassButton'), {
ssr: false,
});
export default function Page() {
return (
<main>
<h1>My Next.js App</h1>
<LiquidButton label="Click Me" />
</main>
);
}