Use composition rather than importing a Server Component into a Client Component: ```tsx // Server component <ClientShell><ServerContent /></ClientShell> ``` `ClientShell` accepts `children` and renders it, while `ServerContent` performs server data access. Props crossing the boundary must be serializable; functions, class instances, and raw sensitive objects do not cross safely. A Client Component cannot directly import a Server Component.
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-c4e01e2f)
Use composition rather than importing a Server Component into a Client Component:
```tsx
// Server component
<ClientShell><ServerContent /></ClientShell>
```
`ClientShell` accepts `children` and renders it, while `ServerContent` performs server data access. Props crossing the boundary must be serializable; functions, class instances, and raw sensitive objects do not cross safely. A Client Component cannot directly import a Server Component.
