Claude Code: Hướng Dẫn Setup Và Workflow Cho Next.js Project

Claude Code là AI coding assistant chạy trong terminal, có khả năng đọc toàn bộ codebase, chạy commands, và edit files trực tiếp. Đây là guide setup và workflow mình dùng hàng ngày cho Next.js projects.

Setup ban đầu

Cài đặt Claude Code qua npm:

# Cài đặt global
npm install -g @anthropic-ai/claude-code

# Khởi tạo trong project
cd your-nextjs-project
claude

# Claude sẽ scan codebase và hiểu project structure
# Lần đầu mất khoảng 30s cho project lớn

Cấu hình CLAUDE.md

File quan trọng nhất — nó cho Claude Code hiểu context project của bạn. Tạo file CLAUDE.md ở root:

# My Next.js Project

## Stack
- Next.js 15 (App Router, RSC, Server Actions)
- TypeScript 5, React 19
- Prisma + PostgreSQL
- Tailwind CSS + shadcn/ui

## Rules
- Server Components by default
- "use client" only when needed
- Server Actions for mutations
- All API routes: export const dynamic = "force-dynamic"

## Project Structure
src/app/(blog)/ - Public pages
src/app/(admin)/ - Admin dashboard
src/actions/ - Server actions
src/components/ - Shared components

CLAUDE.md giúp Claude Code generate code đúng conventions của project ngay từ đầu, không cần nhắc đi nhắc lại.

Workflow hàng ngày

1. Morning Review

Mở terminal, chạy claude, hỏi: "Tóm tắt các thay đổi gần đây trong codebase". Claude Code sẽ đọc git log và highlight những changes quan trọng.

2. Feature Development

Thay vì code từ đầu, mình mô tả feature cần làm. Claude Code sẽ tạo file, viết code, và thậm chí chạy TypeScript check. Nếu có lỗi, nó tự fix.

3. Debugging

Copy error message, paste vào Claude Code. Nó sẽ trace through codebase, tìm root cause, và suggest fix. Đây là use case mạnh nhất — Claude Code hiểu context nên fix chính xác hơn Google/Stack Overflow rất nhiều.

4. Code Review

Trước khi commit: "Review các changes hiện tại, check security issues và performance problems". Claude Code đọc git diff và đưa ra feedback chi tiết.

Tips nâng cao

Dùng /compact khi conversation dài — nó tóm tắt context để tiết kiệm tokens.

Multi-step tasks: Chia task lớn thành steps rõ ràng. Claude Code sẽ tạo todo list và thực hiện từng bước.

Hook vào git workflow: Cấu hình hooks để Claude Code tự chạy lint/test trước khi commit.

Kết luận

Claude Code không thay thế IDE, mà bổ sung cho IDE. Mình vẫn dùng VS Code để đọc code và navigate, nhưng khi cần viết code mới, refactor, hay debug — Claude Code nhanh hơn đáng kể. Thử dùng 1 tuần rồi bạn sẽ không muốn quay lại.