Next.js Best Practices

> Principles for Next.js App Router development.

---

1. Server vs Client Components

Decision Tree

Does it need...?
│
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│   └── Server Component (default)
│
└── Both? 
    └── Split: Server parent + Client child

By Default

---

2. Data Fetching Patterns

Fetch Strategy

Data Flow

---

3. Routing Principles

File Conventions

Route Organization

---

4. API Routes

Route Handlers

Best Practices

• -Validate input with Zod
• -Return proper status codes
• -Handle errors gracefully
• -Use Edge runtime when possible

---

5. Performance Principles

Image Optimization

• -Use next/image component
• -Set priority for above-fold
• -Provide blur placeholder
• -Use responsive sizes

Bundle Optimization

• -Dynamic imports for heavy components
• -Route-based code splitting (automatic)
• -Analyze with bundle analyzer

---

6. Metadata

Static vs Dynamic

Essential Tags

• -title (50-60 chars)
• -description (150-160 chars)
• -Open Graph images
• -Canonical URL

---

7. Caching Strategy

Cache Layers

Revalidation

---

8. Server Actions

Use Cases

• -Form submissions
• -Data mutations
• -Revalidation triggers

Best Practices

• -Mark with 'use server'
• -Validate all inputs
• -Return typed responses
• -Handle errors

---

9. Anti-Patterns

---

10. Project Structure

app/
├── (marketing)/     # Route group
│   └── page.tsx
├── (dashboard)/
│   ├── layout.tsx   # Dashboard layout
│   └── page.tsx
├── api/
│   └── [resource]/
│       └── route.ts
└── components/
    └── ui/

---

> Remember: Server Components are the default for a reason. Start there, add client only when needed.

When to Use

This skill is applicable to execute the workflow or actions described in the overview.