Hi there, I’m trying to make a blog page of my website using builder and next.js for this I created a model of type data which has the field for my blogs, I use nextjs to fetch the data from the builder.io api. My question is I cant be able to add the builder visually created content on the page made by me by fetching the builder.io data. is there any way to add the custom code data and builder visually created content data on the same page.
I attached some screenshots too to tell what I want :
Builder public api key
fff8e6fa6fbc4f6abf4fb93c03e661f1
What are you trying to accomplish
I want to integrate the model of type section into model of type data so I can access the other models to fetch and show on my frontend
Code stack you are integrating Builder with
*e.g. NextJS, react
If I am understanding correctly you have a Next.js page where you would like to import various builder content - namely a data model and section model. To do so, copy the Next.js code snippets from the Model Options page to fetch the builder content and use them in your page.
import { builder, BuilderComponent } from '@builder.io/react'
builder.init('YOUR_API_KEY')
builder.get('your-data-model').promise().then(({ data }) => {
// Do something with the data
})
export const getStaticProps = async (context) => {
const content = await builder.get('your-section-model', { url: context.resolvedUrl }).promise();
return {
props: { content },
revalidate: true,
notFound: !content
}
}
const YourPage = (props) => (
return (
<div>
<h1>Something from your data model</h1>
<BuilderComponent
content={props.content}
model="your-section-model" />
</div>
)
)
export default YourPage;
Additionally, with the visual editor you can pull in the fields from your data model entry into your section/page model entry by clicking on the Data tab > + Connect Data > Builder.io > Entry/Query. Then add data bindings to text, image, etc elements in your section/page to connect them to your blog fields.
Yes definitely, you can extend any model (page or section) in builder with custom fields, so for your use case here, I’d create a section model - e.g blog-post - and add all those custom fields from your data model to it (no need for a separate data model for this). then you can read it in your code this way,
// in pages/posts/[slug].js
import { BuilderContent, BuilderComponent } from '@builder.io/react
// then in your exported component
<BuilderContent
content={post} // post here is the json from content api passed from getStaticProps or getServerSideProps
model="blog-post"
>
{(data) => // notice the custom fields ( `title` , `image`, can be extended in model configuration )
data && (
<article>
<Head>
<title>
{data.title} | My blog
</title>
<meta property="og:image" content={data.image} />
</Head>
<BuilderComponent model="blog-post" content={data} />
</article>
)
}
</BuilderContent>
Thanks for your quick response, but I want to know that If I create a custom field of type modal as I used above,
Will the response which i get by using builder.get() method includes the models too?
