Sayfalar ve Düzenlere Genel Bakış
Sayfalar ile düzenler arasındaki ayrımı ve bunların Next.js uygulamanızın kullanıcı arayüzü yapısını nasıl oluşturduğunu keşfedin.
Sayfalar ve Düzenlere Genel Bakış, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 3. 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.
Welcome to Pages & Layouts
Next.js UI rests on two ideas: Pages and Layouts. This lesson shows what each one is and how they combine to build your interface.
What is a Page?
A Page is a React component that renders the UI for one route. Default-export it from a page.js file and that route gets its own view.
Creating a Simple Page
Here's a basic page.js that renders the home route /. A page is just a default-exported component — nothing more.
// app/page.js
export default function HomePage() {
return (
<h1>Welcome to My App!</h1>
);
}What is a Layout?
A Layout is UI shared across pages — a wrapper that gives consistent structure. Export it from layout.js; it takes a children prop for nested content.
The Root Layout
Every App Router app needs a root layout at app/layout.js. It wraps the whole app, including the html and body tags — the place for global styles and metadata.
// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Nested Layouts
Add a layout.js inside any folder for a nested layout. An app/dashboard/layout.js wraps every page under dashboard — unique shared UI per section.
How They Combine
Next.js nests layouts automatically: a page renders inside its parent layout's children, that inside its parent's, all the way up to the root.
Example: A Blog Section
Picture a blog: blog/layout.js gives a shared nav, blog/page.js is the index, and blog/first-post/page.js a post — each nesting upward into the root.
Code: Blog Layout Example
This blog/layout.js wraps every /blog page with a header, nav, and footer — shared chrome that stays consistent across the section.
// app/blog/layout.js
export default function BlogLayout({ children }) {
return (
<div>
<header><h1>My Awesome Blog</h1></header>
<nav>
<a href="/blog">Home</a> | <a href="/blog/archive">Archive</a>
</nav>
<main>{children}</main>
<footer><p>© 2023 CoddyKit Blog</p></footer>
</div>
);
}Code: Blog Page Example
And here's blog/page.js. Its content renders right where {children} sits inside BlogLayout — page slotting into layout.
// app/blog/page.js
export default function BlogHomePage() {
return (
<section>
<h2>Welcome to the Blog Homepage!</h2>
<p>Discover our latest articles and insights.</p>
</section>
);
}Pages vs. Layouts Quiz
Let's check your understanding of Next.js pages and layouts.
Recap: Pages & Layouts
Recap: Pages (page.js) render a route's unique UI, Layouts (layout.js) share UI across routes, and Next.js nests them via children.
Sıkça Sorulan Sorular
“Sayfalar ve Düzenlere Genel Bakış” dersi ücretsiz mi?
Evet — “Sayfalar ve Düzenlere Genel Bakış” 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.
“Sayfalar ve Düzenlere Genel Bakış” dersinde ne öğreneceğim?
Sayfalar ile düzenler arasındaki ayrımı ve bunların Next.js uygulamanızın kullanıcı arayüzü yapısını nasıl oluşturduğunu keşfedin. 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 3. dersidir.
“Sayfalar ve Düzenlere Genel Bakış” 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