Cursor + Vercel: Combo hoàn hảo để ship feature nhanh gấp 3 lần

Nếu bạn đang làm frontend developer và chưa dùng Cursor kết hợp với Vercel, thì bạn đang bỏ lỡ một workflow cực kỳ mạnh mẽ. Sau 6 tháng dùng combo này hàng ngày, tôi có thể khẳng định: tốc độ ship feature tăng ít nhất 3 lần.

Cursor không chỉ là autocomplete

Nhiều người nghĩ Cursor chỉ là GitHub Copilot nhưng xịn hơn. Thực ra không phải vậy. Cursor có Composer — một chế độ cho phép AI hiểu toàn bộ codebase và viết code trải dài qua nhiều file cùng lúc. Điều này thay đổi hoàn toàn cách bạn làm việc.

Ví dụ thực tế: Tôi cần thêm feature "Export CSV" vào dashboard. Thay vì mở từng file, chỉ cần prompt:

// Cursor Composer prompt:
"Thêm button Export CSV vào bảng UserTable.
Dùng papaparse, download tự động khi click.
Đặt button cạnh search input, style theo Tailwind hiện tại."

Cursor tự tìm component liên quan, tạo utility function, update TypeScript types, và inject button đúng chỗ. Xong trong 2 phút thay vì 30 phút viết tay.

Setup .cursorrules cho dự án Next.js

Bí quyết để Cursor hiểu đúng codebase là file .cursorrules ở root project. Đây là template tôi đang dùng:

# .cursorrules
You are a Senior Next.js developer.

## Stack
- Next.js 14 App Router
- TypeScript strict mode
- Tailwind CSS + shadcn/ui
- Prisma + PostgreSQL
- React Query for data fetching

## Code conventions
- Always use Server Components by default
- Add 'use client' only when truly needed (event handlers, hooks)
- Prefer named exports over default exports
- Use zod for ALL form validation
- Error boundaries required for async components

## Naming
- Components: PascalCase (UserTable, not userTable)
- Hooks: useXxx
- Utils: camelCase
- Types: XxxType or XxxProps

Với file này, Cursor luôn generate code đúng convention của team, không cần giải thích lại mỗi lần prompt.

Kết hợp với Vercel Preview Deployments

Đây là nơi combo thực sự tỏa sáng. Vercel tự động tạo preview deployment cho mỗi pull request. Workflow của tôi hiện tại:

• Viết feature với Cursor Composer (~30 phút thay vì 2 tiếng)
• Push branch, Vercel tự build và tạo preview URL trong vòng 1-2 phút
• Share URL cho designer review ngay, không cần deploy tay
• Merge PR → tự động lên production, zero downtime

Không còn cảnh "máy tao chạy được mà máy mày không chạy". Preview URL là sự thật khách quan cho cả team.

Tính năng Vercel ít người biết: Edge Config

Vercel Edge Config cho phép thay đổi config mà không cần redeploy. Cực kỳ hữu ích cho feature flags:

// lib/flags.ts
import { get } from '@vercel/edge-config';

export async function isFeatureEnabled(flag: string): Promise<boolean> {
  try {
    const value = await get<boolean>(flag);
    return value ?? false;
  } catch {
    return false;
  }
}

// Dùng trong Server Component
const showNewDashboard = await isFeatureEnabled('new-dashboard');
if (showNewDashboard) {
  return <NewDashboard />;
}
return <OldDashboard />;

Bật/tắt feature cho production chỉ cần thay đổi một giá trị trong Vercel dashboard — không cần commit, không cần redeploy.

Kết luận

Cursor giúp bạn viết code nhanh hơn. Vercel giúp bạn ship code nhanh hơn. Cùng nhau, chúng loại bỏ hầu hết friction trong quá trình phát triển frontend. Nếu bạn đang làm solo hoặc team nhỏ, đây là đầu tư tốt nhất cho productivity của mình.