Next.js nedir?
- React kursu
- İleri seviye
- Ders 1/56
- 4 dk
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.
Başlangıç kodu
// app/page.js
// Home bileşenini buraya yazÖrnek çözüm
// app/page.js
export default function Home() {
return (
<main>
<h1>Hoş geldiniz</h1>
<p>Next.js ile başlıyoruz.</p>
</main>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Next.js'in en bilinen özelliği nedir?
- Dosya tabanlı rota Doğru cevap
- Yalnızca CSS araçları
- Tarayıcı uzantısı
- Veritabanı sunucusu
Açıklama: Next.js dosya tabanlı rotalarla gelir.
2 Kök yol dosyası
// app/____.js
export default function Home() {
return <h1>Merhaba</h1>;
}// app/page.js
export default function Home() {
return <h1>Merhaba</h1>;
}Açıklama: app/page.js kök yolu tanımlar.
3 Next.js nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
app/page.js |
Kök yol |
app/about/page.js |
/about |
app/layout.js |
Çerçeve |
framework |
Çatı |