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

// 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

Data Fetching

// 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

Server Actions

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