Next.js 15: Passing Props from Server to Client
easy⏱ 5 mincoursenextjs
What can cross the boundary
Safe: strings, numbers, booleans, null/undefined, plain objects and arrays made of the above. Not safe: functions (including event handlers and callbacks — you can't pass onSave from server to client), class instances, and Date objects (they serialize but lose their Date-ness, arriving as strings).
// Server Component
export default async function Page() {
const post = await db.post.findFirst(); // { id, title, publishedAt: Date, ... }
return (
<LikeButton
postId={post.id} // safe - string
title={post.title} // safe - string
likeCount={post.likes} // safe - number
publishedAt={post.publishedAt.toISOString()} // convert Date to string first
// onLike={() => save(post.id)} // not safe - functions cannot cross
/>
);
}
Interactivity crosses the other way
You can't pass a server function as an onClick prop — but a Client Component can call a Server Action (a special function reference, covered later in the course) or just own its interactivity locally with useState. Rule of thumb: data flows server to client as plain values; behavior lives on the client (or goes through a Server Action, not a raw prop).
Spot the unsafe prop
Click each candidate prop to check whether it's serializable. Notice the two flagged as unsafe already show their fix: converting the Date to an ISO string, and moving the function prop into the Client Component itself.