Live Preview without the loading spinners

How we wired Contentful Live Preview into Next.js 16 server components.

Modern workspace setup

Next.js 16 server components plus Contentful's Live Preview SDK is a great combination — once you stop fighting it. The trick is to keep the editor in a single React tree and let postMessage updates drive re-renders.

We use useContentfulLiveUpdates at the section level and useContentfulInspectorMode for tap-to-edit affordances. Field-level updates feel instantaneous.

The reference implementation lives in apps/web/src/components/sections/hero.tsx. Copy it for new blocks.