Next.js Nedir? React Framework'üne Başlangıç Rehberi

React tek başına bir uygulama çatısı değil; arayüz oluşturmaya yarayan bir kütüphanedir. Yönlendirme, sunucu tarafı işleme, görsel optimizasyonu gibi konularda kendi kararlarınızı almanız ve genelde üçüncü parti araçlar eklemeniz gerekir. Next.js bu boşluğu doldurur: React'in üzerine, üretim seviyesinde bir uygulamanın ihtiyaç duyduğu her şeyi ekleyen bir framework'tür. Bu yazıda Next.js'in dosya tabanlı yönlendirmesini, render stratejilerini ve API rotalarını gerçek kod örnekleriyle ele alıyoruz.

Next.js'in temel felsefesi, makul varsayılan ayarlarla başlayıp gerektiğinde detaya inebilmenizdir. Yeni bir proje oluşturduğunuzda yönlendirme, derleme optimizasyonu ve görsel işleme için sıfırdan yapılandırma yazmanız gerekmez. Aşağıda bu araçların pratikte nasıl çalıştığına bakıyoruz.

Next.js Projesi Kurmak

Yeni bir Next.js projesi tek komutla kurulur:

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

Bu komut TypeScript desteği, ESLint yapılandırması ve hazır bir klasör yapısıyla birlikte çalışmaya hazır bir proje kurar. npm run dev komutu geliştirme sunucusunu başlatır; proje localhost:3000 üzerinden anında görüntülenir. React ve web geliştirme temelleri için MDN Web Docs, sunucu tarafı işlemenin SEO açısından önemi için ise Google Search Central dokümantasyonu güvenilir kaynaklardır.

Kod üzerinde değişiklik yaptığınızda tarayıcı otomatik yenilenir; sayfayı elle yenilemeden sonucu anında görürsünüz. Proje yapısı basit bir kurala dayanır: app/ klasörüne eklediğiniz her dosya doğrudan bir sayfaya karşılık gelir.

Dosya Tabanlı Yönlendirme

Geleneksel React projelerinde yönlendirme için ayrı bir kütüphane kurup rotaları elle tanımlamanız gerekir. Next.js'te ise klasör yapısı doğrudan URL yapısını belirler. app/hakkimizda/page.tsx dosyasını oluşturduğunuzda /hakkimizda rotası otomatik olarak çalışır:

app/
├── page.tsx           → /
├── hakkimizda/
│   └── page.tsx        → /hakkimizda
└── blog/
    ├── page.tsx         → /blog
    └── [slug]/
        └── page.tsx     → /blog/herhangi-bir-yazi

Köşeli parantezli klasör adı ([slug]) dinamik bir rota tanımlar. Bu sayede her blog yazısı için ayrı bir dosya yazmak yerine, tek bir dosya tüm yazıları karşılar:

// app/blog/[slug]/page.tsx
export default function BlogYazisi({ params }: { params: { slug: string } }) {
  return <h1>Yazı: {params.slug}</h1>;
}

Bu dosya tabanlı yaklaşım, projeyi ilk kez açan bir geliştiricinin bile klasörlere bakarak sayfa yapısını anlamasını sağlar; ayrı bir yönlendirme dosyasını incelemesine gerek kalmaz.

Render Stratejileri: SSR, SSG ve ISR

Next.js'in güçlü yanlarından biri, her sayfa için farklı bir render stratejisi seçebilmenizdir. Üç temel yaklaşım vardır ve hangisinin uygun olduğu sayfanın içeriğine bağlıdır.

Statik oluşturma, sayfa içeriği sık değişmiyorsa en hızlı seçenektir; sayfa derleme sırasında bir kez üretilir ve statik dosya olarak sunulur. ISR bu yaklaşımı biraz esnetir:

export const revalidate = 3600; // sayfa her saat yeniden oluşturulur

async function getUrunler() {
  const res = await fetch("https://api.example.com/urunler");
  return res.json();
}

export default async function UrunlerSayfasi() {
  const urunler = await getUrunler();
  return <UrunListesi urunler={urunler} />;
}

Bu satır sayesinde sayfa statik gibi hızlı yüklenir, içerik ise saatte bir arka planda tazelenir; kullanıcı yeni bir derleme sürecini beklemez. Sürekli değişen, kullanıcıya özel veri gerektiren sayfalarda revalidate yerine her istekte sunucuda işleme tercih edilir.

Bir dashboard sayfası kullanıcının kendi verisini gösterdiği için her istekte taze veri ister; burada cache: "no-store" seçeneğiyle önbelleklemeyi tamamen kapatmak doğru yaklaşımdır. Bir ürün kataloğu sayfası ise binlerce kullanıcı tarafından aynı içerikle görüntülendiği için ISR ile saatte bir tazelemek hem sunucu yükünü azaltır hem de kullanıcıya neredeyse anlık yükleme sunar. Doğru stratejiyi seçmek, sayfanın kim tarafından ve ne sıklıkla görüntülendiğine bakmakla başlar.

API Rotaları

Next.js yalnızca ön yüz sağlamaz; app/api/ klasörü altında tanımladığınız dosyalar doğrudan API uç noktasına dönüşür. Ayrı bir Express sunucusu kurmadan, aynı proje içinde basit bir uç nokta yazmak mümkündür:

// app/api/kullanicilar/route.ts
import { NextResponse } from "next/server";

export async function GET() {
  const kullanicilar = [{ id: 1, ad: "Ayşe" }, { id: 2, ad: "Mehmet" }];
  return NextResponse.json(kullanicilar);
}

export async function POST(request: Request) {
  const veri = await request.json();
  // veritabanına kayıt işlemi burada yapılır
  return NextResponse.json({ basarili: true, veri }, { status: 201 });
}

Bu yaklaşım küçük ve orta ölçekli projelerde ayrı bir arka yüz servisi kurmadan tam işlevsel bir uygulama yazmanızı sağlar. Form gönderimleri, basit veritabanı sorguları ve üçüncü parti servis entegrasyonları çoğunlukla bu API rotaları üzerinden yönetilir. Daha büyük sistemlerde bu rotalar, mevcut bir arka yüz servisine giden bir köprü görevi görebilir.

Dinamik parametreli API rotaları da aynı [slug] mantığıyla çalışır. Örneğin belirli bir kullanıcının bilgisini döndüren bir uç nokta:

// app/api/kullanicilar/[id]/route.ts
export async function GET(
  request: Request,
  { params }: { params: { id: string } }
) {
  return Response.json({ id: params.id, ad: "Örnek Kullanıcı" });
}

Bu yapı sayesinde /api/kullanicilar/42 gibi bir istek params.id üzerinden doğrudan "42" değerine erişir; ayrı bir yönlendirme kütüphanesi kurmadan RESTful bir API tasarlamak mümkün olur.

Görsel ve Performans Optimizasyonu

Next.js'in Image bileşeni, görselleri manuel optimize etme zahmetini ortadan kaldırır. Standart bir <img> etiketi yerine bu bileşeni kullandığınızda görsel otomatik olarak uygun boyutlarda, modern formatlarda ve gecikmeli yükleme ile sunulur:

import Image from "next/image";

export default function Profil() {
  return (
    <Image
      src="/profil.jpg"
      alt="Kullanıcı profil fotoğrafı"
      width={400}
      height={400}
      priority
    />
  );
}

priority özelliği, sayfa açılır açılmaz görünen kritik görseller için gecikmeli yüklemeyi devre dışı bırakır. Bu, ilk ekranda görünen bir görsel için önemlidir; çünkü kullanıcı sayfayı açtığı anda boş bir alan görmemelidir. Kod bölme (code splitting) de otomatik çalışır. Kullanıcı yalnızca o an görüntülediği sayfa için gereken JavaScript'i indirir, uygulamanın tamamını değil.

Bu otomatik optimizasyonlar, elle yapılması saatler alacak işleri framework seviyesinde halleder. Geliştiricinin manuel olarak görsel boyutlandırma, format dönüştürme ya da gecikmeli yükleme yazması gerekmez; bu hem geliştirme süresini kısaltır hem de sonuçtaki performansı tutarlı kılar.

Paylaşılan Layout'lar

Next.js'in app/ dizini iç içe layout tanımlamayı doğal olarak destekler. Bir klasöre layout.tsx dosyası eklediğinizde, o klasör altındaki tüm sayfalar bu ortak arayüzü (navbar, footer, kenar menü gibi) otomatik olarak miras alır:

// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <nav>Blog Menüsü</nav>
      <main>{children}</main>
    </div>
  );
}

Bu yapı, her sayfada aynı navigasyon kodunu tekrar tekrar yazmanızı önler. Sayfa geçişlerinde yalnızca children kısmı yeniden render edilir; layout'un kendisi sayfa değiştikçe yeniden yüklenmez. Bu da geçişleri daha akıcı hissettirir. İç içe klasörlerde her seviye kendi layout'unu tanımlayabilir; böylece hem genel hem sayfa özelinde ortak bileşenler yönetilebilir.

Ne Zaman Next.js Seçilir

Next.js her projeye uymayabilir. Basit bir statik açılış sayfası için bu kadar kapsamlı bir framework gereksiz olabilir; küçük bir HTML dosyası ya da hafif bir statik site üretici çoğu zaman yeterlidir. İçerik ağırlıklı bir site, SEO'nun kritik olduğu bir e-ticaret platformu ya da hem ön yüz hem arka yüz gerektiren bir uygulama için ise Next.js'in sunduğu render esnekliği gerçek bir avantaj sağlar.

React bilgisi olan bir geliştirici için Next.js'e geçiş genellikle hızlı olur; bileşen modeli aynı kalır, üzerine yönlendirme ve render stratejileri eklenir. Yeni başlayanlar için resmi dokümantasyondaki adım adım öğreticiler, küçük bir proje üzerinden pratik yapmak için iyi bir başlangıç noktasıdır.

Aşağıdaki kısa liste, bir projede Next.js kullanmayı değerlendirirken sorulacak temel soruları özetliyor:

• Sayfaların çoğu arama motorları tarafından taranabilir olmak zorunda mı?
• Aynı projede hem ön yüz hem basit bir arka yüz mü yönetilecek?
• Arayüz görsel yoğun mu, otomatik optimizasyon fayda sağlar mı?
• Ekip zaten React biliyor mu, yoksa sıfırdan mı öğrenilecek?

Bu soruların çoğuna evet yanıtı veriyorsanız Next.js muhtemelen doğru seçimdir. Basit, statik ve tek sayfalık bir proje için ise daha hafif bir çözüm, gereksiz karmaşıklıktan kaçınmanızı sağlar.

Projeyi büyütürken de Next.js'in esnekliği devam eder. Küçük bir blog olarak başlayan bir proje, zamanla API rotalarıyla kullanıcı kimlik doğrulama eklenebilir, ISR ile ürün kataloğu yönetilebilir hâle gelebilir; framework değiştirilmeden ölçeklenir. Bu, projenin ilk günündeki basit ihtiyaçlarla altı ay sonraki karmaşık ihtiyaçlar arasında köprü kurmanızı sağlayan pratik bir özelliktir.

Yazan Celil Uyanikoglu

Bilgisayar mühendisiyim; 25 yılı aşkın süredir bilgi işlem sektörünün içindeyim. Bu blogu 2020'de, işimde her gün karşılaştığım sorunların çözümlerini bir yere yazmak için açtım: Linux, güvenlik, tarayıcılar, yapay zeka araçları. Yazdığım her rehberi önce kendi bilgisayarımda ya da sunucumda deniyorum; çalıştığını görmediğim adımı yayınlamam. Hatalı ya da eskimiş bir şey görürsen iletişim sayfasından yaz — düzeltirim.