# How to integrate builder.io page into existing next.js app?

**URL:** <https://forum.builder.io/t/how-to-integrate-builder-io-page-into-existing-next-js-app/1432>\
**Category:** Technical Questions\
**Created:** [December 8, 2021, 4:08pm UTC](https://forum.builder.io/t/how-to-integrate-builder-io-page-into-existing-next-js-app/1432 "2021-12-08T16:08:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![slava](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@slava](https://forum.builder.io/u/slava)\
**Post date:** [December 8, 2021, 4:08pm UTC](https://forum.builder.io/t/how-to-integrate-builder-io-page-into-existing-next-js-app/1432/1 "2021-12-08T16:08:36Z")

</div>

**Builder content link**  
_[landing-page](https://distinguished-scarlet-spider.builder.live/landing-page)_

**Code stack you are integrating Builder with**  
_NextJS_

**What are you trying to accomplish**  
I have existing next.js site and I want to create landing page built with [builder.io](http://builder.io), all other pages should work as before, without any changes.  
what I did:

1. created page in"/pages/landing-page.tsx"

```javascript
import { builder, BuilderComponent, Builder } from '@builder.io/react'
builder.init('a990e2f6684a4892a18e785fc204107d')

const Landing = (props) => {
  return (
    <>
      {props.content || Builder.isPreviewing ? (
        <BuilderComponent content={props.content} model='/landing-page' />
      ) : (
        <div>404 component</div>
      )}
      <div>footer</div>
    </>
  )
}

export default Landing

export const getStaticProps = async (context) => {
  const content = await builder.get('Page').promise()
  console.log('content :>> ', content)

  return {
    props: { content },
    revalidate: true,
    notFound: !content,
  }
}

```

1. started dev server on https:localhost:3000

I expect to see page content from [builder.io](http://builder.io) but I’m seeing 404 page.  
console.log('content :\>\> ', content) - always return undefined, looks content wasn’t fetched from builder api  
What I missed?

---

<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:** [December 8, 2021, 8:41pm UTC](https://forum.builder.io/t/how-to-integrate-builder-io-page-into-existing-next-js-app/1432/2 "2021-12-08T20:41:50Z")

</div>

Hi @slava, welcome to the forum! There are a couple changes that need to made here:

1. `<BuilderComponent content={props.content} model="page" />`  
In your account, I saw that the model name for your landing page content is `page`, not `landing-page`  

2. `const content = await builder .get('page', { url: '/landing-page' }) .promise();`  
There are several entries for your “page” model. To fetch the right content you can specify which entry you want using the url.

Alternatively, you can also set up dynamic page routing that will catch all your “page” model entries. You may find the following resource helpful. Let me know if you have any more questions!

> **[Setting up visual drag-and-drop page building with Next.js](https://www.builder.io/blog/visual-next-js)**
>
> Learn how to create pages and sections in Next.js by dragging and dropping! Hand off a toolkit to your non-developers to create and optimize pages within your guidelines