FluentStack

Uji Kompetensi App Directory and Routing

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 10: Next.js App RouterAdvanced95 menitBahasa Indonesia

Uji Kompetensi App Directory and Routing

Checkpoint kesiapan membaca dan merencanakan route tree App Router yang kecil dengan page, layout, nested route, dynamic segment, dan route group.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengecek pemahaman folder dan file route App Router
  • Menyusun route tree yang menghasilkan URL sesuai kebutuhan
  • Menjelaskan alasan page, layout, dynamic segment, dan route group dipakai
Next.jsApp RouterRoutingAssessment

Isi lesson

6 blok
  1. 1.
    Checkpoint: baca struktur dulu, baru menulis featureBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Baca file conventions dari docs Next.jsBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: baca struktur dulu, baru menulis feature

Wajib

Uji Kompetensi ini memeriksa apakah kamu dapat melihat folder tree App Router lalu menjelaskan URL dan peran setiap file khusus. Kamu akan menyusun route map kecil untuk marketing page, dashboard shell, course detail dinamis, dan route group.

Kamu belum perlu middleware, parallel route, intercepting route, server action, authentication, database, caching strategy, atau deployment. Fokusnya tetap pada mapping folder dan file ke route yang dapat dipahami tim.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi App Directory and Routing

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Apa peran utama app/page.tsx pada App Router?

Coding practice

WajibDibuka di workspace khusus

Build learning route tree checkpoint

Susun route map kecil untuk marketing, dashboard shell, course detail dinamis, dan route groups tanpa membuat URL yang keliru.

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.

10 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis route architecture note singkat untuk feature learning app dengan format berikut: - Route yang perlu tersedia: - Folder dan file page.tsx yang membuat setiap route dapat diakses: - Layout yang dibagikan dan area yang dibungkusnya: - Dynamic segment yang dipakai serta nilai params-nya: - Route group yang dipakai atau alasan tidak memakainya: - Satu risiko path conflict atau file placement yang perlu dihindari: Tulis sebagai catatan implementasi untuk engineer lain, bukan daftar istilah.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/520 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Baca file conventions dari docs Next.js

Gunakan docs resmi ini untuk memeriksa route tree sebelum membuatnya di Local Next.js App. Fokus pada nama file, folder segment, dan URL yang dihasilkan.

Next.js

App Router

Fokus baca

  • peran App Router
  • hubungan project structure dan routing
  • bagian dasar yang perlu dipelajari berikutnya

Abaikan dulu

  • Server Functions
  • advanced navigation optimization
Buka dokumentasi

Next.js

Layouts and Pages

Fokus baca

  • page.tsx sebagai page route
  • layout.tsx dan children
  • nested folders untuk nested route

Abaikan dulu

  • Link optimization details
Buka dokumentasi

Next.js

Dynamic Route Segments

Fokus baca

  • folder [slug]
  • params pada page
  • satu template untuk URL detail berbeda

Abaikan dulu

  • catch-all segments
  • generateStaticParams
Buka dokumentasi

Next.js

Route Groups

Fokus baca

  • folder dalam tanda kurung
  • organization tanpa URL segment
  • path conflict antar group

Abaikan dulu

  • multiple root layouts
Buka dokumentasi

Aksi setelah membaca

Di Local Next.js App, buat satu route tree kecil dengan home page, dashboard layout, dashboard settings page, dan course detail [slug]. Sebelum menjalankan app, tulis prediksi URL setiap page lalu bandingkan dengan route yang benar di browser.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • app directory memakai folder dan file khusus untuk membentuk App Router route.
  • page.tsx membuat UI route; layout.tsx membungkus page dan child route pada segmentnya.
  • Nested folder, [slug], dan route group masing-masing memiliki dampak URL yang berbeda.
  • Route tree yang jelas memudahkan feature tumbuh tanpa kehilangan batas file dan URL.
  • Berikutnya, Server Components and Client Components akan menjelaskan batas rendering dan interactivity di dalam route tersebut.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: baca struktur dulu, baru menulis feature.

Memuat progresReview module