nextjs-server-client-components

Resolve Server and Client Component selection in the Next.js App Router.

109|21|Updated Oct 23, 2025

Search Tags:#routing #Suspense #server-components #client-components #searchParams #use-client

Ready to run

npx skills add https://github.com/wsimmonds/claude-nextjs-skills --skill nextjs-server-client-components-wsimmonds

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-server-client-components
Source: https://github.com/wsimmonds/claude-nextjs-skills/tree/main/nextjs-server-client-components
Command: npx skills add https://github.com/wsimmonds/claude-nextjs-skills --skill nextjs-server-client-components-wsimmonds

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Decide whether to implement a page or component as a Server Component (default) or a Client Component (with 'use client'), considering cookies, headers, searchParams, and routing.

Core Features & Use Cases

Server vs Client default: Understand when components render on server vs client.
use client directive: Know when to opt into client-side features.
Advanced patterns: Access cookies/headers, unwrap promises with React 'use' API, and debugging boundaries.

Quick Start

Ask the AI to determine whether a given page should be a Server or Client Component and outline a plan for implementing it.

Frequently Asked Questions about nextjs-server-client-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I decide between Server Components and Client Components in Next.js?▼

Server Components render on the server by default in Next.js App Router, giving you access to databases, APIs, and secrets. Use Client Components (marked with 'use client') only when you need browser features like event listeners, hooks, or state management. Choose Server Components first; add 'use client' only at the boundary where you need interactivity.

When should I use the 'use client' directive in Next.js?▼

Add 'use client' when you need React hooks (useState, useEffect), event handlers, browser APIs, or context. Place it as high as possible in your component tree to minimize Client Component scope. Keep Server Components for data fetching, cookie/header access, and backend logic to maximize performance.

How do I access cookies and headers in Next.js App Router?▼

Access cookies and headers only in Server Components using the 'cookies()' and 'headers()' functions from 'next/headers'. These functions work exclusively on the server and cannot be called in components marked with 'use client'. Fetch this data in Server Components, then pass it as props to Client Components if needed.

Can I access searchParams and routing in Client Components?▼

searchParams are available in Server Components directly. In Client Components, use 'useSearchParams()' and 'useRouter()' hooks from 'next/navigation' to access query parameters and routing. Server Components remain the default choice for pathname-based routing and initial searchParams handling.

How do I unwrap promises in Next.js Server Components with Suspense?▼

Use React's 'use' API with Suspense in Server Components to unwrap promises and handle loading states. Wrap async operations in Suspense boundaries to display fallback UI while data loads. This pattern keeps components readable and integrates streaming responses in the App Router.

What are the limitations when crossing the server-client boundary in Next.js?▼

You cannot pass non-serializable objects (functions, classes, Date objects) from Server to Client Components. Pass only JSON-serializable data as props. Server Components can import Client Components, but not vice versa. Avoid complex object nesting across boundaries; flatten data structures before passing props.