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ó:
  1. Phạm vi rõ ràng: Chỉ rõ cái gì, không phải làm thế nào
  2. Cung cấp ngữ cảnh: Cấu trúc dữ liệu, yêu cầu nghiệp vụ
  3. Liệt kê chi tiết: Xử lý lỗi, validation, kỳ vọng về kiểu dữ liệu
  4. 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.ts cho 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 cho Task Management app:
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)

  • Nếu không có filter, return tất cả tasks không phải “archived”
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
Phần Next.js:
  • 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
Tổng quát:
  • 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

Tài liệu liên quan