NextJs Integration

Technical Questions
,
1

I’m trying to integrate @builder.io with NextJs following this documentation:

I’m trying to set the page URL for my home page: http://localhost:3000/ but after saving the slash is added for the beginning / so it’s: /http://localhost:3000/ :frowning_face:

image
image2908×570 65.2 KB

My code is:

import React from 'react'
import { builder, BuilderComponent } from '@builder.io/react'

builder.init('e26d3532deff4a8a9528e21f334150fd')

const About = ({ builderPage }) => {
  console.log(builderPage)
    return (
      <div>
        {builderPage ? (
          <BuilderComponent model="page" content={builderPage} />
        ) : (
          <h1>404 Page not found</h1>
        )}
      </div>
    )

}

About.getInitialProps = async ({ res, req, asPath }) => {
  // If there is a Builder page for this URL, this will be an object, otherwise it'll be null
  const page = await builder.get('page', { req, res, url: asPath  }).promise()
  return { builderPage: page }
}

export default About;

And the console.log(builderPage) returns null

Finally I want to deploy the website to AWS via @sls-next/serverless-component

Please help to solve it. My big client wants to use @builder.id but we need to have it integreted with NextJS and serverless deploy.

2

I’ve changed the page URL to / and it works, so the documentation seems to be deprecated…

3

Thanks @zbigiman for pointing this out, we’ve updated our next-js starters with a clearer readme and the latest next-js version, you can find a minimal starter here builder/examples/next-js-simple at master · BuilderIO/builder · GitHub

4

Hi Aziz,

I’ve tried to use the snippets in my NextJS v10 project, and even tried to run the next-js-simple repo out-of-the-box, but it always seems to result in a 404. I think the culprit is the builder.get() function.

I really love what you guys are doing and would love to offer builder.io to our clients, but I can’t even seem to get a simple example to work!

Thanks,
Maya

5

Hi @Maya, thanks for reporting the issue, the nextjs-simple starter had an issue with unpublished pages that we fixed yesterday, please pull from master and try again.