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

Type	Use
Server	Data fetching, layout, static content
Client	Forms, buttons, interactive UI

---

2. Data Fetching Patterns

Fetch Strategy

Pattern	Use
Default	Static (cached at build)
Revalidate	ISR (time-based refresh)
No-store	Dynamic (every request)

Data Flow

Source	Pattern
Database	Server Component fetch
API	fetch with caching
User input	Client state + server action

---

3. Routing Principles

File Conventions

File	Purpose
page.tsx	Route UI
layout.tsx	Shared layout
loading.tsx	Loading state
error.tsx	Error boundary
not-found.tsx	404 page

Route Organization

Pattern	Use
Route groups (name)	Organize without URL
Parallel routes @slot	Multiple same-level pages
Intercepting (.)	Modal overlays

---

4. API Rout