Dosya Sistemi Yönlendirmesinin Temelleri
Next.js'te dosya sistemi tabanlı yönlendirmenin temel kavramlarını ve temel sayfalar ile yolların nasıl oluşturulacağını anlayın.
Dosya Sistemi Yönlendirmesinin Temelleri, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Intro to File-System Routing
Next.js routes by your file system — your folder and file layout directly defines your URLs. Files become pages, folders become URL segments.
The Core `app` Directory
Every route lives inside the special app directory — the root of your site's structure. Anything you put there shapes the routing.
Creating a Root Page
A route needs a page.js that default-exports a React component. Place it directly in app/ and it becomes your homepage at /.
Hello Next.js Homepage!
Here's a minimal app/page.js. This component renders at your root URL / — the homepage visitors land on first.
export default function HomePage() {
return (
<div>
<h1>Welcome to CoddyKit!</h1>
<p>This is your Next.js homepage.</p>
</div>
);
}Folders for Nested Paths
Want a /dashboard route? Make a dashboard folder in app/ and drop a page.js inside. The folder name becomes the URL segment.
The Dashboard Page
This code goes in app/dashboard/page.js. Visit /dashboard and Next.js renders exactly this component.
export default function DashboardPage() {
return (
<div>
<h1>Your Dashboard</h1>
<p>Here you'll find all your important stats.</p>
</div>
);
}Deeper Nested Routes
Nest as deep as you like — each folder adds a URL segment. So app/products/electronics/page.js maps to /products/electronics. Clean and logical.
Shared UI with `layout.js`
A layout.js defines shared UI that wraps the pages in its folder — perfect for nav bars, footers, and sidebars that stay put across routes.
Route Mapping Quiz
Imagine you have a file located at app/blog/posts/page.js within your Next.js project. What URL path would this file correspond to?
File-System Routing Recap
Recap: the app directory roots all routes, page.js defines a route's UI, folders create nested segments, and layout.js shares UI across them.
Sıkça Sorulan Sorular
“Dosya Sistemi Yönlendirmesinin Temelleri” dersi ücretsiz mi?
Evet — “Dosya Sistemi Yönlendirmesinin Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
“Dosya Sistemi Yönlendirmesinin Temelleri” dersinde ne öğreneceğim?
Next.js'te dosya sistemi tabanlı yönlendirmenin temel kavramlarını ve temel sayfalar ile yolların nasıl oluşturulacağını anlayın. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Dosya Sistemi Yönlendirmesinin Temelleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Proje Kurulumu ve CLI
- Dosya Sistemi Yönlendirmesinin Temelleri
- Sayfalar ve Düzenlere Genel Bakış
- Next.js Uygulamanızı Biçimlendirme