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

Modern web geliştirme dünyasında hız ve arama motoru görünürlüğü artık lüks değil, zorunluluk. React ekosisteminde çalışıyorsanız bu iki hedefi aynı anda yakalamanın en akıllıca yolu büyük ihtimalle Next.js'tir. Ben de son birkaç projemde Next.js'e geçtikten sonra farkı açıkça gördüm; bu yazıda öğrendiklerimi sizinle paylaşmak istedim.

Next.js Neden Bu Kadar Popüler?

Vanilla React, tarayıcıda çalışır ve sayfayı istemci tarafında render eder. Bu yaklaşım geliştirici deneyimi açısından harika olsa da arama motorlarının içeriğinizi düzgün indexlemesini zorlaştırır. Next.js ise buna birkaç farklı stratejiyle çözüm getirir:

• SSR (Server-Side Rendering): Sayfa, her istekte sunucuda render edilir. Dinamik içerikler için idealdir.
• SSG (Static Site Generation): Sayfa, derleme zamanında oluşturulur ve CDN üzerinden sunulur. Blog, döküman veya pazarlama siteleri için mükemmeldir.
• ISR (Incremental Static Regeneration): SSG'nin esnekleştirilmiş hali; belirli aralıklarla sayfaları yeniden oluşturmanızı sağlar.

Kurulum ve Proje Yapısı

Başlamak gerçekten bu kadar basit:

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

Next.js'in dosya tabanlı yönlendirme sistemi sayesinde app/ veya pages/ klasörüne eklediğiniz her dosya otomatik olarak bir route olur. Ayrı bir router konfigürasyonuna gerek yok — bu tek başına bile ciddi zaman kazandırır.

SEO için Kritik Ayarlar

Hızlı bir site kurmak yetmez; arama motorlarının sizi bulması da şart. Bu noktada Next.js'in Metadata API'si devreye giriyor.

// app/layout.tsx
export const metadata = {
  title: 'Benim Harika Sitem',
  description: 'Next.js ile kurulmuş, hızlı ve SEO dostu bir web sitesi.',
  openGraph: {
    title: 'Benim Harika Sitem',
    description: 'Sosyal medya paylaşımlarında güzel görün.',
    images: ['/og-image.png'],
  },
};

Birkaç SEO altın kuralını da listeleyeyim:

• Canonical URL'ler ekleyin; yinelenen içerik cezasından kaçının.
• robots.txt ve sitemap.xml dosyalarını Next.js'in yerleşik dosya konvansiyonlarıyla oluşturun.
• Görsel optimizasyonu için mutlaka next/image bileşenini kullanın; otomatik boyutlandırma ve lazy loading ücretsiz gelir.
• Sayfa başlıklarını ve meta descriptionlarını her route için ayrı ayrı ve anlamlı biçimde tanımlayın.

Performans: Core Web Vitals'ı Geçmek

Google'ın sıralama kriterleri arasına giren Core Web Vitals metriklerini (LCP, CLS, FID) iyileştirmek için Next.js'in sağladığı araçlar oldukça güçlü:

• next/font ile font dosyalarını self-host edin, layout shift'i sıfıra indirin.
• Route segment config ile hangi sayfaların statik, hangilerinin dinamik olacağına ince ayar yapın.
• Middleware kullanarak edge'de kimlik doğrulama ve yönlendirme yapın; sunucu gecikmesini minimize edin.
• Vercel Analytics veya açık kaynak alternatifi olan Umami ile gerçek kullanıcı verilerini izleyin.

Deployment: Vercel mi, Başka Bir Şey mi?

Next.js'i Vercel'e deploy etmek tek komutla oluyor ve zero-config. Ancak kendi altyapınızdaysanız (Docker, Nginx, PM2) next start komutu production build'ı sorunsuz çalıştırır. Ben kendi VPS projelerimde genellikle Nginx reverse proxy + PM2 kombinasyonunu tercih ediyorum.

Sonuç

Next.js, özellikle içerik ağırlıklı veya e-ticaret projelerinde hız ve SEO'yu aynı anda çözen olgun bir framework. Öğrenme eğrisi React bilgisiyle oldukça hafifliyor; eğer hâlâ saf CRA (Create React App) kullanıyorsanız geçiş yapmak için doğru zaman diyebilirim. Küçük bir proje üzerinde denemekle başlayın — farkı ilk Lighthouse raporunda göreceksiniz.