Nextjs Best Practices

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.