Use AuraGlass in Next.js
Agent-readable Next.js setup for AuraGlass.
#Agent Root Layout Setup
In Next.js App Router, the stylesheet belongs in `app/layout.tsx`. Agents should make that change first and should report the exact file. If the app already has a global CSS import, keep it and add AuraGlass alongside it.
Do not mark the entire root layout as a client component just because one AuraGlass component is interactive. Keep the layout server-rendered and create a focused client component for the interactive surface.
// app/layout.tsx
import type { ReactNode } from 'react';
import 'aura-glass/styles';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}#Client Islands
Use `use client` for command palettes, drawers, modals, uploaders, visualizers, media controls, tabs with local state, and realtime collaboration. Keep data fetching in the page or server component and pass serializable props into the client island.
For heavy visual features, dynamic import the client island and render a stable fallback. This avoids SSR errors and keeps static routes fast.
'use client';
import { GlassCommandPalette, GlassCard } from 'aura-glass';
export function CommandIsland() {
return (
<GlassCard>
<GlassCommandPalette open contained positionStrategy="inline" />
</GlassCard>
);
}#Review Checklist
After an agent edits a Next.js app, check that no package internals were imported, no private website paths were copied, the stylesheet is loaded once, and optional peers match the components used.
Run the build and open the route. A typecheck can pass while a portal, fixed control, media feature, or CSS import fails visually.