nextjs-best-practiceslisted

# 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 Routes ### Route Handlers | Method | Use | |--------|-----| | GET | Read data | | POST | Create data |