Next.js Reviewer Skill

Purpose

Reviews Next.js specific patterns: App Router, Server Components, data fetching, and optimizations.

When to Use

• Next.js project code review
• App Router, Server Component mentions
• Next.js optimization requests
• Projects with next.config.js or next.config.mjs

Project Detection

• next.config.js or next.config.mjs
• next dependency in package.json
• app/ directory (App Router)
• pages/ directory (Pages Router)

Workflow

Step 1: Analyze Configuration

**Next.js**: 14.x
**Router**: App Router
**TypeScript**: Enabled

Step 2: Select Review Areas

AskUserQuestion:

"Which areas to review?"
Options:
- Full Next.js pattern check (recommended)
- Server/Client Component separation
- Data fetching patterns
- Image/Font optimization
- Routing and layouts
multiSelect: true

Detection Rules

Server vs Client Components

Check	Recommendation	Severity
Unnecessary 'use client'	Remove if SC possible	MEDIUM
async in Client Component	Move to SC	HIGH
useState/useEffect	Check 'use client' need	INFO

// BAD: Unnecessary 'use client'
'use client'
export default function StaticPage() {
  return <div>Static content</div>
}

// GOOD: Keep as Server Component
export default function StaticPage() {
  return <div>Static content</div>
}

App Router Files

File	Purpose	Check
page.tsx	Route page	Default export
layout.tsx	Layout	children prop
loading.tsx	Loading UI	Suspense alternative
error.tsx	Error handling	'use client' required

Data Fetching

Pattern	Recommendation
SC fetch	Recommended (auto caching)
Route Handler	API endpoints
Client SWR/React Query	Real-time data

// GOOD: Direct fetch in Server Component
async function ProductPage({ params }) {
  const product = await fetch(`/api/products/${params.id}`)
  return <Product data={product} />
}

// WARNING: useEffect fetch in Client
'use client'
function ProductPage({ params }) {
  useEffect(() => { fetch(...) }, [])
  // Recommend: Move to Server Component
}

Image Optimization

Check	Issue	Severity
<img> tag	Use next/image	HIGH
Missing width/height	Layout shift	MEDIUM
Missing priority	LCP image needs it	MEDIUM

Server Actions

Check	Description	Severity
'use server' location	Top of function/file	HIGH
Input validation	Use zod	HIGH
Error handling	try-catch	MEDIUM

Response Template

## Next.js Review Results

**Project**: [name]
**Next.js**: 14.x (App Router)

### Server/Client Components
| Status | File | Issue |
|--------|------|-------|
| WARNING | app/products/page.tsx | Unnecessary 'use client' |

### Data Fetching
| Status | Location | Recommendation |
|--------|----------|----------------|
| WARNING | app/dashboard/page.tsx | Move useEffect fetch to SC |

### Optimization
| Area | Status | Details |
|------|--------|---------|
| Images | WARNING | 3 files using <img> |
| Fonts | OK | Using next/font |

### Actions
1. [ ] Remove 'use client' from `app/products/page.tsx`
2. [ ] Move fetch to Server Component
3. [ ] Use next/image in `components/Banner.tsx`

Best Practices

1. Server First: Keep SC when possible
2. Colocation: Fetch data where needed
3. Streaming: Use loading.tsx and Suspense
4. Caching: Explicit fetch caching strategy
5. Metadata: Use generateMetadata

Integration

• code-reviewer skill
• perf-analyzer skill
• security-scanner skill

Notes

• Based on Next.js 13+ App Router
• Pages Router has different rules
• Review next.config.js settings too