Next.js App Router Server Components, Client Components, layouts, data fetching, and Server Actions. Use when working with Next.js app directory, component boundaries, or data fetching patterns.
Expert guidance for Next.js App Router: Server vs Client Components, layouts, data fetching, Server Actions, and streaming. Use when working with app directory, component boundaries, or data fetching patterns.
/plugin marketplace add jovermier/cc-stack-marketplace/plugin install cc-nextjs@cc-stack-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Expert guidance for using Next.js Server Components effectively.
| Concept | Pattern | When to Use |
|---|---|---|
| Server Component | Default (no "use client") | Data fetching, heavy computation, no interactivity |
| Client Component | Add "use client" | State, hooks, browser APIs, event handlers |
| Layout | app/layout.tsx | Shared UI across routes |
| Template | app/template.tsx | Shared UI that re-renders on navigation |
| Server Action | async function in Server Component | Form mutations, data updates |
| Parallel Routes | folder@(sidebar) | Independent route segments |
Specify a number or describe your Next.js component scenario.
| Response | Reference to Read |
|---|---|
| 1, "server", "client", "boundary" | component-types.md |
| 2, "data", "fetch", "cache", "revalidate" | data-fetching.md |
| 3, "action", "mutation", "form" | server-actions.md |
| 4, "pattern", "composition", "prop drilling" | patterns.md |
| 5, "suspense", "loading", "streaming" | streaming.md |
Default to Server Components: Only add "use client" when you genuinely need client-side features. This is the single most important Next.js best practice.
Server Components for: Data fetching, database queries, API calls, heavy computation, keeping sensitive tokens safe.
Client Components for: State (useState), effects (useEffect), browser APIs, event handlers, React hooks.
Push Client Components down: Move "use client" as deep in the tree as possible. Keep the root Server Component.
| Issue | Severity | Fix |
|---|---|---|
| Client Component that should be Server | High | Remove "use client", make async |
| Fetching in useEffect | High | Use Server Component or Server Action |
| "use client" at root | Medium | Push down to leaf components |
| Not using async for data fetching | Low | Make Server Component async |
| Prop drilling through Server | Low | Pass to Client child, don't bridge |
// Good: Async Server Component
export default async function UserProfile({ userId }: { userId: string }) {
const user = await fetchUser(userId)
return <div>{user.name}</div>
}
"use client"
import { useState } from 'react'
export function InteractiveButton() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}
// Server Action in Server Component
async function createTodo(formData: FormData) {
'use server'
const title = formData.get('title') as string
await db.todos.create({ title })
}
export default function Page() {
return <form action={createTodo}>...</form>
}
| File | Topics |
|---|---|
| component-types.md | Server vs Client, boundary placement |
| data-fetching.md | Async components, fetch caching, revalidation |
| server-actions.md | Form actions, mutations, revalidation |
| patterns.md | Composition, prop drilling prevention |
| streaming.md | Suspense, loading.tsx, progressive rendering |
Components are correct when:
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.