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

Next.js, React ekosisteminin en güçlü framework'lerinden biri olarak öne çıkıyor. Hem geliştirici deneyimi hem de üretim performansı açısından ciddi avantajlar sunuyor. Bu yazıda, Next.js ile nasıl hızlı ve SEO dostu bir site kurabileceğinizi adım adım ele alacağım.

Neden Next.js?

Saf React uygulamalarında içerik tarayıcı tarafında oluşturulur (Client-Side Rendering). Bu durum iki temel sorunu beraberinde getirir:

• SEO zafiyeti: Arama motoru botları JavaScript'i her zaman tam olarak işleyemez, bu yüzden içeriğinizi göremeyebilir.
• Yavaş ilk yükleme: Kullanıcı sayfayı açtığında önce boş bir HTML gelir, ardından JS bundle indirilip çalıştırılır.

Next.js bu iki sorunu yapısal olarak çözer. Nasıl mı? Üç farklı render stratejisiyle.

Üç Farklı Render Stratejisi

1. SSR — Server-Side Rendering

Her istek geldiğinde sayfa sunucuda render edilir ve hazır HTML istemciye gönderilir. Dinamik ve kullanıcıya özel içerikler için idealdir. getServerSideProps fonksiyonu ile kolayca devreye alınır.

2. SSG — Static Site Generation

Sayfalar derleme (build) sırasında bir kez üretilir ve CDN üzerinden dağıtılır. Blog yazıları, landing page'ler ve dokümantasyon siteleri için biçilmiş kaftandır. Hem SEO hem de hız açısından en güçlü seçenektir.

3. ISR — Incremental Static Regeneration

SSG'nin esnekleştirilmiş hali. Sayfaları belirli aralıklarla (örneğin her 60 saniyede bir) arka planda yeniden oluşturur. Hem statik hız hem de güncel içerik elde edersiniz.

SEO için Temel Ayarlar

Next.js'de SEO optimizasyonu için next/head bileşeni ya da daha modern olan Metadata API (Next.js 13+) kullanılır. Dikkat etmeniz gereken başlıca noktalar:

• Her sayfaya özgün <title> ve <meta name="description"> ekleyin.
• Open Graph etiketlerini (og:title, og:image vb.) ihmal etmeyin; sosyal medya paylaşımlarında büyük fark yaratır.
• Canonical URL tanımlayın, mükerrer içerik sorununu önleyin.
• robots.txt ve sitemap.xml dosyalarını otomatik oluşturmak için next-sitemap paketini kullanabilirsiniz.

Performans için Altın Kurallar

Next.js, performansı neredeyse kutudan çıktığı gibi sunar; ancak birkaç noktaya dikkat etmek gerekir:

• next/image kullanın: Görselleri otomatik olarak optimize eder, modern formatlara (WebP, AVIF) dönüştürür ve lazy loading uygular.
• next/font ile yazı tiplerini yönetin: Google Fonts'u bile yerel olarak barındırarak FOUT (Flash of Unstyled Text) sorununu ortadan kaldırır.
• Dinamik import kullanın: Büyük bileşenleri dynamic(() => import(...)) ile ihtiyaç duyulduğunda yükleyin, ilk bundle boyutunu küçültün.
• Middleware ile yönlendirmeleri sunucu tarafında yapın: İstemci tarafı yönlendirmeler yerine Edge Middleware tercih edin; bu sayede sayfa geçişleri hem daha hızlı hem de daha güvenli olur.

App Router mu, Pages Router mu?

Next.js 13 ile gelen App Router, React Server Components (RSC) desteğiyle oyunun kurallarını değiştirdi. Sunucu bileşenleri sayesinde gereksiz JavaScript istemciye gönderilmiyor; bu da sayfa boyutunu ve yükleme süresini ciddi ölçüde azaltıyor. Yeni projelerde App Router'ı tercih etmenizi öneririm. Mevcut projeleri ise aceleci davranmadan, modül modül App Router'a taşıyabilirsiniz.

Sonuç

Next.js, doğru kullanıldığında hem Lighthouse skorlarınızı yeşile boyayan hem de arama motorlarında sizi üst sıralara taşıyan güçlü bir araç. Render stratejinizi içeriğinizin yapısına göre seçmek, görsel ve font optimizasyonlarını ihmal etmemek ve Metadata API'yi eksiksiz doldurmak — bu üç ilkeye sadık kalırsanız sağlam bir başlangıç yapmış olursunuz.

Bir sonraki yazıda Next.js projelerini Vercel yerine kendi altyapınıza (self-hosted) nasıl deploy edeceğinizi ele alacağım. Takipte kalın!