Next.js nedir?

Next.js'in React tabanlı bir framework olduğunu öğrenirsin.

Next.js nedir?

Next.js, React tabanlı bir framework'tür. Dosya tabanlı rota, SSR (sunucu tarafı çizim) ve SSG (statik üretim) gibi özellikleri React'in üzerine ekler.

Bir React uygulamasını sıfırdan kurmak yerine Next.js kullanırsan; rota, optimizasyon ve veri çekme hazır gelir. app/ dizini rota köküdür.

Büyük şirketler (Vercel, TikTok, Netflix) Next.js'i üretimde kullanır. Bu derslerde App Router yaklaşımını öğreneceğiz.

app/ dizini

App Router'da her klasör bir URL segmentidir. app/page.js kök yolu (/), app/about/page.js ise /about yolunu temsil eder.

Her klasörün page.js'i o yolun içeriğini verir. layout.js ise sayfayı saran çerçeveyi (nav, footer) tanımlar.

Bu yapı, kodu URL'e göre düzenler; ayrı bir rota config dosyası gerekmez.

Uygulama İlk Next.js sayfası

Home bileşeni yaz: <main> içinde <h1>Hoş geldiniz</h1> ve <p>Next.js ile başlıyoruz.</p> bas. export default Home.

Örnek çözümü göster

// app/page.js
export default function Home() {
  return (
    <main>
      <h1>Hoş geldiniz</h1>
      <p>Next.js ile başlıyoruz.</p>
    </main>
  );
}

Kendini test et

Next.js'in en bilinen özelliği nedir?
- Dosya tabanlı rota
- Yalnızca CSS araçları
- Tarayıcı uzantısı
- Veritabanı sunucusu
Cevabı göster

Dosya tabanlı rota — Next.js dosya tabanlı rotalarla gelir.

Kök yol dosyası

// app/____.js
export default function Home() {
  return <h1>Merhaba</h1>;
}

Cevabı göster

// app/page.js
export default function Home() {
  return <h1>Merhaba</h1>;
}

Next.js nedir: kavramları eşleştir

app/page.js

Kök yol
app/about/page.js

/about
app/layout.js

Çerçeve
framework

Çatı

Sıradaki ders: App Router

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler