| name | nextjs-feature-implementation |
| description | null |
Feature Implementation
Category: nextjs · Status: 🟢 Active
When to use
Khi implement một feature Next.js end-to-end trong App Router.
Steps
- Thiết kế route/folder, xác định segment dynamic và layout dùng chung.
- Dựng Server Component fetch data (cache/revalidate), tách phần tương tác ra client.
- Thêm Server Action cho mutation + validate zod + revalidatePath.
- Bổ sung loading.tsx, error.tsx, metadata cho segment.
- Kiểm thử luồng (success/loading/error), dọn type và bundle client.
Template
app/posts/
page.tsx // RSC: list, fetch server
[id]/page.tsx // RSC: detail
new/page.tsx // form -> Server Action
actions.ts // 'use server' create/update
loading.tsx
error.tsx
Example
Good: Server-first, action validate, loading/error/metadata đầy đủ.
Avoid: Làm tất cả ở client, quên error boundary, mutation không revalidate.
Checklist