Next.js Server / Client Boundaries
Verifies the placement of `use client` / `use server` directives, async client components, and server actions used outside server contexts.
The App Router's Server vs Client Component distinction drives most of the framework's performance benefits. Misplacing the boundary (use client at the wrong level, async functions in client components, server actions imported from client components) silently breaks the rendering contract — either crashing at build time or shipping unnecessary JavaScript.
This analysis surfaces every boundary issue so the file role is unambiguous and the rendering pipeline can do its work.
Severity guide
- info
- A boundary pattern is unusual but functional; consider tightening.
- warning
- A directive placement is incorrect or unnecessary; refactor recommended.
- critical
- A boundary violation will cause build failure or runtime crash.
Remediation
Move `use client` to the smallest necessary boundary; remove unnecessary client directives; never await in client components without proper Suspense / hook patterns.
Async client components are not supported — use a Server Component parent that resolves the async data and passes results as props, or use a hook with Suspense. Server actions must be defined in "use server" files or have inline directives; calling them from a client component requires them to be passed in as props or imported from a server file.