Compatible with Cursor, Claude Code, Cline, Roo Code, Antigravity

Next.js App Router & React Server Components Review

Inspect Next.js App Router code for RSC boundaries, data fetching waterfalls, caching, and hydration safety.

ReactNext.jsTypeScriptFrontendServer Components

v1.1.0 · Updated 2026-08

Skill Objective

Audit React Server Components (RSC) and Client Components in Next.js 14/15 for data fetching waterfalls, secret leaks, serialization boundary errors, and hydration mismatches.

Execution Workflow Procedure

Ordered steps the coding agent executes when performing this skill.

Evaluate Component Tree Boundaries

Locate 'use client' directives. Ensure they are placed at the leaves of the component tree and verify no server secrets or direct database connections are leaked across client boundaries.

Detect Sequential Data Fetching Waterfalls

Audit async Server Components for sequential await chains. Refactor independent queries into Promise.all or stream them with Suspense boundaries.

Audit Server Actions & Mutations

Verify that Server Actions validate inputs with Zod, authenticate the active session, handle errors gracefully, and update UI optimistically.

Check Hydration Stability & Web Vitals

Eliminate browser-only window/localStorage references in initial SSR renders that trigger React hydration mismatch errors.

Agent Safety Guardrails & Anti-Hallucination Rules

DO NOT convert Server Components to Client Components just to use state; push client interactivity down to dedicated leaf widgets.
DO NOT pass non-serializable objects (functions, class instances) across the RSC boundary.

Expected Output Format

Structured analysis of component boundaries and data fetching efficiency.

🔴 Critical (Security Leaks & Waterfalls): Leaked tokens or blocking sequential queries.

🟡 Warnings (Hydration & Caching): Hydration mismatch risks or unoptimized fetch caches.

🛠️ Refactored Component Tree: Clean async Server Component and leaf Client Component code.

Domain Verification Checks

RSC Boundary Containment: Verifies database and secrets remain strictly on the server.

Parallel Streaming: Eliminates async waterfalls using Suspense streaming.

Server Action Validation: Validates all mutation inputs with Zod schemas.

Example Agent Invocations

"Audit this Next.js dashboard page to remove client-side useEffect waterfalls."

"Review this Server Action mutation for authentication and schema validation."

Install / Configure This Skill

# Place in .cursorrules or create .cursor/rules/nextjs-app-router-code-review.mdc
# Trigger: Whenever you perform next.js app router & react server components review

---
name: nextjs-app-router-code-review
description: Audit Next.js App Router code for React Server Components boundaries, streaming, hydration safety, and Server Actions security.
version: 1.1.0
compatibility: [Cursor, Claude Code, Cline, Roo Code, Antigravity]
---

# Next.js App Router & React Server Components Review

## Objective
Audit Next.js App Router codebases to eliminate data fetching waterfalls, secure Server Actions, optimize caching, and prevent SSR hydration errors.

## Workflow
1. **Component Boundary Analysis**:
   - Verify that `'use client'` is restricted to leaf interactive components.
   - Ensure environment secrets and server utilities are never imported into client bundles.

2. **Data Fetching & Streaming**:
   - Replace sequential `await` calls with `Promise.all` or React Suspense streaming.
   - Verify proper fetch cache strategies (`revalidate`, `tags`, `no-store`).

3. **Server Actions Security**:
   - Verify session authorization inside each Server Action.
   - Enforce schema validation (Zod/Valibot) on all input payloads.

4. **Hydration & Web Vitals**:
   - Check for browser-only globals during SSR to eliminate hydration errors.

Complementary Agent Prompt

Need a quick one-time prompt for chat?

Try the Next.js App Router & React Server Components Review — a lightweight version designed for 1-click copying directly into Claude, ChatGPT, or Cursor chat.

View Prompt