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

Route Handlers

Membuat Route Handler GET kecil di app directory yang mengembalikan JSON dengan Web Response API.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan fungsi route.ts pada App Router
Membuat handler GET sederhana dengan Response.json
Membedakan route.ts dari page.tsx pada route segment yang sama

Next.jsRoute HandlersHTTPGETJSON

Isi lesson

5 blok

1.
Route Handler adalah endpoint kecil di dalam app directoryBelum selesaiWajib
2.
Endpoint GET untuk ringkasan courseBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Route Handler adalah endpoint kecil di dalam app directory

Wajib

Route Handler memakai file khusus route.ts di dalam app directory untuk menangani request HTTP dengan Web Request dan Response APIs. Untuk contoh awal, gunakan GET yang mengembalikan JSON sederhana. Ini berguna untuk memahami bahwa App Router dapat memiliki endpoint kecil tanpa membuat server Express terpisah.

Route Handler bukan page UI dan tidak ikut dirender di layout seperti page.tsx. Jangan menaruh route.ts pada segment yang sama dengan page.tsx karena keduanya akan mengambil alih route yang sama. Gunakan segment API seperti app/api/course-summary/route.ts agar URL endpoint dan UI route tetap jelas terpisah.

Bagian ini memengaruhi progres lesson.

Endpoint GET untuk ringkasan course

Wajib

// app/api/course-summary/route.ts
export async function GET() {
  return Response.json({
    totalCourses: 3,
    nextLesson: "Server Components",
  });
}

File ini menangani GET /api/course-summary dan mengembalikan JSON. Belum ada database, auth, fetch eksternal, atau cache policy pada contoh ini. Itu disengaja agar kamu dapat fokus pada hubungan antara lokasi file, method GET, dan Response.json.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Create course summary route handler

Lengkapi app/api/course-summary/route.ts agar menyediakan Route Handler GET kecil yang mengembalikan JSON ringkasan course.

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.

4 cek otomatis5 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Struktur mana yang benar untuk endpoint GET /api/course-summary?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

route.ts membuat request handler di dalam app directory.
GET sederhana dapat mengembalikan JSON melalui Response.json.
Pisahkan endpoint dari UI route dan jangan konflik dengan page.tsx pada segment yang sama.
Berikutnya, kamu akan menambahkan title dan description route melalui Metadata API.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Route Handler adalah endpoint kecil di dalam app directory.

Memuat progres Review module