Keep `'use client'` out of the page/layout and place it at the smallest leaf that needs hooks or browser events. A page can fetch data as an async Server Component and pass serializable props to an interactive button, form, or chart Client Component. Do not move the whole tree to the client just to make one leaf interactive.
Installs into .claude/skills of the current project.
Are you the author of Nextjs Server Components?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/hoangnguyen0403-nextjs-server-components-agent-skills-standard)
Keep `'use client'` out of the page/layout and place it at the smallest leaf that needs hooks or browser events. A page can fetch data as an async Server Component and pass serializable props to an interactive button, form, or chart Client Component. Do not move the whole tree to the client just to make one leaf interactive.