How can I configure multiple page models in next app router so that routing can be handled on builder

Technical Questions
1

Hi just wanted to know the possible ways, to achive something,
I have a default page model and I created a custom page model, how to configure all page models in same […pages] directory.

2

Hello @rythm,

Is the URL path going to same for both the default page model and the custom page model?

In case the URL is going to be different i.e. /page/about /custom/about then you can conditionally pass the model name

let modelName = 'page';

const path = params?.path[0];

if(path === 'custom'){
   modelName = 'custom-model';
}

....

let page = await builder
    .get(modelName, {
      userAttributes: targetingAttributes,
      includeRefs: true,
      cachebust: true,
    } as any)
    .toPromise()

  return page || null
3

Hi @manish-sharma , thank you for the reply
My main concern is that I would like to have only one […pages] with .
I want to have two separate verticals for the project keeping in mind the page structure.
One can be the default Page Model which is already configured in the default boiler plate code.

As of now, I don’t have any separate marker such as path name.
lets assume I have an about page with path ‘/about’ which I want to keep in
default page model,
and I have a new page model and I keep a page in that with routing ‘/team’, how to proceed with it?

4

Hello @rythm,

If you want to use a catch-all route ([...page].tsx ) to handle dynamic routing for both default and custom page models, you can achieve this by implementing routing logic Here’s how you can proceed:

  • Inside [...page].tsx, you will parse the path array to determine which page model to use.
  • Based on the structure of the path array, decide whether to use the default page model or the custom page model.
import React from "react";
import { useRouter } from "next/router";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";
import { BuilderContent } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import Head from "next/head";
import { GetStaticProps } from "next";

// Replace with your Public API Key
builder.init(YOUR_API_KEY);

// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
  // Determine which Builder model to use based on the path
  const model = (params?.page as string[])?.[0] === 'team' ? 'custom-page' : 'page';

  // Fetch the builder content for the given page
  const page = await builder
    .get(model, {
      userAttributes: {
        urlPath: "/" + ((params?.page as string[])?.join("/") || ""),
      },
    })
    .toPromise();

  // Return the page content as props
  return {
    props: {
      page: page || null,
    },
    // Revalidate the content every 5 seconds
    revalidate: 5,
  };
};

// Define a function that generates the
// static paths for all pages in Builder
export async function getStaticPaths() {
  // Get a list of all pages in Builder
  const pages = await builder.getAll("page", {
    // We only need the URL field
    fields: "data.url",
    options: { noTargeting: true },
  });

  // Generate the static paths for all pages in Builder
  return {
    paths: pages.map((page) => `${page.data?.url}`).filter(url => url !== '/'),
    fallback: 'blocking',
  };
}

// Define the Page component
export default function Page({ page }: { page: BuilderContent | null }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();

  // Determine which page model to use based on the path
  const isTeamPage = router.query.page && router.query.page[0] === 'team';

  // If the page content is not available
  // and not in preview mode, show a 404 error page
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />;
  }

  // If the page content is available, render
  // the BuilderComponent with the page content
  return (
    <>
      <Head>
        <title>{page?.data?.title}</title>
      </Head>
      {/* Render the Builder page */}
      <BuilderComponent
        model={isTeamPage ? "custom-page" : "page"} // Dynamically set model name
        content={page || undefined}
      />
    </>
  );
}
5

okay, but how to make it generic, so that I can create any number of pages in both page models?

6

Hello @rythm,

To differentiate which page model to use for which path, you’ll need to implement your own logic. Typically, developers utilize the path to make this distinction, as demonstrated in the example above. You can customize this logic further to suit your specific requirements.

1 Like