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

Tata Letak dan Komponen Halaman

Kuasai pembuatan tata letak bertingkat dan komponen halaman dalam struktur App Router untuk UI yang terorganisasi.

Pelajaran 1 dari 411 langkah

Tata Letak dan Komponen Halaman adalah pelajaran Next.js 15 Fullstack (App Router + Server Actions) gratis di CoddyKit. Ini adalah pelajaran 1 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.

App Router UI Structure

The Next.js App Router organizes your application's user interface (UI) using special files: layout.js and page.js.

This structured approach helps you build consistent UIs that are easy to manage and scale across your mobile app.

What is a Layout?

A layout defines shared UI for a segment of routes. Think of it as a wrapper that surrounds your pages and other layouts.

Layouts can contain common elements like navigation bars, footers, or sidebars.
They don't re-render when navigating between pages within the same layout, improving performance.

The Root Layout File

Every App Router project must have a root layout file named app/layout.js at the top level of your app directory.

This layout defines the essential HTML structure, including the <html> and <body> tags, for your entire application.

Basic Root Layout Code

The children prop in a layout component is crucial. It represents the content of the nested layouts or pages below it.

This example shows a basic root layout with a header and footer.

app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>My App Header</header>
        {children}
        <footer>My App Footer</footer>
      </body>
    </html>
  );
}

What is a Page Component?

A page component is defined by a page.js file. This file contains the unique UI content specifically for a given route segment.

Each URL path (e.g., /, /about) typically has its own page.js.
It renders within its parent layout(s), filling the {children} slot.

Basic Page Component Code

This app/page.js file creates the UI for your root URL (/). It will be automatically wrapped by your app/layout.js.

app/page.js
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to CoddyKit!</h1>
      <p>Start learning Next.js 15 today!</p>
    </main>
  );
}

Creating Nested Layouts

You can create nested layouts by simply adding a layout.js file inside any subfolder within your app directory.

This allows you to apply shared UI to specific sections of your app, like a dashboard or user profile, while inheriting the root layout's structure.

Nested Layout Example

Here's how you'd create a nested layout for a /dashboard route. This dashboard layout wraps all pages within the /dashboard segment.

app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <section>
      <nav>
        <p>Dashboard Navigation</p>
      </nav>
      {children} {/* This will be app/dashboard/page.js */}
    </section>
  );
}

app/dashboard/page.js
export default function DashboardPage() {
  return (
    <h1>Dashboard Overview</h1>
  );
}

Layouts & Pages Hierarchy

The rendering order for your UI components flows from the outermost layout to the innermost page:

app/layout.js (Root Layout)
app/dashboard/layout.js (Nested Layout, if applicable)
app/dashboard/page.js (Specific Page Content)

Each layout receives the next level of UI as its children prop.

Quick Check

Test your knowledge on how Next.js App Router structures UI.

Jawab di pelajaran interaktif

Recap: Layouts & Pages

You've learned how Next.js App Router uses layout.js files for shared UI and page.js files for unique content specific to a route.

Understanding this fundamental structure is key to building organized and scalable Next.js applications!

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 “Tata Letak dan Komponen Halaman” gratis?

Ya — teks lengkap “Tata Letak dan Komponen Halaman” 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 “Tata Letak dan Komponen Halaman”?

Kuasai pembuatan tata letak bertingkat dan komponen halaman dalam struktur App Router untuk UI yang terorganisasi. 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 1 dari 4.

Berapa lama pelajaran “Tata Letak dan Komponen Halaman” 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)