Code Review & Quality
Target: Claude 3.7, Cursor, Windsurf, ChatGPT

Next.js App Router & React Server Components Review

Review Next.js 14/15 App Router code for RSC boundaries, data fetching waterfalls, caching, and hydration safety.

ReactNext.jsTypeScriptFrontendServer Components

Interactive Prompt Playground

Customize Template Fields
Live replacement
{{CODE}}
{{NEXT_VERSION}}
{{STATE_STRATEGY}}
{{RENDERING_TARGET}}
Rendered Prompt (Ready to paste)2190 characters
You are a Principal Frontend Architect specializing in React 19, Next.js App Router, and modern web performance.

Conduct an in-depth code review of the following Next.js code:

```tsx
// app/dashboard/page.tsx
'use client';
import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [user, setUser] = useState(null);
  const [metrics, setMetrics] = useState(null);

  useEffect(() => {
    fetch('/api/user').then(res => res.json()).then(setUser);
  }, []);

  useEffect(() => {
    if (user) {
      fetch(`/api/metrics?tenant=${user.tenantId}`).then(res => res.json()).then(setMetrics);
    }
  }, [user]);

  if (!user || !metrics) return <div>Loading...</div>;

  return <div>Welcome {user.name}, Revenue: {metrics.revenue}</div>;
}
```

Context:
- Next.js Version: Next.js 15.1 with React 19
- Data Fetching / State Strategy: Server Components with direct ORM queries
- Rendering Target: Node.js Serverless / Edge Runtime

Examine this code rigorously across these criteria:
1. **Server vs. Client Component Boundaries**:
   - Are 'use client' directives placed at the leaves of the component tree?
   - Is sensitive server code (tokens, private keys, DB queries) isolated from client bundles?
   - Are props passed across the RSC boundary serializable?
2. **Data Fetching & Streaming**:
   - Check for sequential async/await waterfalls. Suggest `Promise.all` or Suspense streaming boundaries.
   - Verify proper use of Next.js fetch cache options (`revalidate`, `tags`, `cache: 'no-store'`).
   - Validate Server Actions for CSRF protection, input validation (Zod), and optimistic UI updates.
3. **Hydration & Web Vitals (INP/LCP/CLS)**:
   - Identify potential hydration mismatches (dates, localStorage, dynamic window access).
   - Check layout shifts caused by un-sized images or delayed font loading.
4. **Clean Code & Type Safety**:
   - Enforce strict TypeScript types, avoiding `any` or loosely typed API responses.

Structure your findings:
- 🔴 **High Priority (RSC Leaks, Waterfalls, Security)**
- 🟡 **Medium Priority (Hydration Risks, Suboptimal Caching)**
- 🟢 **Low Priority & Clean Code Tips**
- 🛠️ **Corrected Code with Explanation**

How to Use This Prompt

  1. Paste your Next.js page, layout, or component tree into the prompt.
  2. Specify your Next.js and React version.
  3. Review the suggested RSC boundary split and streaming recommendations.

Engineering Tips & Best Practices

  • Push 'use client' as far down the component tree as possible so parent layouts remain fast server components.
  • Use React 19 useActionState and useOptimistic for instant UI feedback with Server Actions.

What This Prompt Inspects

Key failure modes, design principles, and quality standards evaluated during execution.

RSC Waterfalls

Detects sequential client-side useEffect fetch chains and moves them to parallel async RSC.

Secret Leakage

Ensures environment variables and DB calls aren't exposed in client JS bundles.

Hydration Stability

Eliminates mismatch bugs caused by browser-only globals during SSR.

Server Action Validation

Enforces schema validation with Zod on mutation endpoints.

Realistic Usage Scenario

Scenario: Converting a client-side useEffect waterfall in a dashboard into an async Server Component with Suspense streaming.

Sample Input Values:

{{NEXT_VERSION}}: Next.js 15.1
{{STATE_STRATEGY}}: Server Components with Suspense
{{RENDERING_TARGET}}: Vercel Edge / Node

SprintKit Workflow Integrations

Complementary interactive tools and workflows across SprintKit to accelerate your engineering process.

Related Prompts

Explore related developer prompts in this workflow domain.

All Prompts

TypeScript Strict Type Safety & Clean Code Review

Audit TypeScript code for type safety, type narrowing, generics, mutation traps, and runtime boundary leaks.

TypeScriptNode.jsClean CodeArchitecture

API Performance Regression & N+1 Query Debugger

Identify slow database queries, serialization bottlenecks, and memory churn in sluggish API endpoints.

PerformanceSQLNode.jsJava+2
4 variablesCustomize prompt