Truyền hàm hoặc instance của class từ Server Component xuống Client Component thì lỗi gì? Cách xử lý?

Sẽ gặp lỗi kiểu Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Lý do: props qua ranh giới server → client phải serialize được để nhúng vào payload RSC. React hỗ trợ primitive, plain object/array, Date, Map, Set, Promise, JSX, và Server Function ('use server'). Không hỗ trợ: hàm thường, class instance (bao gồm object ORM có prototype/method), Symbol không đăng ký.

Cách xử lý:
- Cần callback chạy trên server → khai báo Server Function bằng 'use server' rồi truyền xuống.
- Cần handler chạy trên client → định nghĩa ngay trong client component, đừng truyền từ server.
- Với dữ liệu ORM → map sang plain object trước khi truyền.

tsx

const rows = await prisma.order.findMany()
const plain = rows.map(r => ({ id: r.id, total: r.total.toString() }))
return <OrderTable rows={plain} />

Lỗi hay gặp trong thực tế: Decimal của Prisma và ObjectId của Mongoose đều là class instance, phải chuyển sang chuỗi/số.

Xem toàn bộ Next.js cùng filter theo level & chủ đề con.

Mở danh sách Next.js

Sẽ gặp lỗi kiểu Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

tsx

const rows = await prisma.order.findMany()
const plain = rows.map(r => ({ id: r.id, total: r.total.toString() }))
return <OrderTable rows={plain} />

Lỗi hay gặp trong thực tế: Decimal của Prisma và ObjectId của Mongoose đều là class instance, phải chuyển sang chuỗi/số.