Next.js ile Hızlı ve SEO Dostu Site Kurmak

Next.js, React tabanlı projeler için geliştirilmiş, performansı ve geliştirici deneyimini ön plana çıkaran güçlü bir framework. Ama benim için asıl çekici yanı şu: hem hız hem de SEO'yu aynı anda çözüyor. Bu yazıda, Next.js ile sıfırdan bir site kurarken dikkat ettiğim noktaları paylaşacağım.

Neden Next.js?

Saf bir React uygulaması açtığınızda, tarayıcı önce boş bir HTML alır, ardından JavaScript yüklenip içerik render edilir. Bu durum hem ilk yükleme süresini uzatır hem de arama motoru botlarının içeriği düzgün okumasını zorlaştırır.

Next.js bu sorunu iki temel yaklaşımla çözer:

• SSR (Server-Side Rendering): Her istekte sunucu sayfayı oluşturur, dolu HTML gönderir.
• SSG (Static Site Generation): Sayfalar derleme sırasında üretilir, CDN'den servis edilir. Hız anlamında tartışmasız kazanan budur.

Hangi yaklaşımı seçeceğiniz tamamen içeriğinizin güncelleme sıklığına bağlı. Blog, dokümantasyon, portfolyo → SSG. Anlık veri gerektiren dashboard → SSR ya da ISR (Incremental Static Regeneration).

Proje Kurulumu

Başlamak gerçekten çok basit:

npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev

app/ dizin yapısıyla gelen App Router, Next.js 13 sonrasının standart yolu. Sayfalarınızı app/ altına koyduğunuzda dosya tabanlı routing otomatik çalışıyor; ekstra konfigürasyona gerek yok.

SEO İçin Metadata API

Next.js 13+ ile birlikte gelen metadata API'si, her sayfa için başlık, açıklama ve Open Graph etiketlerini son derece temiz bir şekilde yönetmenizi sağlıyor:

// app/hakkimda/page.tsx
export const metadata = {
  title: "Hakkımda | Kubilay Akkız",
  description: "IT ve veri dünyasından notlar, projeler ve düşünceler.",
  openGraph: {
    title: "Hakkımda",
    images: ["/og-image.png"],
  },
};

Artık <head> etiketleriyle uğraşmak yok. Framework gerisini hallediyor.

Görüntü Optimizasyonu

Performans kayıplarının büyük bölümü optimize edilmemiş görsellere bağlı. Next.js'in yerleşik <Image> bileşeni şunları otomatik yapıyor:

• WebP/AVIF dönüşümü — tarayıcı destekliyorsa daha hafif format
• Lazy loading — görünüme girene kadar yükleme yapılmıyor
• Boyut optimizasyonu — cihaza göre doğru çözünürlük

import Image from "next/image";

<Image src="/hero.jpg" alt="Hero görsel" width={1200} height={630} priority />

priority prop'unu LCP (Largest Contentful Paint) görseline eklemeyi unutmayın. Core Web Vitals skorunuz fark eder.

Performansı Artıran Diğer İpuçları

• Font optimizasyonu: next/font ile Google Fonts'u local olarak serve edin, layout shift sıfıra düşer.
• Route caching: App Router, segment bazlı önbellekleme yapıyor. Gereksiz yere no-store yazmaktan kaçının.
• Sunucu bileşenleri (Server Components): Varsayılan olarak aktif. JavaScript bundle'ına eklenmedikleri için sayfa hafifler.
• sitemap.ts ve robots.ts: app/ altına ekleyerek dinamik site haritası ve robots dosyası üretebilirsiniz.

Deployment

Vercel, Next.js'in yapımcısı olduğundan en sorunsuz deneyimi sunuyor. Ama Cloudflare Pages, Railway ya da kendi sunucunuzda Docker ile de rahatça çalışıyor. next build + next start yeterli; karmaşık bir yapı gerektirmiyor.

---

Next.js, "sadece React yetmez mi?" sorusuna verilen pragmatik bir yanıt. SEO ve performansı geliştirici deneyiminden ödün vermeden bir arada sunması, onu benim go-to tercihim yapıyor. Yeni bir proje başlatacaksanız kesinlikle denemenizi öneririm.