Builder content link
Builder public api key
9e9f05f75ede4512aea303579becaa86
What are you trying to accomplish
I am trying to use Builder.io in combination with vercel live preview & edit.
Screenshots or video link
As you can see I have added the options, vercelPreview to true. And I also have set the API version to 3. But when I decode the strings I don’t see any data that is being sent within the strings. Like it is supposed to for Live preview to work in Vercel
Code stack you are integrating Builder with
NextJS
Reproducible code example
Code sandbox
Navigate tho the /some-test URL. I would expect some hidden code to be within the response. And as you can see in the console.log it is empty.
Hi @Kevintjuhz ,
Apologies for not reaching out sooner.
I’d like to inform you that Visual editing with Vercel works seamlessly when using data from our data models. After reviewing the code on the page, it seems there’s no indication of data being rendered from the data model call.
For example, if you utilize content from the data model like this:
const content = await builder.getAll("SOME_DATA_MODEL_NAME", {
options: {
vercelPreview: process.env.VERCEL_ENV === 'preview',
},
});
And then render the value on the page as follows:
<div> {content.data.someFieldData} </div>
You should be able to view the page in the Vercel preview and make edits.
Please give it a try, and feel free to let me know if this solution works for you.
References:
Hi @OmPrakash,
Thank you for your reply, but isn’t this what I did. It is regarding the …page. I am fetching a page data model depending on the slug. And I render the data from that call. So I would expect for it to work.
This is in the same file as the code that fetches the page data?
Is this incorrect?
Hi @Kevintjuhz,
I understand and would like to confirm if your page data model is part of the structured data models? If yes, then it should work.
I will look further into this and keep you posted.
Hi,
Our team tried this internally and it seems if you are using the data from structured data model and rendering it on your page, it should be working.
ex: <div>{dataModel.data.someField}</div>
Are you still facing issue with Vercel live preview?
