Vercel Deployment Rehberi: Kolay ve Hizli Yayinlama

Vercel Nedir?

Vercel, Next.js'in yaraticisi olan ekip tarafindan gelistirilen, frontend uygulamalari ve fullstack web projeleri icin optimize edilmis bir bulut platformudur. Sifir yapilandirma ile Git deposundan otomatik dagitim, global CDN, edge fonksiyonlari, analitik ve performans izleme gibi kapsamli ozellikler sunar.

2026 yilinda Vercel, ozellikle Next.js projeleri icin en dogal ve gucllu dagitim platformu olmaya devam etmektedir. Ancak React, Vue, Svelte, Astro ve diger populer frameworklerle de sorunsuz calisir. Bu rehberde, Vercel uzerinde proje dagitiminin her asamasini detayli sekilde ele alacagiz.

Ilk Dagitim: Git Entegrasyonu

Vercel ile dagitima baslamanin en kolay yolu, Git deponuzu baglamaktir. GitHub, GitLab veya Bitbucket hesabinizi Vercel'e baglayarak her push isleminde otomatik dagitim yapabilirsiniz.

Vercel hesabi olusturun: vercel.com adresinden ucretsiz hesap acin. GitHub hesabinizla giris yapmaniz en pratik yontemdir.
Yeni proje ekleyin: Dashboard'da "Add New Project" butonuna tiklayin.
Git deposunu secin: Baglamak istediginiz depoyu listeden secin. Vercel, projenizi otomatik olarak taniyacaktir.
Framework ayarlarini dogrulayin: Vercel, Next.js projelerini otomatik algilar. Build komutu, cikti dizini ve root dizini gibi ayarlari gozden gecirin.
Ortam degiskenlerini ekleyin: API anahtarlari ve veritabani URL'leri gibi hassas bilgileri bu asamada tanimlayin.
Deploy butonuna tiklayin: Ilk dagitim baslar. Vercel, bagimliliklari yukler, projeyi derler ve global CDN'e dagitir.

Dagitim tamamlandiginda Vercel, projeniz icin otomatik olarak bir .vercel.app alt alan adi atar. Ornegin: proje-adi.vercel.app.

Next.js Proje Yapilandirmasi

Vercel, Next.js ile en derin entegrasyona sahiptir. Next.js'in sunucu bilesenleri, API route'lari, middleware ve ISR (Incremental Static Regeneration) gibi ozellikleri Vercel uzerinde otomatik olarak optimize edilir.

App Router: Next.js'in App Router mimarisi, Vercel uzerinde sunucu ve istemci billesenlerini otomatik olarak ayirir. Sunucu bilesenleri edge veya serverless ortamda calisir.
API Routes: app/api/ dizinindeki dosyalar, Vercel Serverless Functions olarak dagitilir. Her fonksiyon, bagimsiz olarak olceklenir.
Middleware: middleware.ts dosyasi, Vercel Edge Runtime uzerinde calisir. Yonlendirme, kimlik dogrulama ve A/B testleri icin idealdir.
Image Optimization: Next.js Image bileseni, Vercel'in gorsel optimizasyon API'sini kullanarak gorselleri otomatik olarak boyutlandirir ve modern formatlara donusturur.
ISR: Statik sayfalari belirlenen araliklarla yeniden olusturur. Vercel, ISR'i dogal olarak destekler ve on-demand revalidation ile aninda guncelleme saglar.

Ozel Alan Adi (Custom Domain) Yapilandirmasi

Profesyonel bir proje icin kendi alan adinizi Vercel'e baglamaniz gerekir. Surecin adimlari sunlardir:

Alan adini Vercel'e ekleyin: Proje ayarlarindan "Domains" sekmesinde alan adinizi girin.
DNS kayitlarini yapilandiirin: Alan adi saglayicinizda (Cloudflare, GoDaddy vb.) Vercel'in belirttigi DNS kayitlarini ekleyin. A kaydi veya CNAME kaydi gerekir.
SSL sertifikasi: Vercel, Let's Encrypt ile otomatik SSL sertifikasi saglar. DNS yapilandirmasi tamamlandiginda HTTPS otomatik olarak etkinlesir.
Yonlendirmeleri ayarlayin: www'dan apex'e veya tam tersi yonlendirme yapillandirilabilir. Vercel, otomatik yonlendirme kuralları sunar.

Birden fazla alan adi ayni projeye baglanabilir. Ornegin megis.com.tr ve www.megis.com.tr ayni uygulamayi sunabilir.

Ortam Degiskenleri (Environment Variables)

Ortam degiskenleri, API anahtarlari, veritabani baglanti dizeleri ve ucuncu parti servis yapilandirmalari gibi degerlleri guvenli sekilde yonetmenizi saglar. Vercel'de uc ortam icin ayri degiskenler tanimlanabilir:

Production: Ana dal dagitiminda kullanilan degerler.
Preview: Pull request ve dal dagitimlarinda kullanilan degerler. Test API anahtarlari burada tanimlanir.
Development: Yerel gelistirme ortaminda kullanilan degerler. vercel env pull komutuyla yerel .env.local dosyasina aktarilir.

Hassas degiskenler sifrelenerek saklanir. NEXT_PUBLIC_ on eki ile baslayan degiskenler istemci tarafinda erissilebilir; bu on ek olmayan degiskenler yalnizca sunucu tarafinda kullanilabilir. Hassas bilgileri asla NEXT_PUBLIC_ ile istemciye acmayin.

Edge Functions ve Serverless Functions

Vercel, iki farkli sunucu tarafl calisma ortami sunar:

Serverless Functions

Geleneksel sunucu tarafli islemler icin kullanilir. Node.js runtime'inda calisir ve tum Node.js API'lerine erissim saglar. Her fonksiyon bagimsiz olarak olceklenir ve yalnizca calisma suresi boyunca faturaalandirilir. API route'lari varsayilan olarak serverless function olarak dagitilir.

Edge Functions

Kullaniciya en yakin edge lokasyonunda calisir, bu nedenle cok dusuk gecikme suresi sunar. Sinirli bir JavaScript ortaminda calisir (Web API'leri desteklenir, tam Node.js API'si degildir). Middleware, kimlik dogrulama, yonlendirme ve kisisellestirme icin idealdir.

Edge Functions, soguk baslangic suresi neredeyse sifirdir (genellikle 1ms altinda).
Serverless Functions, ilk istekte soguk baslangic yasayabilir (100-500ms).
Karmasik islemler ve veritabani baglantilari icin Serverless Functions tercih edin.
Dusuk gecikmeli, basit mantik gerektiren islemler icin Edge Functions kullanin.

Vercel Analytics ve Izleme

Vercel, uygulamanizin performansini ve kullanici davranislarini izlemek icin yerlesik araclar sunar:

Web Analytics: Sayfa goruntumeleri, benzersiz ziyaretciler, referans kaynaklari ve cografi dagilim gibi temel web analitigii verileri. Gizlilik odakli; cookie kullanmaz.
Speed Insights: Gercek kullanici verilerine dayali Core Web Vitals metrikleri (LCP, INP, CLS). Her sayfa icin ayri performans puanlari ve zaman icindeki degisim grafikleri.
Logs: Serverless ve Edge fonksiyonlarinin calisma zamanli loglarini gercek zamanli olarak izleyin. Hata ayiklama icin kritiktir.
Deployment Protection: On izleme dagitimlarini parola veya Vercel kimlik dogrulama ile koruyun. Harici paydaslarla guvenli sekilde paylasim yapin.

On Izleme Dagitimlaari (Preview Deployments)

Vercel'in en degerli ozelliklerinden biri, her pull request icin otomatik on izleme dagitimi olusturmasiidir. Bu sayede:

Her PR icin benzersiz bir URL olusturulur (ornegin proje-git-feature-kullanici.vercel.app).
Kod incelemesi yapanlar, degisiklikleri canli ortamda gorebilir.
QA ekibi, merge oncesi testleri on izleme ortaminda gerceklestirebilir.
Tasarimcilar ve urun yoneticileri, degisiklikleri dogrudan goruntuleyebilir.
On izleme dagitimlarinda yorum birakma ozelligi ile geri bildirim surreci basitlestirillir.

Performans Optimizasyonu

Vercel uzerinde uygulamanizin performansini en ust duzeye cikarmak icin asagidaki pratikleri uygulayin:

Statik sayfalari tercih edin: Mumkun olan her sayfayi statik olarak uretin. Vercel'in global CDN'i sayesinde kullaniciya en yakin noktadan sunulur.
ISR kullanin: Sik degisen ancak her istekte guncel olmasi gerekmeyen icerikler icin ISR ile periyodik yeniden olusturma yapin.
Edge Middleware ile yonlendirme: Kullanici lokasyonuna veya cihazina gore icerik kisisellestirmesi yapin.
Gorsel optimizasyonunu etkinlestirin: Next.js Image billeseni ile otomatik gorsel optimizasyonu kullannin.
Bundle analizi yapin: @next/bundle-analyzer ile paket boyutlarini inceleyin ve gereksiz bagimliliklari temizleyin.

Vercel CLI Kullanimi

Vercel CLI, komut satirindan proje yonetimi ve dagitim yapmanizi saglar. npm i -g vercel ile yukleyin.

vercel: Projeyi on izleme ortamina dagitir.
vercel --prod: Uretim dagitimi yapar.
vercel env pull: Ortam degiskenlerini yerel .env.local dosyasina indirir.
vercel dev: Vercel ortamini yerel makinenizde simule eder. Serverless fonksiyonlari ve edge middleware'i yerelde test edebilirsiniz.
vercel logs: Canli loglari terminalde goruntular.

Dagitim Kontrol Listesi

Git deposunu Vercel'e baglayin ve framework ayarlarini dogrulayin.
Ortam degiskenlerini tum ortamlar icin (production, preview, development) tanimlayin.
Ozel alan adini baglayin ve SSL sertifikasini dogrulayin.
On izleme dagitimlarini test edin; her PR icin otomatik dagitim calistigindan emin olun.
Web Analytics ve Speed Insights'i etkinlestirin.
Uretim dagitiminda koruma kurallarini yapilandirin.
Edge fonksiyonlari ve serverless fonksiyonlarin loglarini izleyin.
Bundle boyutunu analiz edin ve gereksiz bagimliliklari kaldirin.
Core Web Vitals metriklerini duzenli olarak kontrol edin.
Geri alma planini belirleyin; sorun durumunda bir onceki dagitima hizlica donebileceginiizden emin olun.

Sonuc: Vercel, modern web uygulamalarinin dagitimini son derece basit ve guclu hale getirir. Git entegrasyonu, on izleme dagitimlari, edge fonksiyonlari ve yerlesik analitik ile gelistirme suurecinizi hizlandirir. Next.js projeleri icin dogal bir eslesme sunan Vercel, dogru yapilandirildiginda uygulamanizin performansini ve kullanici deneyimini en ust duzeye cikarir.