nextjs-best-practices

Topics in the source

• Next.js Best Practices
• 1. Server vs Client Components
• Decision Tree
• By Default
• 2. Data Fetching Patterns
• Fetch Strategy
• Data Flow
• 3. Routing Principles

Principles for Next.js App Router development. -- | Type | Use | |------|-----| | Server | Data fetching, layout, static content | | Client | Forms, buttons, interactive UI | -- | Pattern | Use | |---------|-----| | Default | Static (cached at build) | | Revalidate | ISR (time-based refresh) | | No-store | Dynamic (every request) | | Source | Pattern | |--------|---------| | Database | Server Component fetch | | API | fetch with caching | | User input | Client state + server action | -- | File | Purpose | |------|---------| | page.tsx | Route UI | | layout.tsx | Shared layout | | loading.tsx | Loading state | | error.tsx | Error boundary | | not-found.tsx | 404 page | | Pattern | Use | |---------|-----| | Route groups (name) | Organize without URL | | Parallel routes @slot | Multiple same-level pages | | Intercepting (.) | Modal overlays | -- | Method | Use | |--------|-----| | GET | Read data | | POST | Create data | | PUT/PATCH | Update data | | DELETE | Remove data | Validate input with Zod Return proper status codes Handle errors gracefully Use Edge runtime when possible -- Use next/image component Set priority for above-fold Provide blur placeholder Use responsive sizes Dynami

This is an excerpt. Refer to the complete source and its current requirements.