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

Modern web geliştirme dünyasında "hızlı" ve "SEO dostu" ifadelerini aynı cümlede kullanmak artık bir lüks değil, zorunluluk. Google'ın Core Web Vitals metriklerini sıralama faktörü olarak benimsemesiyle birlikte, site hızı doğrudan arama motoru başarısını etkiliyor. İşte tam bu noktada Next.js devreye giriyor.

Next.js Neden Bu Kadar Popüler?

Next.js, React tabanlı bir framework olmasına rağmen sıradan bir React uygulamasından çok daha fazlasını sunuyor. Temel avantajları şöyle özetleyebilirim:

• Sunucu Taraflı Render (SSR): Her istek geldiğinde sayfa sunucuda üretilir; içerik arama motorları tarafından kolayca taranır.
• Statik Site Üretimi (SSG): Derleme anında HTML dosyaları üretilir, CDN üzerinden ışık hızında servis edilir.
• Artımlı Statik Yenileme (ISR): SSG'nin esnekliği ile SSR'nin güncelliğini birleştiren hibrit bir yaklaşım.
• Yerleşik görüntü optimizasyonu: next/image bileşeni, resimleri otomatik olarak boyutlandırır ve WebP formatına dönüştürür.
• Dosya tabanlı yönlendirme: pages/ veya app/ klasörü altındaki her dosya otomatik olarak bir route oluşturur; ayrı bir router konfigürasyonu gerekmez.

SEO için Temel Kurulum Adımları

1. Metadata Yönetimi

Next.js 13+ ile gelen app/ mimarisinde her sayfaya kolayca metadata ekleyebilirsiniz:

export const metadata = {
  title: "Anasayfa | Sitem",
  description: "Next.js ile kurulmuş hızlı ve SEO dostu sitem.",
  openGraph: {
    title: "Anasayfa",
    images: ["/og-image.png"],
  },
};

Bu yapı, Open Graph etiketlerini de tek yerden yönetmenizi sağlar; sosyal medya paylaşımlarında da profesyonel bir görünüm elde edersiniz.

2. Dinamik Sitemap Oluşturma

Arama motorlarının sitenizi eksiksiz taraması için bir sitemap.xml şart. Next.js'te bunu dinamik olarak üretmek çok kolay:

// app/sitemap.js
export default function sitemap() {
  return [
    { url: "https://sitem.com", lastModified: new Date() },
    { url: "https://sitem.com/hakkimda", lastModified: new Date() },
  ];
}

3. Hız Optimizasyonu

Hız tarafında dikkat ettiğim birkaç kritik nokta:

• Font optimizasyonu: next/font ile Google Fonts'u yerel olarak barındırın; harici istek ortadan kalkar.
• Lazy loading: Görünüm alanı dışındaki bileşenleri dynamic() ile geç yükleyin.
• Bundle analizi: @next/bundle-analyzer paketiyle hangi modülün paketi şişirdiğini tespit edin.
• Edge Runtime: API route'larınızı Edge'de çalıştırarak gecikmeyi minimuma indirin.

SSG mi, SSR mi, ISR mi Seçmeli?

| Yöntem | Ne zaman kullanmalı? | |--------|----------------------| | SSG | İçerik nadiren değişiyorsa (blog, portfolio) | | SSR | Kullanıcıya özgü veya anlık veri gerekiyorsa | | ISR | Sık değişen ama kişiselleştirilmemiş içerikler için |

Genellikle içerik ağırlıklı sayfalarda SSG + ISR kombinasyonunu tercih ediyorum. Bu sayede hem derleme süreleri makul kalıyor hem de içerik güncellikleri belirli aralıklarla yayına giriyor.

Sonuç

Next.js, doğru yapılandırıldığında hem geliştirici deneyimi hem de son kullanıcı performansı açısından rakipsiz bir çözüm sunuyor. SEO için gerekli olan metadata yönetimi, sitemap, hızlı sayfa yüklemeleri ve bot taraması kolaylığı gibi özelliklerin büyük çoğunluğu framework'ün içinde hazır geliyor. Eğer React ekosisteminde bir proje kuruyorsanız ve Google sıralamalarında görünür olmak istiyorsanız, Next.js'i atlamak artık pek mümkün değil.