Agent skill · software engineering · wsimmonds
nextjs-server-client-components
Guide for choosing between Server Components and Client Components in Next.js App Router. CRITICAL for useSearchParams (requires Suspense + 'use client'), navigation (Link, redirect, useRouter), cookies/headers access, and 'use client' directive. Activates when prompt mentions useSearchParams, Suspense, navigation, routing, Link component, redirect, pathname, searchParams, cookies, headers, async components, or 'use client'. Essential for avoiding mixing server/client APIs.
Why this skill is useful
Provides specific guidance on using Server and Client Components in Next.js, including critical patterns and rules that the AI wouldn't reliably generate on its own.
What it needs
About 10k tokens when loaded. Last updated 2025-10-24. 109 stars on the source repository.
What this skill does
Next.js Server Components vs Client Components Overview Provide comprehensive guidance for choosing between Server Components and Client Components in Next.js App Router, including cookie/header access, searchParams handling, pathname routing, and React's 'use' API for promise unwrapping. TypeScript: NEVER Use any Type CRITICAL RULE: This codebase has @typescript-eslint/no-explicit-any enabled. Using any will cause build failures. ❌ WRONG: ✅ CORRECT: Common Next.js Type Patterns When to Use This Skill Use this skill when: Deciding whether to use Server or Client Components Accessing cookies, headers, or other server-side data Working with searchParams or route parameters Needing pathname or routing information Unwrapping promises with React 'use' API Debugging 'use client' boundary issues Optimizing component rendering strategy Core Decision: Server vs Client Components Default: Server Components All components in the App Router are Server Components by default. No directive needed. When to use Server Components: Fetching data from APIs or databases Accessing backend resources (environment variables, file system) Processing sensitive information (API keys, tokens) Reducing client-side JavaScript bundle SEO-critical content rendering Static or infrequently changing content Benefits: Zero client-side JavaScript by default Direct database/API access Secure handling of secrets Automatic code splitting Better initial page load performance Reduced bundle size Client Components: 'use client' Add 'use client' directive at the top of a file to make it a Client Component. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wsimmonds/nextjs-server-client-components