Vibe Coding Aplikasi Next.js dengan Cursor IDE

Vibe coding adalah paradigma development yang sedang merevolusi cara engineer membangun software. Konsepnya sederhana: gunakan AI sebagai pair programmer aktif yang menulis kode bersamamu, bukan hanya sebagai autocomplete. Cursor IDE, fork dari VS Code yang dioptimalkan untuk AI-assisted development, menjadi tool pilihan banyak developer untuk praktik ini. Tutorial ini akan membahas cara membangun aplikasi Next.js 15 lengkap dengan fitur autentikasi hanya dalam beberapa jam menggunakan Cursor.

Dokumentasi dan referensi: Cursor IDE Official dan Next.js Documentation.

Langkah 1: Setup Cursor IDE dan Konfigurasi API Key

Download Cursor dari cursor.com. Setelah instalasi, login dengan akun Cursor. Masuk ke Settings > Cursor Settings > Models untuk mengatur model yang digunakan. Untuk development kompleks, rekomendasi menggunakan Claude 3.5 Sonnet atau GPT-4o karena kemampuan reasoning yang superior dalam menangani codebase besar.

# Install Cursor CLI (opsional)
curl -fsSL https://cursor.com/install | bash

Aktifkan fitur Tab untuk AI autocomplete dan Cmd+K (Mac) atau Ctrl+K (Linux/Windows) untuk inline editing. Fitur Composer (Cmd+I) akan menjadi tool utama kita untuk generate file dan fitur baru.

Langkah 2: Inisialisasi Project Next.js 15

Buat project baru menggunakan App Router dan TypeScript. Cursor bekerja paling baik dengan codebase yang strongly typed:

npx create-next-app@latest my-vibe-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd my-vibe-app

Buka project di Cursor. Langkah pertama yang recommended adalah memberikan context kepada AI tentang arsitektur aplikasi yang ingin dibangun. Buat file cursor-rules.mdc di root project:

## Project Context
- Next.js 15 App Router with Server Components
- Authentication using NextAuth.js v5 (Auth.js)
- Database: PostgreSQL with Prisma ORM
- UI: Tailwind CSS + shadcn/ui
- Deployment target: Vercel

Langkah 3: Vibe Coding Fitur Authentication

Buka Composer dengan Cmd+I dan prompt dengan deskripsi fitur yang detail. Cursor akan generate multiple files sekaligus:

Prompt:
"Setup Auth.js v5 dengan credentials provider. Buat schema Prisma untuk User dan Account. Generate halaman login di /login dengan form menggunakan shadcn/ui components. Pastikan menggunakan Server Actions untuk authentication."

Cursor akan otomatis membuat atau mengubah file-file berikut:

- src/auth.ts                 # Auth.js configuration
- src/middleware.ts           # Route protection
- prisma/schema.prisma        # Database schema
- src/app/login/page.tsx      # Login UI
- src/lib/actions.ts          # Server Actions

Review setiap perubahan melalui diff view sebelum menerapkan. Cursor biasanya akan menyarankan command untuk dijalankan, seperti npx prisma migrate dev atau npm install @auth/prisma-adapter.

Langkah 4: Generate UI Components dengan AI

Gunakan inline edit (Cmd+K) untuk generate component spesifik. Misalnya, untuk dashboard:

Prompt:
"Buat dashboard layout dengan sidebar navigation, header dengan user profile dropdown, dan main content area. Gunakan shadcn/ui components: Sheet untuk mobile sidebar, DropdownMenu untuk profile, dan Avatar untuk foto user."

Cursor akan mengimport komponen yang diperlukan dari @/components/ui dan menghasilkan code yang type-safe. Jika project belum memiliki shadcn/ui components, Cursor bisa langsung generate file komponen tersebut atau menyarankan command npx shadcn add sidebar dropdown-menu avatar.

Langkah 5: Debugging dan Refactoring dengan Cursor Chat

Ketika menemukan error, jangan langsung fix manual. Gunakan Cursor Chat (Cmd+L) dengan mode Agent. Copy error message dari terminal dan paste ke chat:

"Error ini muncul saat build: Type error: Property 'user' does not exist on type 'Session | null'. Fix type issue di auth configuration dan semua file yang terkait."

Cursor akan melakukan codebase-wide search untuk menemukan semua instance yang terkait dan mengusulkan perbaikan. Fitur @ codebase context memungkinkan AI memahami seluruh project structure sebelum memberikan solusi. Untuk refactoring besar, gunakan Cmd+Shift+L untuk select all occurrences lalu minta Cursor mengubah pattern tersebut.

Langkah 6: Build dan Deploy ke Vercel

Setelah fitur utama selesai, jalankan build untuk memastikan tidak ada error:

npm run build

Deploy ke Vercel dengan integrasi git:

git push origin main

Vercel akan otomatis trigger deployment. Setelah deploy, verifikasi autentikasi berjalan dengan baik di production environment. Tips tambahan: gunakan fitur .cursorrules untuk mendefinisikan coding standards project, sehingga AI konsisten menghasilkan code yang sesuai dengan style guide tim. Ekosistem vibe coding dengan Cursor bisa mempercepat development cycle hingga 3-5x untuk prototipe dan MVP.