If you’ve recently migrated to Payload CMS v3 , you’re probably loving the deep integration with Next.js and the App Router. However, moving to a full React Server Components (RSC) architecture brings a few unique engineering hurdles—especially when dealing with dynamic UI elements like icons. Recently, while working on a project, I hit a frustrating roadblock with Next.js serialization limits and ended up building an open-source plugin to solve it properly. Here is the story behind payload-icon-picker . The Problem: The Dreaded Serialization Error ❌ I wanted to allow users to select and render custom icons directly within the Payload admin panel. My first instinct was to pass down dynamic icon components or raw SVG chunks. But as soon as you try to pass heavy icon objects or binary data from a Server Component down to a Client Component prop, Next.js throws the infamous: Error: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported.…