AI ile Frontend Geliştirme: GitHub Copilot, Cursor ve Vercel v0 Rehberi 2026

Frontend geliştirmenin son iki yılındaki en büyük değişim bir framework veya dil yeniliği değil; kod yazarken yanınızda bir AI asistanın olması. Bugün GitHub Copilot, Cursor IDE ve Vercel v0 aynı rolü farklı biçimlerde oynuyor.

Bu rehberde üç aracı gerçek bir React projesinde, aynı görevlerle test ederek karşılaştırıyoruz.

---

Araçların Genel Profili

Başlamadan önce her aracın DNA’sını anlamak gerekiyor:

Araç	Tür	Güçlü Olduğu Alan	Fiyat (2026)
GitHub Copilot	IDE eklentisi	Satır/blok tamamlama	10$/ay
Cursor	AI-native IDE	Bağlam anlama, ajan modu	20$/ay
Vercel v0	Web arayüzü	UI bileşen üretimi	Freemium

Her biri farklı bir iş akışı için optimize edilmiş. Doğru soruyu sormak: “Hangi araç daha iyi?” değil — “Hangi iş için hangi araç?”

---

GitHub Copilot: Satır Bazlı Akıl

GitHub Copilot, 2021’den bu yana milyonlarca geliştirici tarafından kullanılıyor. Temel mekanizması: yazdığınız kodun bağlamını anlayarak sonraki satırı veya bloğu tahmin ediyor.

Copilot’ın Gerçekten Parladığı Anlar

1. Tekrarlayan bileşenler:

Bir Card bileşeni yazdıktan sonra ProductCard yazmaya başladığınızda Copilot, ilkinin yapısından öğrenerek doğrudan tamamlıyor:

// Card bileşenini zaten yazdınız
// ProductCard yazmaya başlıyorsunuz...

interface ProductCardProps {
  // Copilot buradan devam ediyor:
  id: number;
  name: string;
  price: number;
  imageUrl: string;
  category: string;
  onAddToCart: (id: number) => void;
}

export const ProductCard = ({ id, name, price, imageUrl, category, onAddToCart }: ProductCardProps) => {
  return (
    <div className="rounded-xl border border-gray-200 p-4 hover:shadow-md transition-shadow">
      <img src={imageUrl} alt={name} className="w-full h-48 object-cover rounded-lg" />
      <div className="mt-3">
        <span className="text-xs text-gray-500 uppercase">{category}</span>
        <h3 className="text-lg font-semibold mt-1">{name}</h3>
        <div className="flex items-center justify-between mt-3">
          <span className="text-xl font-bold text-brand-600">{price} ₺</span>
          <button
            onClick={() => onAddToCart(id)}
            className="bg-brand-600 text-white px-4 py-2 rounded-lg text-sm hover:bg-brand-700"
          >
            Sepete Ekle
          </button>
        </div>
      </div>
    </div>
  );
};

Yukarıdaki kodun tamamını Copilot tek seferde önerdi. Tek değişiklik: renk sınıfları.

2. Test yazımı:

// Bileşen dosyasını açık bırakın, test dosyasına geçin
// İlk yorumu yazın:

// ProductCard için comprehensive test suite

// Copilot geri kalanını tamamlıyor:
import { render, screen, fireEvent } from '@testing-library/react';
import { ProductCard } from './ProductCard';

const mockProduct = {
  id: 1,
  name: 'Test Ürünü',
  price: 199,
  imageUrl: '/test.jpg',
  category: 'Elektronik',
  onAddToCart: jest.fn(),
};

describe('ProductCard', () => {
  it('ürün adını doğru gösterir', () => {
    render(<ProductCard {...mockProduct} />);
    expect(screen.getByText('Test Ürünü')).toBeInTheDocument();
  });

  it('fiyatı doğru formatlar', () => {
    render(<ProductCard {...mockProduct} />);
    expect(screen.getByText('199 ₺')).toBeInTheDocument();
  });

  it('sepete ekle butonuna tıklanınca callback çalışır', () => {
    render(<ProductCard {...mockProduct} />);
    fireEvent.click(screen.getByText('Sepete Ekle'));
    expect(mockProduct.onAddToCart).toHaveBeenCalledWith(1);
  });
});

3. Custom hooks:

useLocalStorage, useFetch, useDebounce gibi bilinen hook’ları ismi girer girmez Copilot tamamlıyor. Birkaç saniyede üretkenlik.

Copilot’ın Sınırları

• Dosya sınırı: Sadece açık dosyayı görüyor. Farklı dosyalar arasındaki ilişkileri zayıf anlıyor.
• Mimari kararlar: “Bu sayfayı nasıl organize etmeliyim?” sorusuna tatmin edici yanıt veremiyor.
• Güncel API’ler: Eğitim verisi belirli bir tarihe kadar. Yeni kütüphane sürümleri eksik çıkabiliyor.

---

Cursor IDE: Bağlam Anlayan Geliştirici Ortamı

Cursor, VS Code’un bir fork’u; ama üstüne AI-native bir motor kurulmuş. Farkı tek cümleyle: proje genelinde bağlam anlıyor.

Cursor’ın Süper Güçleri

1. @ ile bağlam enjeksiyonu:

Cursor’ın chat penceresinde @dosyaadi veya @klasor yazarak AI’a spesifik bağlam veriyorsunuz:

Kullanıcı: @src/components/ProductCard.tsx @src/hooks/useCart.ts

Checkout sayfasında bu hook ile bu bileşeni entegre et.
Sepet toplam tutarı göster, ürün adedi değiştirilebilir olsun.

Cursor, iki dosyanın tam içeriğini bağlam olarak kullanarak çalışan bir checkout bileşeni üretiyor.

2. Ajan Modu ile Çoklu Dosya Düzenleme:

Kullanıcı: Projeye ürün favorileme özelliği ekle.
- FavoriteButton bileşeni oluştur
- useFavorites hook'u yaz (localStorage kullan)
- ProductCard'a ekle
- FavoritesPage oluştur

Cursor, 4 dosyayı tek seferde yaratıp veya düzenleyerek görevi tamamlıyor. Sonra diff ekranında değişiklikleri onaylıyorsunuz.

3. Hata Açıklaması:

TypeScript hataları için Ctrl+K → Fix yeterli. Ancak daha önemlisi:

Kullanıcı: Bu hatanın kök nedeni ne?
TypeError: Cannot read properties of undefined (reading 'map')
  at ProductList.tsx:23

Cursor, ProductList.tsx’i açıp useProducts hook’unun async loading state’ini görerek şunu söylüyor:

“products undefined olabilir çünkü istek tamamlanmadan render gerçekleşiyor. useProducts’a loading state ekle ve ProductList’te koşullu render kullan.”

Ve çözümü otomatik uygulayabiliyor.

Cursor’ın Ücret/Değer Dengesi

Cursor Pro (20$/ay) son derece güçlü. Büyük proje üzerinde çalışan bir geliştirici için aylık kazanılan zamana kıyasla değer tartışmasız. Küçük projeler veya öğrenciler için GitHub Copilot daha ekonomik.

---

Vercel v0: Prompttan UI’ya

v0, Vercel’in ürettiği ve tamamen farklı bir niş kaplayan araç: doğal dilden React bileşeni.

v0 Nasıl Çalışır?

v0.dev adresine gidin, istediğiniz UI’ı tarif edin:

Dashboard analytics kartı. Sol tarafta ikon, sağda büyük metrik rakamı,
altında yüzdesel değişim (pozitif/negatif renk). Tailwind kullan.

v0 birkaç saniyede şunu üretiyor:

import { TrendingUp, TrendingDown } from 'lucide-react';
import { cn } from '@/lib/utils';

interface MetricCardProps {
  title: string;
  value: string;
  change: number;
  icon: React.ReactNode;
}

export function MetricCard({ title, value, change, icon }: MetricCardProps) {
  const isPositive = change >= 0;

  return (
    <div className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
      <div className="flex items-center justify-between">
        <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-50">
          {icon}
        </div>
        <span
          className={cn(
            'flex items-center gap-1 text-sm font-medium',
            isPositive ? 'text-emerald-600' : 'text-red-500',
          )}
        >
          {isPositive ? <TrendingUp size={14} /> : <TrendingDown size={14} />}
          {Math.abs(change)}%
        </span>
      </div>
      <p className="mt-4 text-sm text-gray-500">{title}</p>
      <p className="mt-1 text-3xl font-bold text-gray-900">{value}</p>
    </div>
  );
}

Canlı önizleme, dark mode varyasyonu ve doğrudan kod kopyalama ile geliyor.

v0’ın En İyi Olduğu Durumlar

1. Prototipleme — Figma’ya geçmeden fikri doğrulama
2. UI kütüphanesi kurulumu — ShadcnUI bileşenlerini özelleştirme
3. Landing page bölümleri — Hero, testimonial, pricing section
4. Hızlı mockup — Müşteriye göstermek için

v0’ın Yapamadıkları

• İş mantığı (API çağrısı, state management, form validasyonu) üretemiyor
• Mevcut koda entegre olmuyor; bağımsız bileşen üretiyor
• Tasarım sistemine bağlı kalmıyor (marka renkleri, font hiyerarşisi)

---

Üç Aracı Aynı Görevde Test Etmek

Görev: E-ticaret uygulamasına “Son Görüntülenenler” bölümü ekle. useRecentlyViewed hook’u yaz, LocalStorage’a kaydet, ProductCard ile listele.

GitHub Copilot Sonucu

Copilot, açık dosyayı baz alarak useRecentlyViewed hook’unu 2 dakikada tamamladı. Ancak ProductCard entegrasyonu için ProductCard dosyasını açmam gerekti; Copilot bağlamı kendiliğinden görmedi.

Süre: ~8 dakika | Kalite: Çalışıyor, ama birkaç edge case eksik

Cursor Sonucu

Cursor’a şunu yazdım:

“@src/hooks @src/components/ProductCard.tsx ‘Son Görüntülenenler’ özelliği ekle. Hook, kart bileşeni ve sayfa entegrasyonu dahil.”

Cursor 4 dosyayı düzenleyerek bitirdi: hook, sayfa bileşeni, ProductCard’a prop ekleme, tip tanımları.

Süre: ~4 dakika | Kalite: Neredeyse production-ready, ince tip düzeltmesi gerekti

v0 Sonucu

v0’a sadece UI kısmını sordum:

“Son görüntülenen ürünler için yatay kaydırmalı kart listesi. Thumbnail, isim, fiyat. Tailwind.”

UI çıktısı kusursuzdu. Ancak hook mantığını kendim yazmam gerekti.

Süre: ~6 dakika (UI: 1 dakika + hook: 5 dakika) | Kalite: UI mükemmel, mantık manuel

---

İş Akışı Önerisi: Üç Aracı Birlikte Kullan

Bu üç araç rakip değil; tamamlayıcı.

1. v0        → UI tasarımı / bileşen iskeleti
      ↓
2. Cursor    → İş mantığı, entegrasyon, refactor
      ↓
3. Copilot  → Satır tamamlama, test, dokümantasyon

Bu üçlü iş akışı pratikte şöyle görünüyor:

Sabah: v0’da pricing page tasarımı yap — 10 dakika Öğle: Cursor ile fiyatlandırma API’sini entegre et — 30 dakika
İkindi: Copilot ile test dosyasını tamamla — 15 dakika

Toplam: 55 dakika. Geleneksel yaklaşım: 3-4 saat.

---

Hangi Durumda Hangi Araç?

Görev	En İyi Araç	Neden?
Yeni bileşen oluşturma	v0 → Cursor	v0 ile iskelet, Cursor ile mantık
Mevcut kodu refactor etme	Cursor	Dosya bağlamını anlıyor
Test yazma	Copilot	Tekrarlayan test kalıpları için hızlı
Hata ayıklama	Cursor	Stack trace + kod analizi birlikte
Custom hook yazma	Copilot	Satır tamamlama yeterli
Büyük özellik ekleme	Cursor (ajan modu)	Çoklu dosya düzenleme
UI prototipleme	v0	Görsel çıktı anında
Dokümantasyon	Copilot	JSDoc önerisi tek tuşla

---

Sık Yapılan Hatalar

1. AI Çıktısını Kör Kabul Etmek

// AI ürettiği bu kodu gözden geçirmeden commit etmeyin:
useEffect(() => {
  fetchData();
}, []); // fetchData dependency eksik — sonsuz döngü riski

Her AI çıktısını kritik gözle okuyun. Özellikle useEffect bağımlılıkları, async/await hata yönetimi ve tip güvenliği sık hata noktaları.

2. Bağlamsız Prompt Yazmak

Kötü:

“Login formu yaz”

İyi:

“Next.js 15, TypeScript, React Hook Form ve Zod kullanan login formu. Email + şifre, server action ile submit, toast bildirim göster. Mevcut auth pattern’im @src/lib/auth.ts’te.”

Bağlam ne kadar spesifik, çıktı o kadar kullanılabilir.

3. Sadece Bir Araça Kilitlenmek

Cursor Pro alıp Copilot iptal etmek veya tam tersi — ikisini birlikte kullanmak en yüksek verimliliği sağlıyor.

---

Güvenlik Notları

AI ürettiği koda güvenlik açısından dikkat edilmesi gereken alanlar:

• SQL injection — AI bazen string interpolasyonlu sorgu yazabiliyor
• XSS — dangerouslySetInnerHTML kullanımında AI uyarı vermiyor
• Kimlik bilgisi sızması — .env değerlerini istemci koduna koyma hatası
• Rate limiting — API çağrısı içeren kodda AI genellikle rate limit düşünmüyor

Kritik güvenlik kodlarını mutlaka elle inceleyin.

---

Maliyet/Fayda Analizi

Orta düzey bir React geliştiricisi için yıllık hesap:

Araç	Yıllık Maliyet	Kazanılan Süre/Hafta	Saat Değeri
Copilot Individual	100$	~3 saat	+150$/hafta
Cursor Pro	240$	~5 saat	+250$/hafta
v0 Pro	240$	~2 saat	+100$/hafta
Toplam	580$	~10 saat	+500$/hafta

Rakamlar kişiden kişiye değişir. Ancak 580$/yıl için haftada 10 saat kazanmak, saatlik ücreti 15$‘ın üzerinde olan her geliştirici için pozitif ROI.

---

Sonuç: AI Araçları Sizi Değiştirmiyor, Güçlendiriyor

2026’da bu araçlara hâlâ “yapay zeka kodu yazıyor” diye bakmak yanlış çerçeveleme. Daha doğrusu:

Siz mimari kararları veriyorsunuz, AI tekrarlayan uygulamayı yapıyor.

Hangi araçla başlamalısınız?

1. Sıfırdan başlıyorsanız: GitHub Copilot — düşük maliyet, hemen üretkenlik
2. Büyük proje üzerindeyseniz: Cursor — bağlam farkı kritik
3. UI hızı öncelikliyse: v0 + Cursor kombinasyonu

Üç aracı öğrenmek toplam birkaç saat. Kazandırdığı zaman ise ilk haftada kendini amorti ediyor.

---

React ve Qwik karşılaştırması için “Frontend Dünyasında AI Devrimi: React mı, Qwik mi Daha Akıllı?” rehberimizi okuyun.