Nextjs Best Practices

1---
2name: nextjs-best-practices
3description: Next.js App Router principles. Server Components, data fetching, routing patterns.
4allowed-tools: Read, Write, Edit, Glob, Grep
5---
6 
7# Next.js Best Practices
8 
9> Principles for Next.js App Router development.
10 
11---
12 
13## 1. Server vs Client Components
14 
15### Decision Tree
16 
17```
18Does it need...?
19│
20├── useState, useEffect, event handlers
21│   └── Client Component ('use client')
22│
23├── Direct data fetching, no interactivity
24│   └── Server Component (default)
25│
26└── Both? 
27    └── Split: Server parent + Client child
28```
29 
30### By Default
31 
32| Type | Use |
33|------|-----|
34| **Server** | Data fetching, layout, static content |
35| **Client** | Forms, buttons, interactive UI |
36 
37---
38 
39## 2. Data Fetching Patterns
40 
41### Fetch Strategy
42 
43| Pattern | Use |
44|---------|-----|
45| **Default** | Static (cached at build) |
46| **Revalidate** | ISR (time-based refresh) |
47| **No-store** | Dynamic (every request) |
48 
49### Data Flow
50 
51| Source | Pattern |
52|--------|---------|
53| Database | Server Component fetch |
54| API | fetch with caching |
55| User input | Client state + server action |
56 
57---
58 
59## 3. Routing Principles
60 
61### File Conventions
62 
63| File | Purpose |
64|------|---------|
65| `page.tsx` | Route UI |
66| `layout.tsx` | Shared layout |
67| `loading.tsx` | Loading state |
68| `error.tsx` | Error boundary |
69| `not-found.tsx` | 404 page |
70 
71### Route Organization
72 
73| Pattern | Use |
74|---------|-----|
75| Route groups `(name)` | Organize without URL |
76| Parallel routes `@slot` | Multiple same-level pages |
77| Intercepting `(.)` | Modal overlays |
78 
79---
80 
81## 4. API Routes
82 
83### Route Handlers
84 
85| Method | Use |
86|--------|-----|
87| GET | Read data |
88| POST | Create data |
89| PUT/PATCH | Update data |
90| DELETE | Remove data |
91 
92### Best Practices
93 
94- Validate input with Zod
95- Return proper status codes
96- Handle errors gracefully
97- Use Edge runtime when possible
98 
99---
100 
101## 5. Performance Principles
102 
103### Image Optimization
104 
105- Use next/image component
106- Set priority for above-fold
107- Provide blur placeholder
108- Use responsive sizes
109 
110### Bundle Optimization
111 
112- Dynamic imports for heavy components
113- Route-based code splitting (automatic)
114- Analyze with bundle analyzer
115 
116---
117 
118## 6. Metadata
119 
120### Static vs Dynamic
121 
122| Type | Use |
123|------|-----|
124| Static export | Fixed metadata |
125| generateMetadata | Dynamic per-route |
126 
127### Essential Tags
128 
129- title (50-60 chars)
130- description (150-160 chars)
131- Open Graph images
132- Canonical URL
133 
134---
135 
136## 7. Caching Strategy
137 
138### Cache Layers
139 
140| Layer | Control |
141|-------|---------|
142| Request | fetch options |
143| Data | revalidate/tags |
144| Full route | route config |
145 
146### Revalidation
147 
148| Method | Use |
149|--------|-----|
150| Time-based | `revalidate: 60` |
151| On-demand | `revalidatePath/Tag` |
152| No cache | `no-store` |
153 
154---
155 
156## 8. Server Actions
157 
158### Use Cases
159 
160- Form submissions
161- Data mutations
162- Revalidation triggers
163 
164### Best Practices
165 
166- Mark with 'use server'
167- Validate all inputs
168- Return typed responses
169- Handle errors
170 
171---
172 
173## 9. Anti-Patterns
174 
175| ❌ Don't | ✅ Do |
176|----------|-------|
177| 'use client' everywhere | Server by default |
178| Fetch in client components | Fetch in server |
179| Skip loading states | Use loading.tsx |
180| Ignore error boundaries | Use error.tsx |
181| Large client bundles | Dynamic imports |
182 
183---
184 
185## 10. Project Structure
186 
187```
188app/
189├── (marketing)/     # Route group
190│   └── page.tsx
191├── (dashboard)/
192│   ├── layout.tsx   # Dashboard layout
193│   └── page.tsx
194├── api/
195│   └── [resource]/
196│       └── route.ts
197└── components/
198    └── ui/
199```
200 
201---
202 
203> **Remember:** Server Components are the default for a reason. Start there, add client only when needed.
204