← Blog
28 Ağustos 2026· otomatik üretildi

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

Next.js kullanarak performanslı, SEO dostu bir web sitesi nasıl kurulur? Temel özellikler ve pratik ipuçlarıyla kapsamlı bir rehber.

#Next.js#SEO#Web Geliştirme#React

Next.js, React ekosisteminin sunduğu en güçlü framework'lerden biri. Hem geliştirici deneyimi hem de üretim performansı açısından ciddi avantajlar sunuyor. Bu yazıda Next.js ile hızlı ve SEO dostu bir site kurmanın püf noktalarını ele alacağız.

Next.js Neden Bu Kadar Popüler?

Vanilla React ile bir site yaptığınızda, içerik tarayıcıda JavaScript çalıştıktan sonra render edilir. Bu durum, arama motoru botlarının sayfanızı doğru okuyamamasına yol açabilir. Next.js bu sorunu Server-Side Rendering (SSR) ve Static Site Generation (SSG) özellikleriyle kökten çözüyor.

Kısaca söylemek gerekirse: Next.js, sayfalarınızı sunucu tarafında veya derleme aşamasında hazırlayarak hem kullanıcıya hem de arama motorlarına hazır HTML gönderiyor.

Projeyi Ayağa Kaldırmak

Başlamak son derece kolay:


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

Bu kadar. Birkaç saniyede çalışan bir Next.js uygulamanız hazır.

SEO için Temel Yapı Taşları

1. <Head> Bileşeni ile Meta Etiketleri

Her sayfa için özel title ve description tanımlamak SEO'nun temelidir:


import Head from 'next/head';

export default function Hakkimda() {
  return (
    <>
      <Head>
        <title>Hakkımda | Kubilay Akkız</title>
        <meta name="description" content="Yazılım, veri ve üretim sistemleri üzerine düşünceler." />
      </Head>
      <main>...</main>
    </>
  );
}

2. Doğru Render Stratejisini Seçmek

Next.js size üç ana seçenek sunar:

  • SSG (Static Generation): İçerik sık değişmiyorsa idealdir. Derleme anında HTML üretilir, CDN'den servis edilir. En hızlı seçenek.
  • SSR (Server-Side Rendering): Her istekte sunucu sayfayı oluşturur. Dinamik ve kişiselleştirilmiş içerikler için uygundur.
  • ISR (Incremental Static Regeneration): SSG'nin dinamik versiyonu. Belirli aralıklarla sayfalar arka planda yenilenir.

Blog veya portfolyo gibi siteler için SSG + ISR kombinasyonu genellikle en iyi sonucu verir.

3. Görsel Optimizasyonu

Next.js'in <Image> bileşeni, görselleri otomatik olarak optimize eder:

  • WebP formatına dönüştürür
  • Lazy loading uygular
  • width ve height zorunlu olduğundan CLS (Cumulative Layout Shift) skorunuzu korur

import Image from 'next/image';

<Image src="/profil.jpg" alt="Profil Fotoğrafı" width={400} height={400} />

4. Dosya Tabanlı Yönlendirme

pages/ klasörüne eklediğiniz her dosya otomatik olarak bir route haline gelir. Temiz URL yapısı hem kullanıcı deneyimini hem de SEO'yu olumlu etkiler:


pages/index.js        → /
pages/blog/index.js   → /blog
pages/blog/[slug].js  → /blog/next-js-rehberi

Performans İpuçları

Hız, SEO'nun ayrılmaz bir parçası. Google'ın Core Web Vitals kriterleri göz önüne alındığında şunlara dikkat etmek gerekiyor:

  • Font optimizasyonu: next/font ile Google Fonts'u layout shift olmadan yükleyin.
  • Kod bölme (Code Splitting): Next.js bunu otomatik yapar; her sayfa yalnızca ihtiyaç duyduğu JS'i indirir.
  • Önbellekleme başlıkları: Statik varlıklar için Cache-Control header'larını doğru ayarlayın.
  • Middleware kullanımı: Gereksiz yönlendirmeleri edge'de çözüp sunucu yükünü azaltın.

Sonuç

Next.js, doğru yapılandırıldığında hem geliştirici hem de kullanıcı için gerçekten keyifli bir deneyim sunuyor. SSG/ISR ile ışık hızında sayfa yüklemeleri, yerleşik Head bileşeniyle kolay SEO yönetimi ve güçlü ekosistemiyle production'a taşımak hiç bu kadar kolay olmamıştı. Eğer henüz denemediyseniz, küçük bir proje ile başlamanızı kesinlikle tavsiye ederim.