Vercel Best Practices: Modern Web Uygulamaları İçin Rehber

## Vercel Nedir ve Modern Web Geliştirmedeki Rolü **Vercel**, modern web geliştirme süreçlerini hızlandıran, özellikle **frontend** odaklı ekipler için tasarlanmış bir bulut platformudur. Geleneksel sunucu yönetiminin karmaşıklığını ortadan kaldırarak geliştiricilerin sadece koda odaklanmasını sağlar. **Serverless** mimarisi üzerine kurulu olan Vercel, **Next.js** framework'ünün yaratıcısı olması sebebiyle bu ekosistemle kusursuz bir uyum sergiler. Modern web uygulamalarında hız, ölçeklenebilirlik ve kullanıcı deneyimi (UX) en kritik faktörlerdir. Vercel, bu ihtiyaçları **Edge Network**, **Global CDN** ve **Automated CI/CD** süreçleriyle karşılar. Bu rehberde, projelerinizi Vercel üzerinde en yüksek verimle nasıl çalıştıracağınızı, maliyetleri nasıl optimize edeceğinizi ve performans darboğazlarını nasıl aşacağınızı detaylandıracağız. ## Vercel Mimarisi: Edge Network ve Serverless Altyapısı Vercel'in gücü, içeriği kullanıcıya en yakın noktadan sunan **Edge Network** yapısında yatar. Geleneksel sunucular tek bir bölgede (region) bulunurken, Vercel veriyi dünya genelindeki yüzlerce noktaya dağıtır. - **Edge Runtime:** Node.js runtime'ına göre çok daha hafif ve hızlıdır. Soğuk başlatma (**Cold Start**) sürelerini neredeyse sıfıra indirir. - **Serverless Functions:** Gerektiğinde çalışan, kullanılmadığında maliyet yaratmayan fonksiyonlardır. Ölçeklendirme otomatik olarak gerçekleşir. | Özellik | Edge Runtime | Node.js Runtime | |---------|--------------|-----------------| | Cold Start | Yok denecek kadar az | Milisaniye/Saniye seviyesinde | | Kütüphane Desteği | Sınırlı (Web API odaklı) | Tam Node.js desteği | | Bölgesel Erişim | Global (Kullanıcıya en yakın) | Belirli bir bölge (Region) | ## Proje Yapılandırması ve vercel.json Kullanımı Vercel projelerinizin davranışını özelleştirmenin en etkili yolu, kök dizinde bulunan `vercel.json` dosyasıdır. Bu dosya ile yönlendirmeler, başlıklar ve çalışma zamanı ayarları yapılandırılır. ```json { "version": 2, "public": true, "cleanUrls": true, "trailingSlash": false, "redirects": [ { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true } ], "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Content-Type-Options", "value": "nosniff" } ] } ] } ``` > **Önemli Not:** `vercel.json` dosyasındaki yapılandırmalar, Next.js projelerinde genellikle `next.config.js` ile yönetilebilir. Ancak framework bağımsız projelerde bu dosya hayati önem taşır. ## Edge Functions ve Middleware ile Dinamik İçerik Yönetimi **Middleware**, bir istek tamamlanmadan önce çalışan kod parçacıklarıdır. Kimlik doğrulama, A/B testleri veya coğrafi yönlendirmeler için idealdir. Edge runtime üzerinde çalıştığı için inanılmaz hızlıdır. ```typescript import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; export function middleware(request: NextRequest) { const country = request.geo?.country || 'US'; if (country === 'TR') { return NextResponse.rewrite(new URL('/tr', request.url)); } return NextResponse.next(); } export const config = { matcher: '/shop/:path*', }; ``` Bu örnekte, kullanıcının coğrafi konumuna göre dinamik bir yönlendirme yapılmaktadır. Bu işlem sunucu tarafında değil, **Edge** üzerinde gerçekleştiği için gecikme (latency) minimumdur. ## Veri Yönetimi: Vercel KV, Postgres ve Blob Vercel artık sadece bir hosting platformu değil, aynı zamanda bir veri çözüm ortağıdır. **Vercel KV** (Redis tabanlı), **Vercel Postgres** ve **Vercel Blob** (Dosya depolama) ile full-stack uygulamalar kolayca geliştirilebilir. ### Vercel KV ile Hızlı Veri Erişimi ```typescript import { kv } from '@vercel/kv'; export async function getProductStock(productId: string) { const stock = await kv.get(`stock:${productId}`); return stock; } ``` ### Vercel Postgres Bağlantısı ```typescript import { sql } from '@vercel/postgres'; export async function getUsers() { const { rows } = await sql`SELECT * FROM users WHERE active = true`; return rows; } ``` ## Incremental Static Regeneration (ISR) ile Optimizasyon **ISR**, statik sayfaların tüm siteyi yeniden derlemeden (rebuild) arka planda güncellenmesini sağlar. Bu, binlerce sayfası olan e-ticaret siteleri için devrim niteliğindedir. ```typescript export async function getStaticProps() { const data = await fetch('https://api.example.com/products'); const products = await data.json(); return { props: { products, }, // Sayfayı her 60 saniyede bir arka planda yenile revalidate: 60, }; } ``` Bu yöntemle hem statik sitenin hızına sahip olursunuz hem de verileriniz her zaman güncel kalır. ## CI/CD Süreçleri ve Preview Deployments Yönetimi Vercel'in en güçlü yanlarından biri **Git** entegrasyonudur. Her **Pull Request (PR)** açıldığında, Vercel size özel bir **Preview URL** oluşturur. - **Production Branch:** Genellikle `main` veya `master` branch'idir. Buraya yapılan push'lar canlı ortamı günceller. - **Preview Deployments:** Her branch için izole bir ortam sağlar. Ekip içi incelemeler için mükemmeldir. - **Instant Rollback:** Bir hata durumunda, önceki başarılı bir deployment'a tek tıkla geri dönebilirsiniz. ## Güvenlik Standartları ve Ortam Değişkenleri Asla API anahtarlarını veya veritabanı şifrelerini kodun içine gömmeyin. Vercel Dashboard üzerindeki **Environment Variables** sekmesini kullanın. ```bash # Vercel CLI ile ortam değişkenlerini çekme vercel env pull .env.local ``` Güvenlik için **Content Security Policy (CSP)** başlıklarını mutlaka yapılandırın: ```json { "key": "Content-Security-Policy", "value": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';" } ``` ## Performans İzleme ve Vercel Analytics **Vercel Web Analytics** ve **Speed Insights**, gerçek kullanıcı verilerini (RUM) toplar. Google'ın **Core Web Vitals** metriklerini (LCP, FID, CLS) takip etmek SEO başarısı için kritiktir. - **LCP (Largest Contentful Paint):** Ana içeriğin yüklenme hızı. - **CLS (Cumulative Layout Shift):** Sayfadaki görsel kaymalar. - **FID (First Input Delay):** Etkileşim hızı. ## Vercel Best Practices: Ölçeklenebilir Mimari Stratejileri 1. **Image Optimization:** `next/image` kullanarak görselleri otomatik olarak WebP formatına dönüştürün ve boyutlandırın. 2. **Monorepo Kullanımı:** Büyük projelerde **Turborepo** ile monorepo yapısına geçerek derleme sürelerini %90 oranında azaltın. 3. **Caching Strategy:** `Cache-Control` başlıklarını doğru yapılandırarak CDN verimliliğini artırın. 4. **Serverless Function Limits:** Fonksiyonlarınızın çalışma süresini (timeout) ve bellek limitlerini ihtiyaca göre optimize edin. ```typescript // Vercel Cron Jobs Örneği (vercel.json) { "crons": [ { "path": "/api/cron/cleanup", "schedule": "0 0 * * *" } ] } ``` ## Sık Yapılan Hatalar ve Kaçınılması Gerekenler - **Gereksiz Client-side Rendering:** SEO ve performans için mümkün olduğunca sunucu tarafında (Server Components) render yapın. - **Büyük Bundle Boyutları:** Kullanılmayan kütüphaneleri temizleyin. `tree-shaking` özelliğinden faydalanın. - **Hatalı Caching:** Dinamik veriler için yanlışlıkla statik cache kullanmak kullanıcıların eski verileri görmesine neden olur. - **Region Uyumsuzluğu:** Veritabanınız AWS Frankfurt'ta ise, Vercel fonksiyonlarınızı da `fra1` bölgesine kurun. Latency (gecikme) süresini düşürün. ## Sık Sorulan Sorular (FAQ) **1. Vercel ücretsiz planı ticari projeler için uygun mu?** Hayır, Vercel'in ücretsiz (Hobby) planı sadece kişisel projeler ve ticari olmayan kullanım içindir. Ticari projeler için Pro plan gereklidir. **2. Soğuk başlatma (Cold Start) sorununu nasıl çözerim?** Edge Runtime kullanarak veya fonksiyonlarınızın boyutunu küçülterek cold start sürelerini minimize edebilirsiniz. **3. Vercel sadece Next.js mi destekliyor?** Hayır; Nuxt, SvelteKit, React, Vue, Angular ve hatta Hugo gibi birçok framework ve statik site oluşturucu ile tam uyumludur. **4. Özel domain eklemek ücretli mi?** Hayır, tüm planlarda sınırsız özel domain ekleyebilir ve otomatik SSL sertifikasından yararlanabilirsiniz. **5. Vercel'de veritabanı barındırabilir miyim?** Evet, Vercel Postgres ve Vercel KV gibi entegre çözümler mevcuttur. Ayrıca harici veritabanlarına (MongoDB, PlanetScale vb.) kolayca bağlanabilirsiniz. ## Özet ve Sonuç Vercel, modern web ekosisteminin en güçlü araçlarından biridir. Doğru yapılandırılmış bir **vercel.json**, optimize edilmiş **Edge Functions** ve stratejik **ISR** kullanımı ile dünya standartlarında performans gösteren uygulamalar geliştirebilirsiniz. Unutmayın, en iyi uygulama her zaman kullanıcıya en yakın ve en hızlı olanıdır.