NextJS 13 visual editor not working

I’ve been learning NextJS, in particular 13 and app routing, and trying to link this up with Builder. Having previously used Builder with a React SPA, I wanted to get a bit more into SSR for speed and performance optimsations.

I’ve been encountering an issue with Builder’s live visual editor not updating the content in real time, I have to pyshically pushlish the page to see the updates.

After various testing, with different senarios, this seems to always be the case for me when I’m using my own section and page models. If I use the existing model called ‘page’, this issue isn’t present and the visual editor works as I expect.

This is a bit of a blocker for me, as I’d prefer to use the app routing within NextJS, however it just doesn’t seem to work great with Builder.

Would be good to know if anyone else experiences this issue/if there is a solution.

Hey @Matt.Turnbull Welcome to Builder.io forum. Could you please share you public Space API key and the Builder Content entry link where you are facing the issue?

I went over the issue with my work colleague and with a fresh pair of eyes, we managed to work out what the issue was.

I wasn’t passing the “model” to the BuilderComponent, as I hadn’t been doing this with the React SPA and it worked fine.

Turns out, this is the key in order to see the updates within the visual editor.

Annoyingly the importance of this isn’t really highlighted anywhere from what I could see and the prop itself on the component is optional.

For anyone having a similar issue in future, whereby the visual editor isn’t acting right with models other than the ‘page’, make sure you’re passing the model prop to the BuilderComponent with the correct name for the model you are using.

1 Like