Advanced · Level 10: Next.js App RouterAdvanced65 menitBahasa Indonesia

page.tsx and layout.tsx

Membedakan UI khusus route pada page.tsx dari UI bersama yang dijaga layout.tsx.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan tanggung jawab page.tsx dan layout.tsx
Membuat layout dashboard yang menerima children
Memilih UI yang seharusnya dibagikan atau tetap berada di page

Next.jsLayoutsPagesComposition

Isi lesson

5 blok

1.
Page menampilkan tujuan route, layout menjaga shell bersamaBelum selesaiWajib
2.
app/dashboard/layout.tsx membungkus dashboard routesBelum selesaiWajib
3.
app/dashboard/page.tsx menampilkan content overviewBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Page menampilkan tujuan route, layout menjaga shell bersama

Wajib

page.tsx adalah UI untuk route tertentu. Sebagai contoh, app/dashboard/page.tsx menampilkan overview dashboard. layout.tsx adalah UI bersama yang membungkus page dan child route dalam segment yang sama. Dashboard layout dapat menampilkan navigation atau heading area yang tetap tersedia saat user berpindah dari /dashboard ke /dashboard/settings.

Jangan memindahkan semua markup ke layout hanya karena ia terlihat di satu page saat ini. Layout sebaiknya menampung shell yang memang dibagi oleh beberapa child route. Content khusus overview tetap lebih mudah dipahami ketika berada di page.tsx.

Bagian ini memengaruhi progres lesson.

app/dashboard/layout.tsx membungkus dashboard routes

Wajib

tsx

import type { ReactNode } from "react";

type DashboardLayoutProps = {
  children: ReactNode;
};

export default function DashboardLayout({ children }: DashboardLayoutProps) {
  return (
    <section aria-label="Dashboard area">
      <aside>
        <nav aria-label="Dashboard navigation">Dashboard navigation</nav>
      </aside>
      <main>{children}</main>
    </section>
  );
}

children adalah page atau nested layout yang berada di bawah app/dashboard. Layout tidak perlu mengetahui apakah children saat ini adalah overview atau settings. Ia hanya menyediakan shell bersama dan area untuk content route tersebut.

Bagian ini memengaruhi progres lesson.

app/dashboard/page.tsx menampilkan content overview

Wajib

tsx

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard overview</h1>
      <p>Lihat progres belajar dan lanjutkan lesson berikutnya.</p>
    </div>
  );
}

DashboardPage hanya menangani content route /dashboard. Saat file layout.tsx berada di folder yang sama, Next.js merender content ini di dalam children layout dashboard.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Build dashboard layout shell

Lengkapi app/dashboard/layout.tsx agar menyediakan navigation shell dan area children untuk dashboard routes.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

page.tsx memberi UI untuk satu route yang dapat diakses.
layout.tsx memberi shell bersama dan menerima children dari page atau nested layout.
Letakkan UI bersama di layout hanya bila child route memang membutuhkannya bersama-sama.
Berikutnya, kamu akan melihat bagaimana folder bersarang membentuk URL yang bersarang juga.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Page menampilkan tujuan route, layout menjaga shell bersama.

Memuat progres Review module