[...page].js

import { builder, BuilderComponent, Builder } from '@builder.io/react';
import '@builder.io/widgets';

builder.init(process.env.BUILDERIO_API_KEY);

const MyComponent = props => {
  return (
    <>
      {/* <YourHeader /> */}
      {props.content || Builder.isPreviewing ? (
        <BuilderComponent content={props.content} model="page" />
      ) : null}
      {/* <YourFooter /> */}
    </>
  );
};

export default MyComponent;

// Get page data
// https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
export const getStaticProps = async context => {
  // rebuild url for page
  const url = `/${context.params.page.join('/')}`;
  const content = await builder.get('page', { url }).promise();

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

// List all Builder pages
// https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation
export const getStaticPaths = async () => {
  const results = await builder.getAll('page', {
    fields: 'data.url',
    key: 'all-pages',
    limit: 200,
    options: {
      noTargeting: true,
    },
  });

  return {
    paths: results.map(item => ({
      params: {
        page: item.data.url.substr(1).split('/'), // Remove preceeding slash, separate into array
      },
    })),
    fallback: true,
  };
};