Next.js projesini canlıya almak için en pratik yollardan biri Vercel. Git push ile otomatik deploy, global CDN ve preview ortamları sayesinde hem geliştirme hem production sürecini hızlandırır. Bu rehberde Vercel'de yayın sürecini sıfırdan adım adım ele alıyoruz.
Vercel Nedir?
Vercel, Next.js'in geliştiricisi olan ekip tarafından sunulan bir frontend cloud platformudur. Statik siteler, SSR/ISR uygulamaları ve serverless fonksiyonları tek panelden yönetmenizi sağlar.
- Zero-config deploy: Next.js projeleri ek yapılandırma olmadan tanınır.
- Edge Network: İçerik dünya genelinde edge noktalarından sunulur.
- Preview URL'leri: Her branch ve pull request için ayrı test adresi üretilir.
Neden Vercel?
| Özellik | Geleneksel hosting | Vercel |
|---|---|---|
| Kurulum | Manuel sunucu ve nginx yapılandırması | Git bağlantısı ile otomatik |
| SSL | Ayrı sertifika yönetimi | Otomatik HTTPS |
| Ölçekleme | Manuel kapasite planlama | Serverless, talebe göre |
| Next.js uyumu | Ek optimizasyon gerekir | Native destek |
| Preview ortamı | Genelde yok veya ayrı sunucu | Her PR için hazır URL |
Deploy Öncesi Hazırlık
- Projenizin GitHub, GitLab veya Bitbucket üzerinde bir repository'si olsun.
npm run buildkomutunun yerelde hatasız tamamlandığından emin olun.- Veritabanı bağlantısı, API anahtarları gibi gizli değerleri
.envdosyasında tutun; repoya commit etmeyin. DATABASE_URL,NEXTAUTH_SECRET,RESEND_API_KEYgibi production değişkenlerini listeleyin.
Vercel'de Yayın Adımları
1. Hesap ve proje
vercel.com üzerinden kayıt olun, Add New → Project ile Git repository'nizi bağlayın. Vercel framework'ü otomatik algılar.
2. Build ayarları
Varsayılan komutlar çoğu Next.js projesi için yeterlidir: Build Command next build, Output Directory .next. Monorepo değilse değiştirmeniz gerekmez.
3. Ortam değişkenleri
Project Settings → Environment Variables bölümünden Production, Preview ve Development için ayrı ayrı tanımlayın. İlk deploy'dan önce eklemek build hatalarını önler.
4. Deploy
Deploy butonuna bastıktan sonra build loglarını izleyin. Başarılı olunca proje-adi.vercel.app adresinde siteniz yayında olur.
Özel Domain Bağlama
Domain satın aldıysanız Vercel panelinde Settings → Domains bölümüne gidin, alan adınızı ekleyin ve DNS kayıtlarını yönlendirin.
- Apex domain (example.com): Vercel'in verdiği A kaydını kullanın.
- Alt domain (www.example.com): CNAME kaydı ile
cname.vercel-dns.comhedeflenir. - DNS yayılımı birkaç dakika ile 48 saat arasında sürebilir; SSL sertifikası otomatik üretilir.
Pratik ipucu
Domain DNS yönetimini domain sağlayıcınızda tutup yalnızca gerekli A/CNAME kayıtlarını Vercel'e yönlendirmek en yaygın ve güvenli yöntemdir. Nameserver'ları tamamen taşımak zorunlu değildir.
Preview ve Production Ortamları
Her git push sonrası Vercel yeni bir deployment başlatır. main veya master branch production'a gider; diğer branch'ler preview URL alır. Müşteri onayı ve QA testleri için bu adresleri paylaşabilirsiniz.
Production'da sorun çıkarsa Deployments sekmesinden önceki başarılı sürüme Instant Rollback ile dönebilirsiniz.
Sık Karşılaşılan Sorunlar
- Build hatası: Yerelde
npm run buildçalıştırın; TypeScript veya lint hataları Vercel'de de aynı şekilde patlar. - Env değişkeni eksik: Production'da tanımlı olmayan
process.envdeğerleri runtime'da undefined döner. - Prisma / DB bağlantısı: Serverless ortamda connection pool limitlerine dikkat edin; gerekirse connection pooling (ör. PlanetScale, Neon) kullanın.
- Image domain hatası: Harici görseller için
next.configiçindeimages.remotePatternstanımlayın.
Vercel Maliyeti
Hobby plan kişisel ve küçük projeler için ücretsizdir; bandwidth ve build dakikası sınırları vardır. Kurumsal trafik, ekip iş birliği ve SLA ihtiyacı olan projelerde Pro veya Enterprise plan değerlendirilir. Domain ve e-posta gibi hizmetler Vercel dışından ayrıca faturalandırılır.
Profesyonel Deploy Desteği
Vercel kurulumu teknik olarak basit görünse de DNS, ortam değişkenleri, veritabanı bağlantısı ve CI/CD akışının doğru kurgulanması production güvenilirliğini belirler. Veltstack web sitesi paketlerinde Vercel yayınlama desteği sunuyor; domain yönlendirmesi ve ilk production deploy'u sizin adınıza tamamlıyoruz.
Sonuç
Next.js projelerini Vercel'de yayınlamak hızlı, güvenli ve ölçeklenebilir bir yoldur. Git tabanlı workflow, otomatik SSL ve preview ortamları modern web geliştirme sürecinin vazgeçilmez parçalarıdır. Projenizi canlıya alırken destek isterseniz bizimle iletişime geçebilirsiniz.
