Vercel Rehberi: Modern Web Dağıtımı ve Veritabanı Çözümleri
Yazar: Burak Balkı | Kategori: Database | Okuma Süresi: 10 dk
Vercel'in sunduğu Postgres, KV ve Blob gibi modern veritabanı çözümlerini, deployment stratejilerini ve performans optimizasyon tekniklerini içeren kapsamlı ...
## Vercel Nedir? Modern Web Geliştirme Ekosistemi
**Vercel**, frontend geliştiriciler için optimize edilmiş, bulut tabanlı bir dağıtım (deployment) ve barındırma platformudur. Özellikle **Next.js** framework'ünün yaratıcısı olan ekip tarafından geliştirilen Vercel, sadece statik site barındırma değil, aynı zamanda **Serverless Functions**, **Edge Network** ve son dönemde eklenen **Vercel Storage** (Postgres, KV, Blob) çözümleriyle tam kapsamlı bir uygulama platformuna dönüşmüştür.
Bu rehberde, Vercel'in sunduğu veritabanı çözümlerine, performans optimizasyonlarına ve modern mimari yapılarına odaklanarak, projelerinizi nasıl ölçeklendirebileceğinizi inceleyeceğiz.
## Vercel Storage: Sunucusuz Veritabanı Mimarisi
Vercel, geleneksel veritabanı yönetiminin karmaşıklığını ortadan kaldırmak için "Storage" başlığı altında üç ana ürün sunar. Bu ürünler, altyapı yönetimi gerektirmeden, doğrudan kod içerisinden erişilebilen ölçeklenebilir çözümlerdir.
| Hizmet | Teknoloji | Kullanım Durumu |
| :--- | :--- | :--- |
| **Vercel Postgres** | PostgreSQL (Neon) | İlişkisel veriler, karmaşık sorgular |
| **Vercel KV** | Redis (Upstash) | Cache, session yönetimi, sayaçlar |
| **Vercel Blob** | S3-compatible | Görsel, video ve dosya depolama |
| **Edge Config** | Global Store | Feature flags, yönlendirme kuralları |
## Vercel CLI Kurulumu ve Proje Başlatma
Vercel ekosistemine dahil olmanın en profesyonel yolu komut satırı arayüzünü (CLI) kullanmaktır. Bu araç, yerel geliştirme ortamı ile bulut ortamını senkronize eder.
```bash
# Vercel CLI kurulumu
npm i -g vercel
# Giriş yapma
vercel login
# Projeyi başlatma ve deploy etme
vercel
```
## Vercel Postgres ile İlişkisel Veritabanı Yönetimi
**Vercel Postgres**, sunucusuz (serverless) bir PostgreSQL çözümüdür. SQL tabanlı verilerinizi yönetmek için `@vercel/postgres` paketini kullanarak hızlıca entegre olabilirsiniz. Bu yapı, otomatik ölçeklenme ve düşük gecikme süresi sunar.
### Örnek: Veritabanı Bağlantısı ve Sorgu Çalıştırma
```typescript
import { sql } from '@vercel/postgres';
export default async function handler(request, response) {
try {
// Tablo oluşturma veya veri çekme işlemi
const result = await sql`SELECT * FROM users WHERE id = ${request.query.id}`;
return response.status(200).json({ data: result.rows });
} catch (error) {
return response.status(500).json({ error: error.message });
}
}
```
## Vercel KV (Key-Value) ile Hızlı Veri Erişimi
**Vercel KV**, Redis tabanlı bir anahtar-değer deposudur. Özellikle yüksek hız gerektiren caching (önbellekleme) ve session (oturum) yönetimi işlemlerinde tercih edilir. Dayanıklılığı ve global erişilebilirliği ile öne çıkar.
### Örnek: Redis Üzerinde Sayaç Uygulaması
```typescript
import { kv } from '@vercel/kv';
export async function GET() {
// Sayfa görüntüleme sayısını artır
const pageViews = await kv.incr('page_views');
return new Response(JSON.stringify({ views: pageViews }), {
headers: { 'content-type': 'application/json' },
});
}
```
## Vercel Blob ile Dosya ve Medya Yönetimi
Geleneksel dosya yükleme süreçleri genellikle karmaşık S3 yapılandırmaları gerektirir. **Vercel Blob**, doğrudan API üzerinden dosya yüklemenize olanak tanır. Özellikle kullanıcı profil resimleri veya doküman yüklemeleri için idealdir.
### Örnek: Sunucu Tarafında Dosya Yükleme
```typescript
import { put } from '@vercel/blob';
export async function POST(request: Request) {
const { searchParams } = new URL(request.url);
const filename = searchParams.get('filename');
const blob = await put(filename, request.body, {
access: 'public',
});
return Response.json(blob);
}
```
## Edge Functions ve Middleware Kullanımı
**Edge Functions**, kodunuzun kullanıcıya en yakın coğrafi konumda çalışmasını sağlar. Bu, milisaniyeler düzeyinde yanıt süresi (latency) avantajı sunar. Middleware yapısı ile istekleri henüz sunucuya ulaşmadan manipüle edebilirsiniz.
### Örnek: Edge Middleware ile Coğrafi Kısıtlama
```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 === 'CN') {
return new NextResponse('Access Denied', { status: 403 });
}
return NextResponse.next();
}
```
## Serverless Functions ve API Rotaları
Vercel, `api/` dizini altındaki dosyaları otomatik olarak **AWS Lambda** üzerinde çalışan serverless fonksiyonlara dönüştürür. Bu sayede sunucu yönetimi yapmadan backend mantığı geliştirebilirsiniz.
### Örnek: Standart API Rotası
```javascript
export default function handler(req, res) {
const { method } = req;
switch (method) {
case 'GET':
res.status(200).json({ message: 'Başarılı' });
break;
default:
res.setHeader('Allow', ['GET']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
```
## vercel.json Yapılandırması
Projenizin davranışını özelleştirmek için kök dizinde bir `vercel.json` dosyası kullanabilirsiniz. Bu dosya; yönlendirmeler, header ayarları ve cron job tanımlamaları için kullanılır.
```json
{
"rewrites": [
{ "source": "/eski-yol", "destination": "/yeni-yol" }
],
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" }
]
}
]
}
```
## Cron Jobs: Zamanlanmış Görevler
Vercel üzerinde belirli aralıklarla çalışması gereken görevleri (örneğin veritabanı temizliği) `vercel.json` üzerinden tanımlayabilirsiniz.
```json
{
"crons": [
{
"path": "/api/cron/cleanup",
"schedule": "0 0 * * *"
}
]
}
```
## Ortam Değişkenleri ve Güvenlik
Veritabanı şifreleri veya API anahtarları gibi hassas veriler asla kodun içine yazılmamalıdır. Vercel Dashboard üzerinden veya CLI ile bu değişkenler tanımlanmalıdır.
```bash
# CLI ile ortam değişkeni ekleme
vercel env add DATABASE_URL
```
> **Önemli Not:** Ortam değişkenlerini ekledikten sonra projenizi yeniden deploy etmeniz gerekir (`vercel --prod`).
## Görsel Optimizasyonu ve Performans
Vercel, görselleri otomatik olarak optimize eden bir altyapıya sahiptir. Bu, LCP (Largest Contentful Paint) skorunu iyileştirir.
```javascript
import Image from 'next/image';
export default function Profile() {
return (