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

Technical Questions
1

Builder content link
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, all other pages should work as before, without any changes.
what I did:

  1. created page in"/pages/landing-page.tsx"
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 but I’m seeing 404 page.
console.log('content :>> ', content) - always return undefined, looks content wasn’t fetched from builder api
What I missed?

2

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

    Screen Shot 2021-12-08 at 3.26.26 PM
    Screen Shot 2021-12-08 at 3.26.26 PM1596Ă—270 26.2 KB

  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!

1 Like