Next.js ile Hızlı ve SEO Dostu Site Kurmak
Next.js'in sunduğu SSR, SSG ve dosya tabanlı yönlendirme gibi güçlü özelliklerle hem hızlı hem de SEO dostu bir web sitesi nasıl kurulur? İşte pratik bir rehber.
Next.js, React ekosisteminin en popüler framework'lerinden biri haline geldi — ve bence bunu hak ediyor. Hem geliştirici deneyimi hem de üretim performansı açısından gerçekten fark yaratan bir araç. Bu yazıda, Next.js ile hızlı ve SEO dostu bir site kurmanın temel adımlarını ve dikkat edilmesi gereken noktaları ele alacağım.
Neden Next.js?
Saf React uygulamaları, tarayıcıda JavaScript çalıştıktan sonra içeriği render eder (CSR - Client Side Rendering). Bu yöntem arama motorları için bazen sorun çıkarabilir; bot sayfayı taradığında içerik henüz oluşmamış olabilir. Next.js bu problemi iki güçlü yöntemle çözer:
- SSR (Server Side Rendering): Sayfa her istek geldiğinde sunucuda render edilir. Dinamik içerikler için idealdir.
- SSG (Static Site Generation): Sayfa derleme zamanında üretilir. Blog, portfolyo, dokümantasyon gibi değişimi az olan içerikler için mükemmeldir.
- ISR (Incremental Static Regeneration): SSG'nin dinamik bir versiyonu; belirlenen aralıklarla sayfayı arka planda yeniden oluşturur.
Kurulum ve Temel Yapı
Başlamak gerçekten çok basit:
npx create-next-app@latest benim-sitem
cd benim-sitem
npm run dev
Next.js'in dosya tabanlı yönlendirme sistemi hayatı ciddi anlamda kolaylaştırır. pages/ (ya da yeni App Router ile app/) dizinine eklediğiniz her dosya otomatik olarak bir route haline gelir. Ayrı bir router konfigürasyonu yazmaya gerek yok.
SEO için Kritik Ayarlar
SEO dostu bir site kurmak için birkaç temel konuya dikkat etmek gerekiyor:
1. <head> Yönetimi
Her sayfa için özgün title, description ve Open Graph etiketleri tanımlamak şart. Next.js'in yerleşik next/head bileşeni veya yeni Metadata API'si bunu oldukça kolaylaştırıyor:
export const metadata = {
title: 'Ana Sayfa | Benim Sitem',
description: 'Next.js ile kurulmuş hızlı ve SEO dostu site.',
};
2. Dinamik Sitemap Üretimi
next-sitemap paketi ile derleme sonrasında otomatik sitemap oluşturabilirsiniz. Google Search Console'a bu sitemap'i eklemek, indeksleme sürecini hızlandırır.
3. Canonical URL ve Robots.txt
Yinelenen içerik sorunlarını önlemek için canonical URL eklemeyi unutmayın. robots.txt dosyasını da public/ dizinine yerleştirerek botlara hangi sayfaları taramaları gerektiğini söyleyin.
Performans: Core Web Vitals
SEO'nun artık doğrudan performansla ilişkili olduğunu biliyoruz. Google'ın Core Web Vitals kriterleri (LCP, FID/INP, CLS) sıralamayı etkiliyor. Next.js bu konuda da size yardımcı oluyor:
next/image: Görselleri otomatik optimize eder, lazy loading uygular, WebP formatına dönüştürür.next/font: Font dosyalarını sunucudan sunar, layout shift'i önler.- Code Splitting: Her sayfa yalnızca ihtiyacı olan JavaScript'i yükler.
- Edge Runtime & CDN Desteği: Vercel veya benzeri platformlarda sayfalar edge node'larından sunulabilir.
Dağıtım
Next.js uygulamalarını deploy etmek de oldukça kolay. Birkaç popüler seçenek:
- Vercel: Next.js'in yaratıcısı tarafından geliştirildi; sıfır konfigürasyonla çalışır.
- AWS / GCP: Konteynerize edip kendi altyapınızda da çalıştırabilirsiniz.
- Docker + Nginx: Kurumsal ortamlar için daha kontrollü bir seçenek.
Sonuç
Next.js, SEO odaklı ve yüksek performanslı bir web sitesi kurmak isteyenler için gerçekten güçlü bir temel sunuyor. SSR/SSG seçenekleri, yerleşik optimizasyon araçları ve geliştirici dostu yapısıyla hem küçük projeler hem de kurumsal ölçekteki sistemler için uygun. Eğer React bilginiz varsa öğrenme eğrisi de oldukça kısa — deneyin, şaşıracaksınız.