import { Builder } from '@builder.io/react'
 
// Register our heading component for use in
// the visual editor
const Heading = props => (
  <h1 className="my-heading">{props.title}</h1>
)
 
Builder.registerComponent(Heading, {
  name: 'Heading',
  inputs: [{ name: 'title', type: 'text' }]
})

import { BuilderComponent, builder } from '@builder.io/react'
 
builder.init('YOUR_KEY')
 
export const getStaticProps = async () => ({ 
  props: {
    builderJson: await builder.get('page', { url: '/' }).promise()
  }
})
 
export function BuilderPage({ builderJson }) => {
  return <>
    <YourHeader />
    <BuilderComponent model="page" content={builderJson} />
    <YourFooter />
  </>
}