Vercel Deployment: Next.js Projesi Yayınlama Rehberi

Vercel, Next.js'in yaratıcıları tarafından geliştirilen ve frontend uygulamalarını kolayca deploy etmenizi sağlayan bir cloud platformudur. Git push ile otomatik deployment, edge network üzerinde global dağıtım, preview deployment'lar ve serverless functions gibi güçlü özellikler sunar. Bu rehberde bir Next.js projesini Vercel'e deploy etmenin tüm yönlerini, custom domain yapılandırmasından environment variable yönetimine kadar detaylı olarak inceliyoruz.

Vercel Neden Tercih Edilmeli?

Vercel, özellikle Next.js projeleri için optimize edilmiş birçok özellik sunar:

Zero Configuration: Next.js projeleri için sıfır konfigürasyonla deployment
Edge Network: Global CDN ile düşük latency
Preview Deployments: Her pull request için otomatik preview URL
Serverless Functions: API route'ları otomatik olarak serverless function'a dönüşür
Analytics: Yerleşik Web Vitals ve performans izleme
Image Optimization: Next.js Image bileşeni ile otomatik optimizasyon

Adım 1: Projenizi Hazırlama

Deploy öncesi projenizin production-ready olduğundan emin olun:

# Build'in başarıyla tamamlandığını doğrulayın
npm run build

# Production modunda yerel test
npm run start

# Lint ve type kontrolü
npm run lint
npx tsc --noEmit

# next.config.js optimizasyonları
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Standalone output (Docker için de faydalı)
  output: 'standalone',

  // Image domain'leri
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.example.com',
      },
    ],
  },

  // Header güvenlik ayarları
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
          {
            key: 'Referrer-Policy',
            value: 'origin-when-cross-origin',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

İpucu: output: 'standalone' ayarı, Next.js'in production için gereken tüm dosyaları tek bir klasörde toplamasını sağlar. Docker deployment'larında ve self-hosted senaryolarda image boyutunu önemli ölçüde küçültür.

Adım 2: Vercel CLI ile Deployment

Vercel CLI kullanarak terminal üzerinden hızlıca deploy edebilirsiniz:

# Vercel CLI'ı global olarak yükleyin
npm i -g vercel

# Vercel hesabınıza giriş yapın
vercel login

# Projenizi deploy edin (ilk seferde proje bağlantısı kurulur)
vercel

# Production deployment
vercel --prod

# Environment variable tanımlama
vercel env add DATABASE_URL production
vercel env add API_SECRET preview development

# Proje ayarlarını görüntüleme
vercel project ls

# Deployment loglarını izleme
vercel logs your-project-url.vercel.app

Adım 3: Git Entegrasyonu ile Otomatik Deployment

Vercel Dashboard üzerinden GitHub repository'nizi bağlayarak her push'ta otomatik deployment sağlayabilirsiniz:

vercel.com/new adresine gidin
GitHub hesabınızı bağlayın
Repository'nizi seçin
Framework Preset olarak "Next.js" seçili olacaktır
Environment variable'ları ekleyin
"Deploy" butonuna tıklayın

# vercel.json ile deployment konfigürasyonu
{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm ci",
  "framework": "nextjs",
  "regions": ["iad1", "fra1"],
  "crons": [
    {
      "path": "/api/cron/daily-cleanup",
      "schedule": "0 0 * * *"
    }
  ],
  "redirects": [
    {
      "source": "/blog/:slug",
      "destination": "/posts/:slug",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "s-maxage=60, stale-while-revalidate=300"
        }
      ]
    }
  ]
}

Bilgi: Vercel'in Git entegrasyonu ile main branch'e yapılan her push otomatik olarak production'a deploy edilir. Diğer branch'lere yapılan push'lar ve pull request'ler ise preview deployment oluşturur. Her preview deployment'ın benzersiz bir URL'i vardır.

Adım 4: Environment Variables Yönetimi

Farklı ortamlar için farklı environment variable'lar tanımlayabilirsiniz:

# Vercel CLI ile environment variable yönetimi
# Production ortamı için
vercel env add NEXT_PUBLIC_API_URL production
# Değer: https://api.example.com

# Preview ortamı için
vercel env add NEXT_PUBLIC_API_URL preview
# Değer: https://staging-api.example.com

# Development ortamı için
vercel env add NEXT_PUBLIC_API_URL development
# Değer: http://localhost:4000

# Tüm environment variable'ları listele
vercel env ls

# Environment variable'ı çek (.env.local olarak)
vercel env pull .env.local

Uyarı: NEXT_PUBLIC_ prefix'i ile başlayan environment variable'lar client-side bundle'a dahil edilir ve tarayıcıda görünür olur. API key'leri ve secret'ları asla NEXT_PUBLIC_ prefix'i ile tanımlamayın. Server-side'da kullanılacak hassas veriler için prefix'siz isimler kullanın.

Adım 5: Custom Domain Yapılandırması

Vercel projenize özel domain bağlamak oldukça kolaydır:

# CLI ile domain ekleme
vercel domains add example.com

# Domain durumunu kontrol etme
vercel domains inspect example.com

# DNS kayıtları (domain sağlayıcınızda yapılandırın):
# A Record:    @ → 76.76.21.21
# CNAME Record: www → cname.vercel-dns.com

# Subdomain ekleme
vercel domains add blog.example.com

Serverless ve Edge Functions

Vercel'de API route'larınız otomatik olarak serverless function'a dönüşür. Edge runtime ile daha düşük latency elde edebilirsiniz:

// app/api/hello/route.ts - Serverless Function
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({
    message: 'Merhaba, Vercel Serverless!',
    timestamp: new Date().toISOString(),
  });
}

// app/api/edge-hello/route.ts - Edge Function
export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const name = searchParams.get('name') || 'Dünya';

  return new Response(
    JSON.stringify({ message: `Merhaba, ${name}!` }),
    {
      headers: { 'Content-Type': 'application/json' },
    }
  );
}

Deployment Monitoring ve Rollback

Vercel, deployment'larınızı izlemeniz ve gerektiğinde geri almanız için araçlar sunar:

# Deployment listesini görüntüle
vercel ls

# Belirli bir deployment'ın detayları
vercel inspect deployment-url.vercel.app

# Önceki deployment'a rollback
vercel rollback

# Belirli bir deployment'ı production'a promote et
vercel promote deployment-url.vercel.app

# Runtime loglarını izle
vercel logs --follow your-project.vercel.app

İpucu: Vercel Dashboard'da "Instant Rollback" özelliği ile herhangi bir önceki deployment'a saniyeler içinde geri dönebilirsiniz. Yeni bir build oluşturmaya gerek kalmadan, mevcut build artifact'ları kullanılarak rollback yapılır.

Vercel Analytics ve Speed Insights

Uygulamanızın performansını Vercel'in yerleşik araçlarıyla izleyebilirsiniz:

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Sonuç

Vercel, Next.js projelerini deploy etmek için en sorunsuz ve performanslı platformdur. Git entegrasyonu ile otomatik deployment, preview URL'ler ile takım çalışması, edge network ile global performans ve serverless functions ile backend ihtiyaçları tek bir platformda birleşir. Projenizi Vercel'e deploy ederek geliştirme sürecinizi hızlandırın ve kullanıcılarınıza en iyi deneyimi sunun.

Vercel Deployment: Next.js Projesi Yayınlama Rehberi