Vercel ve Next.js Kullanımı: Sıfır Hata ile Yayın Yapmak

Next.js, React'in üstüne inşa edilmiş, Vercel tarafından geliştirilen ve bugün dünyanın en çok kullanılan web framework'lerinden biridir. Vercel ise Next.js uygulamalarını deploy etmek için birebir optimize edilmiş bir hosting platformıdur. İkisi birlikte kullanıldığında geliştirici deneyimi üst seviyeye çıkar.

1. Neden Next.js?

• File-Based Routing: Dosya oluşturmak = sayfa oluşturmak. app/hakkimizda/page.tsx otomatik /hakkimizda URL'si olur.
• Server Components: React bileşenlerini sunucuda render ederek sayfa yükleme hızını dramatik artırır.
• API Routes: app/api/ klasörü altındaki dosyalar otomatik API endpoint'ine dönüşür.
• Image Optimization: <Image> bileşeni görselleri otomatik optimize eder ve WebP formatına çevirir.
• SEO Desteği: generateMetadata ile her sayfaya özel meta tag'leri kolayca tanımlarsınız.

2. Proje Oluşturma

# Next.js 14 projesi oluştur
npx create-next-app@latest benim-projem

# Soruları yanıtlama:
# TypeScript: Yes
# ESLint: Yes
# Tailwind CSS: No (isteyen ekleyebilir)
# App Router: Yes  <- ÖNEMLİ!
# src/ directory: No

# Proje dizinine gir
cd benim-projem

# Geliştirme sunucusunu başlat
npm run dev

Tarayıcıdan http://localhost:3000 adresine giderek uygulamanizi görebilirsiniz.

3. App Router Yapısı

my-app/
├── app/
│   ├── layout.tsx       ← Tüm sayfaların kapsayıcısı
│   ├── page.tsx         ← Ana sayfa (/)
│   ├── hakkimizda/
│   │   └── page.tsx     ← /hakkimizda sayfası
│   ├── blog/
│   │   ├── page.tsx     ← /blog listesi
│   │   └── [slug]/
│   │       └── page.tsx ← /blog/dinamik-sayfa
│   └── api/
│       └── kullanici/
│           └── route.ts ← /api/kullanici endpoint'i
├── public/          ← Statik dosyalar (resimler vb.)
└── next.config.ts   ← Konfigürasyon

4. Statik Sayfa Oluşturma (SSG)

Next.js, dinamik sayfaları bile build anında önceden render edebilir. Bu AdSense onayı ve SEO için çok önemlidir:

// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const yazilar = await getYazilar(); // API veya veritabani
  
  return yazilar.map((yazi) => ({
    slug: yazi.slug,
  }));
}

export async function generateMetadata({ params }) {
  const yazi = await getYaziBySlug(params.slug);
  return {
    title: yazi.baslik + ' | CodeMareFi',
    description: yazi.ozet,
    openGraph: {
      images: [yazi.thumbnail],
    },
  };
}

export default async function YaziBlogSayfasi({ params }) {
  const yazi = await getYaziBySlug(params.slug);
  return (
    <article>
      <h1>{yazi.baslik}</h1>
      <div dangerouslySetInnerHTML={{ __html: yazi.icerik }} />
    </article>
  );
}

5. Vercel'e Deploy

1. Projenizi GitHub'a push edin.
2. vercel.com'a gidin ve GitHub hesabınızla bağlanın.
3. "Import Project" ile reponuzu seçin.
4. Environment variables (SUPABASE_URL vb.) ekleyin.
5. "Deploy" butonuna basın. Dakikalar içinde canlıda!

Her git push sonrasında Vercel otomatik olarak yeni bir deploy tetikler. PR'lar için otomatik önizleme URL'leri oluşturur.

6. Performans Optimizasyonu

// next.config.ts — temel optimizasyonlar
import type { NextConfig } from 'next';

const config: NextConfig = {
  images: {
    formats: ['image/webp', 'image/avif'], // Otomatik WebP
    remotePatterns: [
      { hostname: 'supabase.co' }
    ],
  },
  compress: true,
  poweredByHeader: false, // Gizlilik için
};

export default config;