Hướng dẫn thiết lập .cursorrules chuẩn cho dự án Next.js và TypeScript

Bối cảnh & Vấn đề khi dùng Cursor với codebase lớn#

Khi sử dụng Cursor AI trên các dự án lớn, nhiều anh em gặp tình trạng AI thường xuyên gợi ý cú pháp cũ (như Pages Router thay vì App Router của Next.js), tự ý import sai thư viện, hoặc sinh code không tuân thủ strict typing của TypeScript.

Nguyên nhân là do context mặc định của LLM không nắm rõ quy chuẩn kiến trúc riêng của team bạn. Giải pháp tối ưu nhất là định nghĩa file .cursorrules ngay tại root repository.

Cấu hình .cursorrules chuẩn thực chiến#

Dưới đây là template .cursorrules mà team mình đang áp dụng cho dự án Next.js 15 + TypeScript + Tailwind CSS:

# Rules for Cursor AI in Next.js 15 Project

1. Tech Stack: Next.js 15 (App Router), React 19, TypeScript strict mode, Tailwind CSS v4.
2. Architecture:
   - Always use Server Components by default. Only add 'use client' when handling client interactivity, hooks (useState, useEffect), or browser APIs.
   - Place shared UI components in `src/components/ui/` and feature-specific components in `src/features/<feature-name>/`.
3. Code Style & Standards:
   - Use named exports instead of default exports for reusable components.
   - Strictly prohibit 'any' type in TypeScript. Always define explicit interfaces or use Zod schemas for runtime validation.
   - Use early return pattern to avoid deeply nested if/else blocks.
4. Data Fetching & State:
   - Fetch data directly in Server Components using native async/await.
   - For client-side mutation, prefer Server Actions or TanStack Query.

Hiệu quả đo lường được sau 3 tuần áp dụng#

• Độ chính xác: Giảm 85% trường hợp AI tự động thêm directive 'use client' bừa bãi.
• Tiết kiệm token & thời gian: Không cần phải gõ lại prompt nhắc nhở "hãy dùng App Router nhé" trong mỗi phiên chat.
• Tính đồng bộ: Toàn bộ thành viên trong team dù dùng Claude 3.7 hay GPT-4o trong Cursor đều cho ra code format nhất quán.

Góc thảo luận#

Anh em đã áp dụng file .cursorrules cho dự án của mình chưa? Ngoài stack Next.js ra, có quy tắc nào anh em thấy bắt buộc phải đưa vào prompt system của IDE không?

Xem thêm nội dung liên quan:

• Từ điển AI: Prompt Engineering là gì?
• Đánh giá chi tiết trình soạn thảo Cursor AI