Next.js 15 Fullstack (App Router + Server Actions) · Pelajaran

Ikhtisar Halaman & Tata Letak

Jelajahi perbedaan antara halaman dan tata letak, serta cara keduanya berpadu membentuk struktur UI aplikasi Next.js Anda.

Pelajaran 3 dari 412 langkah

Ikhtisar Halaman & Tata Letak adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Next.js 15 Fullstack (App Router + Server Actions), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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>&copy; 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.

Jawab di pelajaran interaktif

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.

Gratis untuk memulai

Belajar TypeScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Ikhtisar Halaman & Tata Letak” gratis?

Ya — teks lengkap “Ikhtisar Halaman & Tata Letak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Next.js 15 Fullstack (App Router + Server Actions), upgrade ke CoddyKit PRO. Kursus Next.js 15 Fullstack (App Router + Server Actions) mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Ikhtisar Halaman & Tata Letak”?

Jelajahi perbedaan antara halaman dan tata letak, serta cara keduanya berpadu membentuk struktur UI aplikasi Next.js Anda. Kamu berlatih Next.js 15 Fullstack (App Router + Server Actions) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Next.js 15 Fullstack (App Router + Server Actions)?

Tidak diperlukan pengalaman sebelumnya. Next.js 15 Fullstack (App Router + Server Actions) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Ikhtisar Halaman & Tata Letak” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Next.js 15 Fullstack (App Router + Server Actions) ini?

Ya. Setiap pelajaran Next.js 15 Fullstack (App Router + Server Actions) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Next.js 15 Fullstack (App Router + Server Actions)