Web Geliştirmede Yeni Dönem: React vs Next.js – Hangisini, Ne Zaman Seçmeli?

1. Giriş: Web Geliştirmenin Evrimi ve Değişen Beklentiler

Web geliştirme dünyası, son on yılda baş döndürücü bir hızla evrimleşti. İnternetin ilk dönemlerindeki statik HTML sayfalarından, PHP ve ASP ile şekillenen sunucu taraflı döneme, oradan da JavaScript’in egemenliğindeki Single Page Application (SPA) devrimine tanıklık ettik.

SPA devriminin bayrak taşıyıcısı şüphesiz React oldu. Facebook tarafından açık kaynaklı hale getirilen React, "bileşen tabanlı (component-based)" düşünce yapısıyla karmaşık arayüzleri yönetmeyi kolaylaştırdı. Ancak zamanla fark ettik ki; istemci tarafında (browser) çalışan devasa JavaScript dosyaları, kullanıcı deneyimi ve arama motoru optimizasyonu (SEO) açısından bazı "karın ağrılarını" beraberinde getiriyordu.

İşte tam bu noktada, "Sadece bir kütüphane bize yetmiyor, bir yapıya (framework) ihtiyacımız var" sesi yükselmeye başladı. Bugün Next.js’in yükselişi, aslında React’ın bir eksikliği değil, modern webin (performans, hız ve SEO) artan taleplerine verilen kurumsal bir cevaptır.

---

2. React Nedir? Esneklik ve Özgürlüğün Kalesi

React, teknik tanımıyla bir JavaScript kütüphanesidir. Amacı sadece kullanıcı arayüzleri (UI) oluşturmaktır. Bir mimar gibi düşünürsek; React size tuğlaları, çimentoyu ve harika bir işçilik rehberini sunar. Ancak binanın tesisatını (routing), güvenliğini (authentication) veya dış cephe kaplamasını (styling) nasıl yapacağınızı size bırakır.

React’ın Güçlü Yönleri:

• Minimalist ve Esnek: Projenize sadece ihtiyacınız olan paketleri eklersiniz.

• Devasa Ekosistem: Bir sorunla karşılaştığınızda Stack Overflow’da çözüm bulamama ihtimaliniz neredeyse sıfırdır.

• Öğrenme Eğrisi: Temel JavaScript bilginiz varsa, React’ın çekirdek konseptlerini (props, state, hooks) anlamak nispeten hızlıdır.

React’ın "Zorlukları":

React ile profesyonel bir uygulama geliştirmek istediğinizde; yönlendirme için react-router, state yönetimi için Redux veya Zustand, form yönetimi için Formik veya React Hook Form gibi onlarca ek kararı sizin vermeniz gerekir. Bu özgürlük, büyük projelerde "karar yorgunluğuna" (decision fatigue) ve yapılandırma karmaşasına yol açabilir.

---

3. Next.js Nedir? Her Şey Dahil Bir Framework

Vercel tarafından geliştirilen Next.js, kendini "The React Framework for the Web" olarak tanımlıyor. Eğer React bir motorsa, Next.js bu motorun etrafına inşa edilmiş, klimasından navigasyonuna kadar her şeyi hazır bir spor otomobildir.

Next.js, React’ın üzerine; dosya tabanlı yönlendirme, görsel optimizasyonu, API rotaları ve farklı render stratejileri gibi kritik özellikleri inşa eder.

"Sıfır Konfigürasyon" (Zero Config) Anlayışı

Next.js ile bir projeye başladığınızda, modern bir web uygulamasının ihtiyaç duyduğu derleme (compilation), paketleme (bundling) ve optimizasyon ayarları arka planda otomatik olarak yapılır. Siz sadece kodunuzu yazmaya odaklanırsınız.

---

4. Teknik Karşılaştırma: Rendering Stratejileri

Bu bölüm, React ile Next.js arasındaki asıl "ayrıştırıcı" noktadır. Gelin, modern webin dört farklı sunum yöntemini inceleyelim.

CSR (Client-Side Rendering) - React’ın Klasik Yöntemi

Klasik bir React uygulamasında, sunucu tarayıcıya neredeyse boş bir HTML dosyası ve devasa bir JavaScript paketi gönderir. Tarayıcı bu JavaScript’i çalıştırır, DOM’u oluşturur ve içerik görünür hale gelir.

• Sorun: Kullanıcı içerik görene kadar "beyaz ekran" ile karşılaşabilir. SEO botları bu içeriği okumakta zorlanabilir.

SSR (Server-Side Rendering) - Next.js'in Gücü

Her istekte, sayfa sunucu tarafında oluşturulur ve tarayıcıya dolu bir HTML olarak gönderilir.

• Avantaj: Kullanıcı anında içerik görür, Googlebot sayfayı mükemmel şekilde indeksler.

SSG (Static Site Generation) - Hızın Anahtarı

Sayfalar proje build edilirken (oluşturulurken) bir kez üretilir.

• Analoji: Restoranda sipariş beklemek (SSR) yerine, hazır paketlenmiş bir yemeği raftan almak gibidir. İnanılmaz hızlıdır.

ISR (Incremental Static Regeneration) - Next.js'in "Büyüsü"

Diyelim ki 10.000 ürünlü bir e-ticaret siteniz var. Tüm sayfaları build aşamasında üretmek saatler sürer. ISR sayesinde, statik sayfaları tüm siteyi tekrar build etmeden, arka planda belirli aralıklarla güncelleyebilirsiniz. Bu, Next.js’i rakiplerinden ayıran en vizyoner özelliklerden biridir.

---

5. Performans ve SEO: En Büyük Fark Nerede?

Bir teknoloji yazarı olarak şunu net bir şekilde söyleyebilirim: Google, hız ve erişilebilirlik ister.

React (CSR) tabanlı sitelerde, Google botları JavaScript’i çalıştırmak için "ikinci bir tarama sırası" bekleyebilir. Bu da içeriğinizin geç indekslenmesine veya hiç indekslenmemesine neden olabilir.

Next.js ise;

1. LCP (Largest Contentful Paint): İlk anlamlı içeriği sunucuda hazırlayıp gönderdiği için bu skoru optimize eder.

2. Metadata Yönetimi: Her sayfa için dinamik title ve meta etiketlerini sunucu tarafında kolayca yönetmenizi sağlar.

3. Görsel Optimizasyonu: next/image bileşeni, görselleri otomatik olarak WebP formatına çevirir ve cihaz boyutuna göre yeniden boyutlandırır.

---

6. Geliştirici Deneyimi ve Dosya Yapısı

Yönlendirme (Routing)

React'ta bir sayfa oluşturmak için react-router-dom kurmalı, rotaları tanımlamalı ve componentleri eşleştirmelisiniz. Next.js'te (özellikle App Router ile) app/ klasörü altında açtığınız her klasör ve içindeki page.tsx dosyası otomatik olarak bir URL rotasıdır. Bu, standartlaşmış bir yapı sunar.

API Routes: Full-Stack Gücü

Next.js içinde /api klasörü altında yazdığınız kodlar, Node.js ortamında çalışan birer "Serverless Function" haline gelir. Yani küçük bir backend ihtiyacı için ayrı bir Express.js sunucusu kurmanıza gerek kalmaz; veritabanına doğrudan Next.js içinden bağlanabilirsiniz.

---

7. Hangisini Seçmelisin? (Karar Matrisi)

Hangi teknolojiyi seçeceğiniz, projenizin doğasına bağlıdır:

Senaryo	Önerilen	Neden?
B2B Dashboard / Yönetim Paneli	React (Vite)	SEO önemli değil, uygulama tamamen login arkasında. Gereksiz karmaşıklıktan kaçınılır.
E-Ticaret Sitesi	Next.js	SEO kritik, ürün sayfalarının çok hızlı yüklenmesi ve sosyal medyada paylaşılabilir olması lazım.
Kişisel Blog / Portfolyo	Next.js (SSG)	Statik hız ve SEO avantajı.
SaaS Uygulaması (Halka Açık)	Next.js	Landing page'lerin SEO dostu olması ve uygulamanın performanslı çalışması gerekir.
Öğrenme Aşaması	React	Önce "motorun" nasıl çalıştığını anlamak, Framework'ü anlamayı kolaylaştırır.

---

8. Yeni Dönem: React Server Components (RSC)

React 18 ile birlikte web dünyasında taşlar yerinden oynadı. Artık "React sadece istemcide çalışır" kuralı yıkıldı. Next.js 13, 14 ve 15 ile hayatımıza giren App Router yapısı, React Server Components üzerine inşa edilmiştir.

Bu ne anlama geliyor? Artık bileşenlerinizin varsayılan olarak sunucuda çalışması sağlanıyor. İstemciye (browser) gönderilen JavaScript miktarı dramatik şekilde azalıyor. Modern bir Next.js uygulamasında React, artık bir kütüphaneden ziyade, Next.js'in üzerinde çalıştığı bir "runtime" veya "motor" gibi davranıyor. Gelecekte bu iki kavram arasındaki çizgi daha da bulanıklaşacak.

---

9. Uygulamalı Örnek: Kod Farklılıkları

Basit bir veri çekme (fetch) işleminin iki yapı arasındaki farkına bakalım:

React (Klasik CSR Yaklaşımı)

JavaScript

// İstemci tarafında veri çekme
import { useState, useEffect } from 'react';

function ProductList() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/products')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Yükleniyor...</p>;
  return <ul>{data.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

Next.js (Modern Server Component Yaklaşımı)

JavaScript

// app/products/page.tsx
// Sunucu tarafında veri çekme - Daha temiz, daha hızlı!
async function ProductList() {
  const res = await fetch('https://api.example.com/products');
  const data = await res.json();

  return (
    <ul>
      {data.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

export default ProductList;

Gördüğünüz gibi Next.js, useEffect ve useState kalabalığını ortadan kaldırarak veriye doğrudan ulaşmanızı sağlar.

---

10. Sonuç ve Gelecek Öngörüsü

React ölmedi, aksine evrim geçirdi. Next.js ise bu evrimin en başarılı uygulayıcısı oldu. Eğer bugün kurumsal, ölçeklenebilir ve kullanıcı dostu bir web projesine başlıyorsanız, Next.js sektörel standart haline gelmiş durumda. Ancak React’ın temellerini bilmeden Next.js’te başarılı olmak zordur.

Web geliştirme dünyası artık "nasıl kod yazarım?" sorusundan "kullanıcıya en hızlı içeriği nasıl ulaştırırım?" sorusuna evrildi. Next.js bize bu sorunun yanıtını veriyor.

sezerkocer.net'te web dünyasındaki bu değişimleri takip etmeye ve derinlemesine incelemeye devam edeceğiz. Bir sonraki yazımızda "App Router Mimarisinde State Yönetimi" konusuna değineceğiz. Takipte kalın!

---

Sık Sorulan Sorular (FAQ)

1. Next.js öğrenmek için React bilmek şart mı?

Evet. Next.js, React üzerine kurulmuştur. React bileşen yapısını, props ve state mantığını bilmeden Next.js özelliklerini anlamlandırmak zordur.

2. Next.js sadece statik siteler için mi?

Hayır. Next.js; statik (SSG), dinamik (SSR) ve hibrit (ISR) yapıların hepsini aynı proje içinde kullanmanıza olanak tanır.

3. React projemi Next.js'e taşımalı mıyım?

Eğer SEO sorunu yaşıyorsanız, site açılış hızınız yavaşsa veya projeniz büyüdükçe yönetimi zorlaşıyorsa taşımak mantıklı bir yatırımdır. Ancak küçük, kapalı devre bir araç yazıyorsanız buna değmeyebilir.

4. React Server Components nedir?

Bileşenlerin sunucu tarafında render edilip istemciye minimal JavaScript ile gönderilmesini sağlayan yeni bir React özelliğidir. Next.js App Router bu teknolojiyi varsayılan olarak kullanır.

5. Next.js ücretli mi?

Hayır, Next.js tamamen açık kaynaklı ve ücretsizdir. Ancak Vercel gibi platformlar üzerinden kolayca deploy (yayına alma) hizmeti alabilirsiniz (ücretsiz planları da mevcuttur).