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.

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.