🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Troubleshooting live previews in Next.js project with dynamic loading and React errors.

3 replies
Last updated: Jan 5, 2024
Hi all, I'm having a bit of trouble with live previews in my Next.js project.
I'm trying to avoid duplicating every single component just to have a preview version and a regular one, so instead I made a generic preview component that dynamically loads the correct one and passes it the initial data and the query that it requires.

This kind of works but in preview mode everything flashes (probably due to the dynamic loading logic) and sometimes I get weird React errors saying
A previously unvisited boundary must have exactly one root segment. This is a bug in React.
.
Any suggestions on how to make all this work without weird generic shenanigans and code duplication? Thank you!
Jan 5, 2024, 10:08 AM
👋 We probably can’t help you much without seeing your code.
Jan 5, 2024, 5:05 PM
Yeah, I know but unfortunately I can't share it cause it's for a client and I signed an nda... 😅
But I managed to solve my issues by just using the
LiveQuery
component provided by
next-sanity
.
Thanks for the reply!
Jan 5, 2024, 5:10 PM
Oh great! I’m glad you found a solution.
Jan 5, 2024, 5:11 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?