Edge’de yayına alın, kullanıcıda ölçün.
Hız, önizleme ortamları ve küçük bir operasyon yüzeyi, kümeyi sahiplenmekten daha önemli olduğunda Next.js’i Vercel üzerinde barındırıyoruz. Edge fonksiyonları, ISR ve Core Web Vitals bütçeleri, düzgün biçimde.
- Vercel
- Next.js
- TypeScript
- Payload CMS
- PostgreSQL
- Redis
Next.js’in arkasındaki ekibin geliştirdiği platform.
Vercel, Next.js’in arkasındaki ekibin geliştirdiği platformdur ve bu kendini belli eder: sunucu bileşenleri, artımlı statik yeniden üretim, görsel optimizasyonu, edge middleware ve önizleme devreye almaları yapılandırma gerektirmeden çalışır. Bir ürün ekibi için bu, her pull request’in kendi URL’ini alması, her rotanın içeriğin izin verdiği süre kadar önbelleğe alınabilmesi ve ilk baytın tek bir bölge yerine kullanıcıya yakın bir konumdan gelmesi demektir.
Bu özelliklerin doğrudan ürünün kendisi olduğu yüzeylerde kullanıyoruz — pazarlama ve e-ticaret siteleri, müşteri portalları, Next.js ve Payload üzerine kurulu içerik yoğun uygulamalar. Web uygulaması çalışmalarımızda belirlediğimiz performans bütçelerini tutturmak, platform önbelleklemeyi ve CDN’i varsayılan olarak iyi yaptığında daha kolaydır.
Kullanmadığımız durumlar: edge ince bir katmandır, iş mantığınızı çalıştıracağınız yer değildir. Ağır back-end’ler, uzun süren işler, durum tutan servisler ve katı veri yerleşimi kurallarına tabi her şey Kubernetes üzerinde, AWS, Azure ya da Google Cloud içinde çalışır. Vercel onların önünde durur; onların yerini almaz.
Vercel üzerinde yayına aldığımız altı şey.
ISR ile Next.js ön yüzleri
Mümkün olan yerde statik, içerik değiştiğinde talep üzerine yeniden üretilen, gerekli olan yerde sunucuda render edilen — rota bazında, bilinçli olarak kararlaştırılmış, depoda belgelenmiş.
Edge middleware
İstek bir origin’e ulaşmadan önce çalışan coğrafi yönlendirme, dil-bölge tespiti, A/B dağıtımı, bot filtreleme ve kimlik doğrulama kontrolleri.
Pull request başına önizleme ortamları
Her değişiklik; ürün, tasarım ve QA ekiplerinin açabileceği bir URL alır — teknoloji yığınının desteklediği yerlerde arkasında bir veritabanı dalıyla birlikte, böylece önizlemeler canlı ortam verisini paylaşmaz.
E-ticaret ve kampanya yüzeyleri
Ani yük altında Core Web Vitals değerlerini korumak zorunda olan yüksek trafikli lansman sayfaları, perakende kampanya mikro siteleri ve sadakat programı portalları.
Yapay zeka destekli akış arayüzleri
Model yanıtlarını edge veya sunucusuz fonksiyonlar üzerinden akıtan asistan ve arama deneyimleri; modeller LLM çalışmalarımızdan gelir ve hız sınırlı bir API’nin arkasında durur.
Özel bir back-end için ön kapı
Arayüzü Vercel sunar; sunucu aksiyonları ve rota işleyicileri, bulutunuzdaki özel bir API’yi güvenli bir bağlantı üzerinden çağırır — kurumsal portallara uygun bir desen.
Ne zaman tercih edilmeli.
Uygulama Next.js ise ve değer ön yüzdeyse; ekip küçükse ve bir CDN’i, bir derleme çiftliğini ve bir önizleme sistemini kendisi işletmek istemiyorsa; küresel gecikme önemliyse ve tek bölgeli bir origin darboğaz oluşturuyorsa; ve istek başına fiyatlandırma, yerini aldığı platform mühendislerinden ucuzsa Vercel’i tercih edin. Pazarlama siteleri, portallar, çevrim içi mağazalar, panolar ve içerik ürünleri için uygundur.
Veri yerleşimi ya da mevzuat kuralları her baytın belirli bir bölgede veya kendi ağınızda kalmasını gerektiriyorsa başka bir yere bakın — bankacılık ve kamu sektöründe sık görülen, teknoloji yığınının tamamını kendi bulutunuzda barındırdığımız bir kısıt. Ağır hesaplama, uzun süren veya durum tutan iş yükleri için ve kendi yönettiğiniz bir CDN ile Kubernetes’in daha ucuza geldiği, sürekli çok yüksek trafik alan uygulamalar için de başka bir yere bakın. Öneride bulunmadan önce maliyeti her iki senaryo için de modelleriz.
Dil-bölge ve bir özellik bayrağı için edge middleware.
import { geolocation, ipAddress } from '@vercel/functions'
export const config = { matcher: ['/((?!_next|api|assets).*)'] }
export function middleware(req: NextRequest) {
const country = geolocation(req).country ?? 'TR'
const locale = req.cookies.get('locale')?.value ?? (country === 'TR' ? 'tr' : 'en')
// Rewrite, don’t redirect — the URL the user sees stays clean
const url = req.nextUrl.clone()
url.pathname = `/${locale}${url.pathname}`
const res = NextResponse.rewrite(url)
+ res.headers.set('x-variant', bucket(ipAddress(req) ?? '', 'checkout-v2', 0.1))
res.headers.set('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300')
return res
}Özel bir back-end’in önünde Vercel.
Teslim ettiğimiz Vercel kurulumlarında bulunanlar.
- Rota başına Core Web Vitals bütçeleri — LCP, CLS ve INP — her önizlemede Lighthouse CI ile, lansmandan sonra da gerçek kullanıcı izlemesiyle kontrol edilir. Bir gerileme derlemeyi başarısız kılar.
- Yazılı bir önbellekleme stratejisi. Her rota; statik mi, yenileme aralığı olan ISR mı, yoksa dinamik mi olduğunu ve nedenini belirtir. Hiçbir şey kazara önbelleğe alınmaz.
- İnce tutulan edge fonksiyonları. Veritabanı çağrısı yok, kontrolün ihtiyaç duyduğunun ötesinde gizli anahtar yok, tanımlı bir gecikme bütçesi ve bunu kanıtlayan bir test var.
- Ortam disiplini: canlı, önizleme ve geliştirme değişkenleri ayrılır, gizli anahtarlar depoda tutulmaz ve önizleme devreye almaları herkese açık taramaya karşı korunur.
- Güvenlik başlıkları ve CSP
next.configiçinde tanımlanır, CI’da doğrulanır ve zorunlu kılınmadan önce yalnızca raporlama dönemi uygulanır. - Playwright uçtan uca testleri localhost’a değil, her pull request’in önizleme URL’ine karşı çalışır.
- Maliyet görünürlüğü: fonksiyon çağrıları, bant genişliği ve görsel dönüşümleri sizinle belirlenen bir ritimde düzenli olarak izlenir, beklenmedik bir fatura öncesinde uyarı verilir.
- Belgelenmiş bir çıkış yolu. Next.js uygulaması standart bir konteyner olarak da derlenir; böylece kendi bulutunuza taşınmak yeniden yazım anlamına gelmek zorunda değildir.
Kodun yanında genellikle teslim edilenler.
- Rota bazında render ve önbellekleme haritasıyla Next.js uygulaması
- Mümkün olan yerde kod olarak Vercel proje yapılandırması, alan adları, ortamlar ve erişim kontrolleri
- Testleri ve tanımlı bir gecikme bütçesi olan edge middleware
- Lighthouse CI bütçeleri ve gerçek kullanıcı izleme panosu
- Önizleme iş akışı: dal → önizleme URL’i → Playwright test paketi → yükseltme
- Geri alma, önbellek temizleme, olay müdahalesi ve sizinle belirlenen bir ritimde düzenli maliyet incelemesini kapsayan runbook
Sık sorulan sorular
Komşu teknoloji yığınları ve onları kullanan hizmetler.
Ön yüz hızlı, back-end ait olduğu yerde.
Neyi yayına aldığınızı ve önce kimin görmesi gerektiğini bize anlatın. Bir mühendis okur ve nasıl yaklaşacağımızı yazılı olarak iletir.