---

name: nextjs-server-client-components

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Server vs Client Components in Next.js App Router. Server is default (async, cookies, headers, searchParams). Client needs 'use client' (hooks, events, browser APIs). allowed-tools: Read, Write, Edit, Glob, Grep, Bash

Next.js Server vs Client Components

Quick Start

Server (default): Async, cookies(), headers(), searchParams prop, redirect(), <Link> Client: 'use client' + hooks, events, browser APIs, useSearchParams() (needs Suspense)

Decision: Need hooks/events? → Client. Need cookies/headers/data fetch? → Server.

Copy// Server Component (default)
export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const q = (await searchParams).q || '';
  return <div>Search: {q}</div>;
}

// Client Component
'use client';
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Reference Files

• server-component-patterns.md - Server component patterns, cookies, headers, searchParams
• client-component-patterns.md - Client component patterns, hooks, events
• use-search-params-suspense.md - useSearchParams with Suspense requirement
• common-patterns.md - Composition, streaming, parallel fetching, React 'use' API
• anti-patterns.md - Common mistakes to avoid
• when-client-appropriate.md - When Client Components are the right choice

Notes

• Server Components NEVER need 'use client' - they're the default
• useSearchParams ALWAYS requires Suspense + 'use client'
• Last verified: 2025-01-11