Vercel App Nedir? Next.js Projesini Ücretsiz Yayınlama
Vercel app, Git deposundaki Next.js projesini derleyip bir adreste yayınlayan barındırma hizmetidir. Ücretsiz başlangıçta hesap, depo ve ilk dağıtım yeter.
Vercel app, masaüstüne kurulan ayrı bir mağaza programı değildir. Vercel'in kendisidir: Next.js projesini alan, derleyen ve bir vercel.app adresinde açan hizmet. Platformun ne işe yaradığı Vercel nedir yazısında. Burada ilk yayının sırası var.
Hesap ve depo
Kodu bilgisayarınızda duran bir klasör olarak bırakmayın. GitHub, GitLab veya Bitbucket üzerinde bir depo olsun. package.json içindeki derleme komutu kendi makinenizde çalışsın. Yerelde hata veren proje, Vercel'de de hata verir. Çerçeve Next.js ise Vercel bunu depodan tanır. Tanımazsa framework alanından Next.js'i seçin.
Ücretsiz hobby planı deneme ve kişisel site içindir. Müşteri işi veya şirket projesi açacaksanız planın ticari koşuluna bakın. Koşul değişebilir. Ekrandaki metin, bu yazıdaki cümleden daha günceldir.
İlk dağıtım
Vercel hesabıyla giriş yapın, depoyu içe aktarın, üretim dalını seçin. Çoğu projede bu dal main olur. Kök dizin deponun köküyse olduğu gibi bırakın. Proje bir alt klasördeyse kök dizin alanına o klasörü yazın. Dağıt düğmesinden sonra günlüğü izleyin. Başarılı biten iş size bir vercel.app adresi verir.
Aynı depoya her gönderim yeni bir dağıtım açar. Çekme isteği için ayrı bir önizleme adresi üretilir. Önizleme, üretim adresinin üzerine yazılmaz. Bunu alışkanlık haline getirin. Yarım işi doğrudan üretim dalına göndermeyin.
Ortam değişkeni ve Node
Anahtarlar depoya yazılmaz. Vercel proje ayarında Production, Preview ve Development için ayrı ayrı durur. Yerelde .env dosyasında olan bir değer, sunucuda yoktur. Eksikse sayfa açılır gibi olup veri yerinde boş kalır. Değeri ekledikten sonra yeniden dağıtın. Eski dağıtım yeni değişkeni kendiliğinden görmez.
Node sürümü yereldekinden yeniyse derleme düşebilir. Projede kullandığınız ana sürümü engines alanında belirtin. Belirtmezseniz Vercel kendi varsayılanını kullanır.
Ne zaman CLI
Depo bağlıysa panel yeter. Panel dışı bir deneme için proje klasöründe npx vercel komutu da aynı hizmete gider. İki yolu birden karıştırmayın. Bir proje ya depodan akar ya da elle yüklenir. İkisi birden olursa hangi sürümün yayında olduğu karışır.
HTMX Örnekleri: Form, Arama ve Sekme İçin Kopyala-Yapıştır Kalıplar
Next.js Güvenlik Krizi: 13 Yeni CVE Bize Ne Anlatıyor?
Özel alan adı bu ilk günden şart değildir. vercel.app adresi çalışıyorsa yayın tamamdır. Alan adını DNS kaydı hazır olunca eklersiniz. Site açılmıyorsa önce dağıtım günlüğüne bakın, alan adına değil.
Önizleme ile üretim
Çekme isteği açıldığında Vercel ikinci bir adres üretir. Bu adres üretim sitesini değiştirmez. Metin, görsel ve ortam değişkeni önce orada kontrol edilir. Önizleme değişkeni ile üretim değişkeni ayrı kutulardadır. Önizlemede çalışan bir anahtar, üretimde boş olabilir. İkisini de doldurun.
Üretim dalına birleşen her gönderim yeni bir üretim dağıtımıdır. Eski adres bir süre daha durur. Geri almak, önceki dağıtımı yeniden yükseltmektir. Kodu elle eski hale getirip ikinci bir hata üretmek zorunda değilsiniz. Panelde hangi dağıtımın yayında olduğu yazar. Bakmadan alan adını suçlamayın.
Monorepo ve kök dizin
Depoda birden fazla uygulama varsa Vercel'e hangi klasörün site olduğunu söyleyin. Kök dizin boş kalırsa deponun kökündeki package.json aranır. Site apps/web altındaysa kök dizin bu yol olmalıdır. Yanlış klasör seçilirse derleme başka bir paketin hatasıyla düşer ve günlük yanıltıcı olur.
Derleme komutunu da o klasöre göre bırakın. Kökte çalışan bir komut, alt klasörde eksik bağımlılık arayabilir. Yerelde o klasöre girip aynı komutu çalıştırmak, panelde kaybedilen yarım saati kısaltır.
Günlükte ilk bakılan satır
Günlük uzundur. En alta inin. Module not found, Missing environment variable ve framework sürüm uyumsuzluğu en sık üç sonuçtur. Birincisinde içe aktarılan dosyanın adı veya klasörü yanlıştır. İkincisinde ayardaki değişkenin adı kodla aynı değildir. Büyük küçük harf de sayılır. Üçüncüsünde yereldeki Next.js sürümü ile depodaki kilit dosyası ayrışmıştır. Kilit dosyasını gönderin.
Uyarı satırlarını hata sanmayın. Derleme kırmızıyla bittiyse hata vardır. Sarı uyarıyla biten iş çoğu zaman yayındadır. Adresi açıp sayfayı dolaşmak, günlüğü baştan sona okumaktan daha kesin bir sınavdır.
