nextjs-client-components

To use the "use client" directive in Next.js, place it at the top of your component file before any imports. This marks the file as a Client Component, enabling client-side rendering, stateful UI, and browser API access.

Build interactive Next.js Client Components with browser APIs by adding the "use client" directive. This allows your component to safely access window, localStorage, and other browser APIs while maintaining stateful UI and effects.

You cannot pass non-serializable props to Next.js Client Components. When composing Client Components with Server Components, you must ensure all props passed from server to client are strictly serializable to prevent rendering errors.

The best way to coordinate Next.js Server and Client Components is by composing them modularly. Keep Server Components for data fetching and pass serializable props to Client Components to handle stateful UI, forms, and animations.

Next.js Client Components throw server-only code errors when they contain backend logic or non-serializable functions. You must strictly avoid server-only code within Client Components and ensure only client-safe interactivity and hook patterns are used.