Giới thiệu
Hướng dẫn này giúp bạn viết prompt hiệu quả để Claude Code tạo các tính năng Firestore trong dự án Next.js, bao gồm CRUD, lọc dữ liệu và tìm kiếm.Tất cả ví dụ trong bài dựa trên hệ thống Task Management với các collection
tasks, projects, users và subcollection comments. Thay tên field và collection cho phù hợp với dự án của bạn.Nguyên tắc cơ bản
Để Claude Code tạo tính năng chất lượng cao, prompt cần có:- Phạm vi rõ ràng: Chỉ rõ cái gì, không phải làm thế nào
- Cung cấp ngữ cảnh: Cấu trúc dữ liệu, yêu cầu nghiệp vụ
- Liệt kê chi tiết: Xử lý lỗi, validation, kỳ vọng về kiểu dữ liệu
- Tránh yêu cầu ngoài phạm vi: Không yêu cầu refactor hay tối ưu hoá ngoài scope
Cấu trúc dữ liệu — Task Management
Trước khi viết prompt, cần nắm rõ cấu trúc dữ liệu của hệ thống:Ngữ cảnh dự án Next.js
Khi viết prompt cho dự án Next.js, luôn chỉ rõ:- Vị trí file: Đặt code ở đâu (ví dụ:
services/task-services.ts,components/add-task-modal.tsx) - Loại component: Server component, Client component, hoặc utility module
- Điểm tích hợp: Kết nối với service, component nào đã có
- Kiểu dữ liệu: Tham chiếu
services/types/task-types.tscho các type đã định nghĩa - Xử lý lỗi: Lỗi được xử lý như thế nào (state cho component, throw cho service)
- TypeScript: Luôn chỉ định dùng TypeScript
Cấu trúc thư mục
1. Thao tác CRUD
1.1 Tạo mới (Create)
Ví dụ prompt tốt:1.2 Đọc dữ liệu (Read)
1.3 Cập nhật (Update)
1.4 Xóa (Delete)
2.1 Lọc đơn giản
2.2 Lọc phức tạp (nhiều điều kiện)
Composite index: Firestore yêu cầu tạo composite index khi kết hợp nhiều
where() khác field. Trong prompt, hãy liệt kê rõ các field được filter cùng nhau để Claude Code tạo đúng query và nhậc bạn tạo index.2.3 Phân trang (Pagination)
2.4 Tìm kiếm theo từ khoá (Text Search)
- Nếu không có filter, return tất cả tasks không phải “archived”
2.4 Text Search
Example prompt:Prompt
Firestore không có native full-text search. Các lựa chọn thay thế:
- Client-side filtering (dataset nhỏ)
- Algolia / Typesense (dataset lớn, search nâng cao)
- Firebase Search Extension
2.5 React Hooks (Next.js Client Components)
3. Các pattern tốt cho Firestore Prompt
3.1 Định nghĩa kiểu dữ liệu rõ ràng
3.2 Xử lý lỗi (Error Handling)
3.3 Kiểm tra dữ liệu (Validation)
3.4 Giao dịch nguyên tử (Transactions)
4. Những prompt nên tránh
5. Mẫu prompt (Templates)
Template CRUD
Template CRUD
Template Lọc/Tìm kiếm
Template Search/Filter
6. Danh sách kiểm tra trước khi gửi prompt
Phần Firestore:- Tên collection rõ ràng (bao gồm subcollection nếu dùng
tasks/{id}/comments) - Tên field và kiểu dữ liệu được liệt kê đầy đủ
- Enum field được chỉ rõ giá trị hợp lệ (
status,priority,role) - Quy tắc validation được mô tả
- Cách xử lý lỗi được mô tả
- Kiểu dữ liệu trả về được định nghĩa rõ
- Các trường hợp biên được xem xét
- Vị trí file được chỉ định (
lib/firebase/,app/api/,hooks/) - Loại component rõ ràng (utility, API route, hook, server component, server action)
- Điểm tích hợp được ghi rõ (kết nối với code nào đã có)
- Biến môi trường được tham chiếu đúng (
process.env.NEXT_PUBLIC_*) - TypeScript types được định nghĩa
- Định dạng lỗi trả về phù hợp với quy ước Next.js
- Không có yêu cầu ngoài phạm vi (refactor, tối ưu hoá)
- Prompt 100–300 từ — đủ chi tiết, không quá phức tạp
- Tham chiếu các pattern hiện có trong codebase nếu có
7. Các pattern phổ biến trong Next.js + Firestore
Pattern 1: Utility Function
Dùng khi: Cần logic tái sử dụng, gọi từ nhiều nơi File:lib/firebase/tasks.ts
Prompt cần có: Chữ ký hàm, tham số, kiểu trả về, xử lý lỗi
Pattern 2: API Route
Dùng khi: Cần HTTP endpoint cho client gọi qua mạng File:app/api/tasks/route.ts
Prompt cần có: HTTP method, body/query params, định dạng phản hồi, status codes
Pattern 3: Server Component
Dùng khi: Lấy dữ liệu phía server trong quá trình render trang File:app/tasks/page.tsx
Prompt cần có: Cách dùng server component, mẫu await, xử lý lỗi phía server
Pattern 4: Client Hook
Dùng khi: Cập nhật real-time, tương tác người dùng, gửi form File:hooks/useTasks.ts hoặc hooks/useTask.ts
Prompt cần có: useState, useEffect, cleanup, trạng thái loading/error/success
Pattern 5: Server Action
Dùng khi: Gửi form, thay đổi dữ liệu từ client không cần API route File:app/actions/tasks.ts
Prompt cần có: Chỉ thị 'use server', định nghĩa kiểu, validation, giá trị trả về
Sơ đồ quyết định:
Sơ đồ chọn pattern
8. Ví dụ thực tế
Ví dụ 1: Tạo task có validation
Prompt
Ví dụ 2: Tìm kiếm + Phân trang
Prompt
Ví dụ 3: Hoàn thành task bằng Transaction
Prompt
Ví dụ 4: Subcollection comment
Prompt
Ví dụ 5: Quy trình đầy đủ Next.js
Prompt