Lewati ke konten utama
Numekara
Konsultasi GratisKontak

F4 · Modul 14

Next.js App Router

51 langkah singkat, dari mudah sampai tantangan.

  1. Level 1

    Kenal

  2. Level 2

    Paham

  3. Level 3

    Terapkan

  4. Level 4

    Tantangan

  5. Level 5

    Pendalaman

Intinya

  • Next.js menambahkan rute dari folder, render di server, route handler, build, dan deploy di atas React. API-nya berubah cepat: baca dokumentasi versi terpasang di node_modules/next/dist/docs/, bukan ingatan.
  • Komponen bawaan adalah Server Component (boleh async, kodenya tidak dikirim). "use client" menandai batas: kode menyeberang lewat impor, data lewat props yang bisa diserialisasi.
  • searchParams dan params berupa Promise di Next.js 16; isinya data pengguna yang harus divalidasi. Halaman memanggil fungsi data langsung, bukan route handler miliknya sendiri.
  • Route handler adalah fungsi Request → Response standar yang bisa diuji sebagai fungsi di Node; galat memakai Problem Details dengan application/problem+json.
  • Server mengirim HTML yang sudah jadi plus RSC Payload, lalu peramban menghidrasi Client Component; next build menandai rute statis (○) dan dinamis (ƒ).

Sebelum mulai

±4 jam, ditambah ±1 jam Lab Codespaces.

Modul ini memakai materi di bawah. Belum yakin? Ulas dulu bagian yang disebut.

Hasil belajar: menjelaskan apa yang ditambahkan framework di atas React (rute, render di server, bundler, endpoint API); membaca dokumentasi Next.js yang sesuai versi terpasang (node_modules/next/dist/docs/) alih-alih mengandalkan ingatan; memetakan folder app/ ke URL (page, layout, loading, error, route, segmen dinamis, route group, folder privat); membedakan Server Component dan Client Component serta menempatkan batas "use client"; memuat data langsung di Server Component dengan searchParams yang berupa Promise; menulis route handler GET(request: Request) yang mengembalikan JSON atau Problem Details, dan POST yang memvalidasi badan JSON (201, 400 dengan errors, 415), lalu mengujinya sebagai fungsi biasa di Node; membaca keluaran next build (statis ○ dan dinamis ƒ); serta menjelaskan apa yang dikirim server ke peramban (HTML dan RSC Payload).

Proyek: Laporan Warung langkah 14: hitungRingkasan, route handler GET /api/ringkasan, /api/produk, /api/transaksi, POST /api/kasbon, dan halaman /laporan di aplikasi Next.js laporan-warung (kontrak proyek §3, §4).

Istilah di modul ini (44)

Ketuk istilah untuk melihat penjelasannya. Di materi, istilah bergaris titik membuka kartu yang sama. Semua istilah course

Bahan modul

Semua kode, latihan, dan data modul ini dalam satu zip, untuk dijalankan di laptop atau Google Colab.

  • 9 berkas latihan + tes
  • 1 berkas data
Semua data course (data-f4.zip) Cara menjalankan di laptop
Lihat isi zip
  • BACA-DULU.txt
  • latihan_f4_14_8.ts
  • latihan_f4_14_1.ts
  • latihan_f4_14_6.tsx
  • latihan_f4_14_2.ts
  • latihan_f4_14_3.ts
  • latihan_f4_14_7.ts
  • latihan_f4_14_4.ts
  • latihan_f4_14_5.ts
  • latihan_f4_14_9.ts
  • laporan.json