Vercel ile Next.js projeni yayınlamak: adım adım

Next.js ile bir proje yazdıysan onu yayına almanın en kısa yolu Vercel. Next.js'i geliştiren şirketin platformu; depoyu bağladığında framework'ü kendisi tanıyor, her push'ta yeniden yayınlıyor ve her pull request için ayrı bir önizleme adresi açıyor. Bu yazı ücretsiz yayın serimizin Vercel rehberi.

Ne zaman Vercel?

• Next.js, SvelteKit, Nuxt, Astro gibi framework'lerle yazılmış siteler
• Vite ile derlenen React ya da Vue arayüzleri
• Küçük API uçları (serverless fonksiyonlar)

Sürekli açık kalması gereken bir sunucu (WebSocket sunucusu, Discord botu, uzun süren işler) için uygun değil; onlar için serimizdeki Render yazısına bak.

Ücretsiz planın sınırları

Vercel'in belgesine göre ücretsiz Hobby planı yalnızca kişisel ve ticari olmayan kullanım için. Ayda 100 GB veri aktarımı, 1 milyon fonksiyon çağrısı ve 4 saat aktif CPU süresi gibi sınırları var; fonksiyonlar en fazla 300 saniye çalışabiliyor ve günde 100 yayın yapılabiliyor. Bir sınırı aşarsan çoğu durumda planı yükseltmeden 30 gün beklemen gerekiyor. Bir öğrenci projesi ya da portföy için bu sınırlar fazlasıyla yeterli.

Adım adım ilk yayın

1. vercel.com'a GitHub hesabınla kaydol. Böylece depolarına erişim tek adımda veriliyor.
2. Panelde Add New… → Project'i seç.
3. Yayınlamak istediğin depoyu bul ve Import'a bas. Depoyu göremiyorsan Vercel'in GitHub uygulamasına o depoya erişim izni vermen gerekiyor.
4. Vercel framework'ü genelde kendisi tanıyor ve derleme komutunu ve çıktı klasörünü dolduruyor. Proje bir alt klasördeyse (örneğin frontend/) Root Directory'yi ayarla.
5. Gerekli ortam değişkenlerini Environment Variables bölümüne ekle (aşağıya bak).
6. Deploy'a bas. Birkaç dakika içinde proje proje-adi.vercel.app gibi bir adreste yayında.

Ortam değişkenleri

API anahtarlarını ve backend adreslerini koda yazma; proje ayarlarındaki Environment Variables bölümüne ekle. Her değişken için hangi ortamda geçerli olacağını seçebiliyorsun: Production, Preview ve Development.

Next.js'te bir değişkenin tarayıcıda da okunabilmesi için adının NEXT_PUBLIC_ ile başlaması gerekiyor. Bu ön eki yalnızca herkesin görmesinde sakınca olmayan değerler için kullan; gizli anahtarlar ön eksiz kalmalı ve yalnızca sunucu tarafında okunmalı.

Ortam değişkenini değiştirdikten sonra yeni değerin geçerli olması için projeyi yeniden yayınlaman gerekiyor.

Önizleme yayınları

Vercel'in en kullanışlı özelliklerinden biri bu: main dışındaki bir branch'e push ettiğinde ya da bir pull request açtığında, o değişiklik için ayrı bir adres oluşturuluyor ve adres pull request'in altına yorum olarak ekleniyor. Ekip arkadaşların değişikliği birleştirmeden önce tarayıcıda deneyebiliyor. Code review'da arayüz değişikliklerini görmek için çok işe yarıyor.

Kendi alan adın

1. Proje ayarlarında Domains bölümünü aç ve alan adını ekle.
2. Vercel sana DNS'e eklemen gereken kaydı gösteriyor. Alan adını aldığın yerin panelinde bu kaydı ekle.
3. Kayıt doğrulandığında HTTPS sertifikası kendiliğinden kuruluyor.

Sık takılınan yerler

• Derleme bende geçiyor, Vercel'de geçmiyor: Çoğu zaman sebep eksik bir ortam değişkeni ya da farklı bir Node.js sürümü. Derleme kayıtlarındaki ilk hata satırına bak; Node.js sürümünü proje ayarlarından değiştirebilirsin.
• Büyük/küçük harf: Kendi bilgisayarında dosya adlarındaki büyük-küçük harf farkı önemsiz olabilir, Vercel'in derleme ortamında önemli. import Header from "./header" ile dosya adı Header.tsx uyuşmuyorsa derleme düşer.
• Ticari kullanım: Bir müşteri için ya da para kazanan bir iş için Hobby planı kullanılamıyor.

Serinin diğer yazılarında GitHub Pages, Netlify ve Render'ı anlatıyoruz. Takıldığın bir yer olursa re:make her pazar 15.00'te Buca'da buluşuyor; üye olmadan da gelebilirsin. Yeri ve saati burada.