nextjs-server-client-components

Use Next.js Server Components by default for data fetching and static rendering, and add the 'use client' directive to Client Components only when you need React hooks or browser APIs. This composition optimizes performance and prevents common anti-patterns.

Access cookies, headers, and searchParams directly as synchronous props within Next.js Server Components. If you need these values in Client Components, pass them down as props or use the client-side useSearchParams hook to avoid server-only API errors.

No, you cannot use React hooks like useState or useEffect in Next.js Server Components because they execute exclusively on the server. You must define a Client Component with the 'use client' directive to utilize state and lifecycle hooks.

Fetch data directly inside Next.js Server Components to execute on the server without blocking the client UI. You can leverage parallel data fetching and the React 'use' API for promise unwrapping to optimize rendering performance.

Your Next.js build fails because interactive components are Client Components that lack server-side execution context. Move server-only API calls to parent Server Components and pass the resolved data down as props to avoid this limitation.