FluentStack

Uji Kompetensi Next.js Route Behavior

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

Uji Kompetensi Next.js Route Behavior

Checkpoint kesiapan untuk menambahkan loading UI, error recovery, Route Handler, metadata, dan environment variable yang aman pada route kecil.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Memetakan file khusus untuk route behavior kecil
  • Membedakan fallback loading, recovery error, endpoint GET, dan metadata
  • Menjelaskan pemisahan environment value private dan public
Next.jsRoute BehaviorReadiness CheckpointConfiguration

Isi lesson

6 blok
  1. 1.
    Checkpoint: lengkapi route tanpa mencampur tanggung jawabBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan dokumentasi resmi saat menambah perilaku routeBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: lengkapi route tanpa mencampur tanggung jawab

Wajib

Route App Router tidak hanya terdiri dari page.tsx. loading.tsx memberi fallback saat content belum siap, error.tsx memberi recovery saat render gagal, route.ts menangani request HTTP, metadata menjelaskan route pada head, dan .env.local menyimpan konfigurasi lokal di luar source code. Setiap file punya peran yang berbeda.

Checkpoint ini menguji apakah kamu dapat memetakan file tersebut pada feature courses kecil. Kamu tidak diminta mengatur cache, database, auth, Server Actions, atau deployment. Fokuskan jawaban pada file placement, UI yang berguna, GET sederhana, metadata title/description, serta value env yang aman atau tidak aman untuk browser.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Next.js Route Behavior

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 fungsi app/courses/loading.tsx?

Coding practice

WajibDibuka di workspace khusus

Build course route behavior checkpoint

Susun route feature map untuk courses yang memiliki loading UI, error recovery, endpoint GET, metadata, dan environment variable private yang tidak di-commit.

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.

8 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis 70-130 kata sebagai implementation note untuk route courses. Jelaskan lokasi loading.tsx dan error.tsx, apa yang dilakukan tombol recovery, lokasi endpoint GET, metadata yang ditambahkan, serta satu value env yang harus tetap private.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/80 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan dokumentasi resmi saat menambah perilaku route

Buka hanya halaman yang sesuai dengan file yang sedang kamu buat. Dokumentasi ini menjadi referensi saat kamu melanjutkan Local Next.js App, bukan daftar topik yang harus dibaca sekaligus.

Next.js Docs

loading.js file convention

Fokus baca

  • Lokasi loading.tsx di route segment.
  • Fallback ringan yang muncul saat content route belum siap.

Abaikan dulu

  • Streaming status code dan Suspense custom boundaries.
Buka dokumentasi

Next.js Docs

Error Handling

Fokus baca

  • error.tsx sebagai boundary untuk error render tak terduga.
  • Client Component dan callback recovery pada error UI.

Abaikan dulu

  • Server Functions, global errors, dan component-level error boundary.
Buka dokumentasi

Next.js Docs

Route Handlers

Fokus baca

  • Konvensi route.ts di dalam app directory.
  • GET sederhana dengan Response.json.
  • Konflik route.ts dan page.tsx pada segment yang sama.

Abaikan dulu

  • Caching, database, middleware, dan HTTP method selain GET.
Buka dokumentasi

Next.js Docs

Metadata and OG images

Fokus baca

  • metadata object untuk title dan description.
  • Metadata API hanya di Server Components.

Abaikan dulu

  • generateMetadata, Open Graph image, dan metadata streaming.
Buka dokumentasi

Next.js Docs

Environment Variables

Fokus baca

  • .env.local dan process.env.
  • NEXT_PUBLIC_ hanya untuk value yang memang boleh tersedia di browser.
  • Menghindari commit .env files yang berisi konfigurasi lokal atau secret.

Abaikan dulu

  • Runtime environment strategy, test env, dan production deployment configuration.
Buka dokumentasi

Aksi setelah membaca

Di Local Next.js App, tambahkan app/courses/loading.tsx dan app/courses/error.tsx, buat satu GET route handler di app/api, tambahkan metadata title/description pada page, lalu cek bahwa .env.local tidak masuk commit Git.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Kamu siap lanjut bila dapat memilih file khusus sesuai perilaku route yang dibutuhkan.
  • loading.tsx dan error.tsx memberi feedback serta recovery yang jelas pada route segment.
  • route.ts, metadata, dan env memiliki tanggung jawab terpisah dari page UI.
  • Module berikutnya adalah Local Next.js App, tempat kamu menerapkan route, layout, loading, error UI, metadata, dan Git dalam project nyata.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: lengkapi route tanpa mencampur tanggung jawab.

Memuat progresReview module