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

Passing Props Across Boundaries

Mengirim data sederhana dari Server Component ke Client Component melalui props yang dapat diserialisasi.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Meneruskan data sederhana dari server parent ke client child
Mengenali props yang aman untuk contoh awal boundary
Menjelaskan mengapa function callback bukan props server-to-client biasa

Next.jsPropsServer ComponentsClient ComponentsData Flow

Isi lesson

5 blok

1.
Server parent dapat memberi data, client child menangani interaksiBelum selesaiWajib
2.
Server page mengirim array string ke filter clientBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Jangan meneruskan event handler dari server parentBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Server parent dapat memberi data, client child menangani interaksi

Wajib

Pola paling mudah untuk dibaca adalah server parent menyiapkan data, lalu Client Component menerima data itu melalui props dan menambahkan behavior. Mulailah dengan data sederhana seperti string, number, array, atau plain object kecil. Next.js mengirim props dari server ke client dalam bentuk yang harus dapat diserialisasi oleh React.

Pada tahap ini, jangan menghafal semua detail serialisasi. Gunakan aturan praktis: kirim nilai data, bukan function callback, instance class, atau objek browser. Event handler sebaiknya didefinisikan di dalam Client Component yang memang menangani interaksi tersebut.

Bagian ini memengaruhi progres lesson.

Server page mengirim array string ke filter client

Wajib

tsx

// app/dashboard/page.tsx (Server Component by default)
import CourseFilter from "./course-filter";

const courses = ["React Fundamentals", "Next.js App Router", "Testing UI"];

export default function DashboardPage() {
  return (
    <main>
      <h1>Course saya</h1>
      <CourseFilter courses={courses} />
    </main>
  );
}

// app/dashboard/course-filter.tsx (Client Component)
"use client";

type CourseFilterProps = {
  courses: string[];
};

export default function CourseFilter({ courses }: CourseFilterProps) {
  return <p>{courses.length} course siap difilter di browser.</p>;
}

courses adalah array string, sehingga contoh ini aman sebagai data yang dikirim melalui props. DashboardPage tetap memegang content route, sedangkan CourseFilter memiliki tempat yang jelas untuk menambah state dan event handler. Client child tidak perlu mengetahui bagaimana parent memperoleh data tersebut.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Pass course data to client filter

Lengkapi app/dashboard/page.tsx agar Server Component menyiapkan course data sederhana dan meneruskannya ke CourseFilter client child.

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.

5 cek otomatis5 checklist

Belum selesaiBuka practice

Peringatan

Wajib

Jangan meneruskan event handler dari server parent

Props untuk Client Component harus dapat diserialisasi. Function seperti onSelect tidak cocok dikirim sebagai props biasa dari Server Component ke Client Component. Buat handler di component client, atau rancang ulang interaksi setelah kamu memahami pola yang relevan di module berikutnya. Untuk sekarang, kirim data sederhana dan jaga arah data tetap jelas.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Server Component dapat meneruskan data sederhana ke Client Component melalui props.
Gunakan string, number, array, dan plain object kecil sebagai contoh aman untuk tahap ini.
Event handler dibuat pada sisi client, bukan dikirim dari server parent sebagai function props biasa.
Berikutnya, kamu akan memperbaiki beberapa kesalahan boundary yang sering muncul saat mengembangkan dashboard.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Server parent dapat memberi data, client child menangani interaksi.

Memuat progres Review module