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

Membuat Route dan Layout

Membuat route dashboard dan courses kecil dengan page.tsx serta layout bersama di App Router project lokal.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membuat folder route dan page.tsx pada local project
Menambahkan layout bersama yang menerima children
Membaca hubungan folder app dengan URL browser
Menguji route lokal setelah file dibuat

Next.jsApp RouterRoutesLayoutsLocal Workflow

Isi lesson

6 blok

1.
Gunakan project lokal untuk melihat folder menjadi URLBelum selesaiWajib
2.
Route tree dashboard kecilBelum selesaiWajib
3.
Layout dashboard menerima childrenBelum selesaiWajib
4.
Bangun route pada project lokalBelum selesaiWajib
5.
Route 404 atau layout tidak terlihatBelum selesaiOpsional
6.
RingkasanBelum selesaiWajib

Gunakan project lokal untuk melihat folder menjadi URL

Wajib

Sekarang hubungkan struktur folder dan browser. Buat route dashboard dengan page utama serta child route courses. Root layout sudah disediakan oleh create-next-app. Tambahkan layout dashboard hanya untuk navigation atau shell yang dibagikan dashboard dan child route-nya.

Jaga feature tetap kecil. Tujuannya bukan membuat desain akhir, melainkan membuktikan bahwa page.tsx membuat route, layout.tsx membungkus children, dan folder bersarang membentuk URL. Setelah membuat file, buka route tersebut di browser lokal untuk memastikan struktur benar-benar bekerja.

Bagian ini memengaruhi progres lesson.

Route tree dashboard kecil

Wajib

bash

app/
├── layout.tsx
├── page.tsx
└── dashboard/
    ├── layout.tsx
    ├── page.tsx
    └── courses/
        └── page.tsx

app/page.tsx menjadi `/`. app/dashboard/page.tsx menjadi `/dashboard`, dan app/dashboard/courses/page.tsx menjadi `/dashboard/courses`. dashboard/layout.tsx membungkus dashboard page dan courses page tanpa menambah URL.

Bagian ini memengaruhi progres lesson.

Layout dashboard menerima children

Wajib

tsx

import type { ReactNode } from "react";

type DashboardLayoutProps = {
  children: ReactNode;
};

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

Layout hanya memberi shell bersama. Content khusus `/dashboard` dan `/dashboard/courses` tetap berada di page.tsx masing-masing. Kamu boleh menyesuaikan markup selama children tetap memiliki area yang jelas.

Bagian ini memengaruhi progres lesson.

Bangun route pada project lokal

Wajib

Kerjakan di perangkat kamu:

Buat `app/dashboard/page.tsx` dengan heading dashboard kecil.
Buat `app/dashboard/layout.tsx` yang menerima children dan navigation sederhana.
Buat `app/dashboard/courses/page.tsx` dengan daftar atau pesan course sederhana.
Simpan file saat dev server masih berjalan.
Buka `/dashboard` dan `/dashboard/courses` di browser lokal.
Pastikan navigation dari layout tampil pada kedua route.

FluentStack tidak dapat melihat file dan URL pada perangkat kamu. Tandai selesai setelah dua URL benar-benar dapat dibuka.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Opsional

Route 404 atau layout tidak terlihat

Cek nama file dan lokasi terlebih dahulu. Route memerlukan `page.tsx`, bukan `DashboardPage.tsx`. Pastikan folder courses berada di dalam dashboard untuk URL `/dashboard/courses`. Bila layout tidak terlihat, pastikan default export layout menerima dan merender `children`.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Folder di app membentuk segment URL, sedangkan page.tsx membuat route dapat dibuka.
layout.tsx memberi shell bersama dan merender children dari page atau child route.
Project lokal memberi bukti langsung bahwa struktur folder benar-benar menjadi route browser.
Berikutnya, kamu akan menambahkan loading dan error UI pada route courses.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Gunakan project lokal untuk melihat folder menjadi URL.

Memuat progres Review module