nextjs-server-client-components

Guide Server vs Client Component decisions in Next.js App Router.

5|Updated Dec 22, 2025

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

One-click install

npx skills add https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus --skill nextjs-server-client-components-muhammedsuhaib

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: nextjs-server-client-components
Source: https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus/tree/main/Skill+SubAgents/skills/claude-nextjs-skills/nextjs-server-client-components
Command: npx skills add https://github.com/MuhammedSuhaib/LevelUpSpeckit-Plus --skill nextjs-server-client-components-muhammedsuhaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps decide when to use Server Components vs Client Components in Next.js App Router, focusing on useSearchParams, Suspense, cookies/headers, and the 'use client' boundary.

Core Features & Use Cases

Server vs Client decisions: Guidance on data fetching and interactivity tradeoffs.
useSearchParams & Suspense: Patterns requiring client components.
MCP and cookies/headers: How to access server context safely.

Quick Start

Default to Server Components; move interactivity to targeted Client Components.
When needed, annotate the minimal component with 'use client'.
Use React's use() for server-provided promises where applicable.