# Use model of type section into model of type data

**URL:** <https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369>\
**Category:** Technical Questions\
**Tags:** visual-editor, react, api, nextjs\
**Created:** [November 22, 2021, 12:46pm UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369 "2021-11-22T12:46:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![anupama.sharmaa](https://avatars.discourse-cdn.com/v4/letter/a/7bcc69/32.png) [@anupama.sharmaa](https://forum.builder.io/u/anupama.sharmaa)\
**Post date:** [November 22, 2021, 12:46pm UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/1 "2021-11-22T12:46:27Z")

</div>

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](http://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](http://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 :

 ![Screenshot 2021-11-22 at 18-13-58 Builder io Drag and drop page builder and CMS](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/82870a14080b7ccc5914978430ab91ac1e53b20d.png)  
 ![Screenshot 2021-11-22 at 18-14-17 Builder io Drag and drop page builder and CMS](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/3b6bf8285d94a100ae28836e3b5dad7764f8d458.png)

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/models/2422df66c0024f8088dd1b7a2cf8e066)**
>
> Build and optimize digital experiences for any tech stack, visually.

**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

---

<div class="post-metadata">

**Author:** ![ancheetah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/ancheetah/32/751_2.png) [@ancheetah](https://forum.builder.io/u/ancheetah)\
**Post date:** [November 22, 2021, 9:40pm UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/2 "2021-11-22T21:40:26Z")

</div>

Hello @anupama.sharmaa!

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.

```auto
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](http://Builder.io)** \> **Entry/Query**. Then add data bindings to text, image, etc elements in your section/page to connect them to your blog fields.

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [November 23, 2021, 1:05am UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/3 "2021-11-23T01:05:47Z")

</div>

> [@anupama.sharmaa](#):
>
> is there any way to add the custom code data and builder visually created content data on the same page.

Yes definitely, you can extend any model (page or section) in builder with [`custom fields`](https://www.builder.io/c/docs/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,

```auto
// 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>

```

---

<div class="post-metadata">

**Author:** ![anupama.sharmaa](https://avatars.discourse-cdn.com/v4/letter/a/7bcc69/32.png) [@anupama.sharmaa](https://forum.builder.io/u/anupama.sharmaa)\
**Post date:** [November 23, 2021, 7:51am UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/4 "2021-11-23T07:51:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [November 23, 2021, 5:52pm UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/5 "2021-11-23T17:52:54Z")

</div>

> [@anupama.sharmaa](#):
>
> Thanks for your quick response, but I want to know that If I create a custom field of type modal as I used above,

I’m not sure I understood the question, do you mean type `Reference` ? if so use the [includeRefs option](https://www.builder.io/c/docs/query-api#:~:text=%26offset%3D10-,includerefs,-No)

```auto
const contentWithReferences = await builder.get('model-name', { includeRefs: true } )

// And in your component code
<BuilderComponent model="model-name" content={contentWithReferences} options={{ includeRefs: true }} />

```

---

<div class="post-metadata">

**Author:** ![anupama.sharmaa](https://avatars.discourse-cdn.com/v4/letter/a/7bcc69/32.png) [@anupama.sharmaa](https://forum.builder.io/u/anupama.sharmaa)\
**Post date:** [November 24, 2021, 12:57pm UTC](https://forum.builder.io/t/use-model-of-type-section-into-model-of-type-data/1369/6 "2021-11-24T12:57:27Z")

</div>

Thank you so so much for help sir. It really help me a lot to solve my problem.