159 lines
4.1 KiB
Markdown
159 lines
4.1 KiB
Markdown
---
|
|
name: nextjs-reviewer
|
|
description: |
|
|
WHEN: Next.js project review, App Router patterns, Server/Client Component separation, data fetching
|
|
WHAT: Router pattern analysis + SC/CC separation + next/image·font optimization + Server Actions review
|
|
WHEN NOT: General code quality → code-reviewer, Bundle performance → perf-analyzer
|
|
---
|
|
|
|
# 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 |
|
|
|
|
```typescript
|
|
// 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 |
|
|
|
|
```typescript
|
|
// 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
|