Trying to pass functions, classes, or private symbols through the Server-to-Client boundary.
Interactive Simulation Engine
Serialization Firewall
Unserializable Props Leak
The Limit: Data crossing the wire from Server to Client must beserializable (JSON-compatible). Classes, Functions, and Symbols cannot be stringified, so they "shatter" at the boundary.
Executable Code Workbench
page.tsx
Live Code Editor1// ❌ ERROR: Function across boundary
2export default function ServerPage() {
3 return <ClientComp onAction={() => {}} />
4}
5
6// ✅ FIX: Pass data, not logic
7export default function ServerPage() {
8 return <ClientComp id={123} />
9}Mental Model
Only pass plain JSON-serializable objects. Functions should be passed as Server Actions if appropriate.
Why This Exists
To protect the integrity of the rendering lifecycle and ensure your application remains stable across different environments.
Critical Note
"Errors in Next.js aren't just bugs; they are often the framework enforcing strict architectural safety rules to prevent security leaks or performance regressions."