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.
Interactive Prompt Playground
{{CODE}}{{NEXT_VERSION}}{{STATE_STRATEGY}}{{RENDERING_TARGET}}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
- Paste your Next.js page, layout, or component tree into the prompt.
- Specify your Next.js and React version.
- 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:
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.
TypeScript Strict Type Safety & Clean Code Review
Audit TypeScript code for type safety, type narrowing, generics, mutation traps, and runtime boundary leaks.
API Performance Regression & N+1 Query Debugger
Identify slow database queries, serialization bottlenecks, and memory churn in sluggish API endpoints.