Next.js Deployment: Vercel ile Production'a Çıkma

Next.js Deployment: Vercel ile Production'a Çıkma

Next.js uygulamanızı geliştirdiniz, şimdi sıra production ortamına deploy etmekte. Vercel, Next.js'in yaratıcısı tarafından geliştirilen ve Next.js ile en derin entegrasyona sahip hosting platformudur. Bu yazıda Vercel'e deployment sürecini, yapılandırma seçeneklerini, ortam değişkenlerini, custom domain kurulumunu ve production best practice'lerini adım adım inceleyeceğiz.

Vercel Neden Tercih Edilmeli?

• Zero-config deployment: Git push ile otomatik deploy
• Edge Network: Global CDN ile düşük latency
• Preview Deployments: Her PR için otomatik preview URL
• Serverless Functions: API route'ları otomatik serverless olarak çalışır
• Analytics: Yerleşik Web Vitals takibi
• ISR Desteği: Incremental Static Regeneration native desteği

Adım 1: Vercel Hesabı ve Proje Bağlama

# Vercel CLI kurulumu
npm install -g vercel

# Giriş yap
vercel login

# Projeyi bağla
cd my-nextjs-app
vercel link

Alternatif olarak vercel.com/new üzerinden GitHub repository'nizi doğrudan import edebilirsiniz.

Adım 2: Proje Yapılandırması

// vercel.json (isteğe bağlı)
{
  "framework": "nextjs",
  "buildCommand": "next build",
  "outputDirectory": ".next",
  "regions": ["fra1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        { "key": "Cache-Control", "value": "no-store" }
      ]
    },
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Frame-Options", "value": "DENY" },
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/eski-sayfa",
      "destination": "/yeni-sayfa",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/api/v1/:path*",
      "destination": "https://api.backend.com/:path*"
    }
  ]
}

Adım 3: Environment Variables

# Vercel CLI ile ortam değişkeni ekleme
vercel env add DATABASE_URL production
vercel env add NEXT_PUBLIC_API_URL production
vercel env add AUTH_SECRET production

# Ortam değişkenlerini listeleme
vercel env ls

# Belirli ortam için değişken çekme
vercel env pull .env.local

Vercel Dashboard'da da ortam değişkenlerini yönetebilirsiniz: Project Settings > Environment Variables.

Adım 4: Custom Domain

# CLI ile domain ekleme
vercel domains add site.com

# DNS ayarları
# A Record: 76.76.21.21
# CNAME: cname.vercel-dns.com (www subdomain için)

Vercel, SSL sertifikasını otomatik olarak sağlar ve yeniler. DNS propagation birkaç dakika ile 48 saat arasında sürebilir.

Adım 5: Deploy

# Preview deployment
vercel

# Production deployment
vercel --prod

# Belirli bir branch'i deploy etme
git push origin main  # Otomatik production deploy

next.config.js Production Ayarları

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Sıkı mod
  reactStrictMode: true,

  // Resim optimizasyonu
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: 'cdn.site.com',
      },
    ],
    formats: ['image/avif', 'image/webp'],
  },

  // Güvenlik header'ları
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=63072000; includeSubDomains; preload',
          },
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
          },
        ],
      },
    ];
  },

  // Logging
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

module.exports = nextConfig;

Preview Deployments

Her pull request için Vercel otomatik olarak bir preview URL oluşturur. Bu, değişiklikleri production'a göndermeden önce test etmenizi sağlar:

# PR oluşturduğunuzda otomatik deploy olur
# URL formatı: project-name-git-branch-name-username.vercel.app

# Preview ortam değişkenleri production'dan farklı olabilir
# Vercel Dashboard'da Preview/Production ayrı ayarlanabilir

Vercel Analytics ve Speed Insights

npm install @vercel/analytics @vercel/speed-insights

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Deployment Checklist

1. Build test: next build komutunu lokal'de çalıştırın
2. Ortam değişkenleri: Tüm gerekli değişkenlerin Vercel'de tanımlı olduğundan emin olun
3. Veritabanı: Production veritabanının erişilebilir olduğunu doğrulayın
4. Domain: DNS ayarlarının doğru yapılandırıldığını kontrol edin
5. SSL: HTTPS'in çalıştığını doğrulayın
6. Redirects: Eski URL'lerin doğru yönlendirildiğini test edin
7. Lighthouse: Performance, accessibility, SEO puanlarını kontrol edin
8. Error monitoring: Sentry veya benzeri bir servis entegre edin

Alternatif Deployment Platformları

Vercel dışında Next.js'i deploy edebileceğiniz platformlar:

• Netlify: Benzer özellikler, Next.js runtime desteği
• AWS Amplify: AWS ekosistemi entegrasyonu
• Cloudflare Pages: Edge-first yaklaşım
• Docker: next start ile self-hosted
• Railway / Render: Basit container deployment

Sonuç

Vercel, Next.js uygulamalarını deploy etmek için en sorunsuz deneyimi sunan platformdur. Git entegrasyonu ile otomatik deployment, preview URL'ler ile PR bazlı test, global Edge Network ile düşük latency ve yerleşik analytics ile production monitoring sağlar. Güvenlik header'ları, ortam değişkenleri yönetimi ve custom domain kurulumu ile production-ready bir deployment süreci oluşturabilirsiniz. Deployment checklist'ini takip ederek sorunsuz bir production geçişi yapabilirsiniz.

Kaynaklar

• Vercel Documentation
• Next.js Docs — Deploying
• Vercel — Environment Variables
• Vercel Analytics