Live page does not reflect the draft change

Technical Questions
1

Hey y’all,

Our team is recently in process of migrating our site to NextJs with Builder.io, and I am trying to setup group routing (general) and (special). (special) routing will use the same page model as (general), but different layout. The problem I have encountered is that the live page does not reflect the change from our draft.

If you have any insights, I would love to know.

Thank you so much. :bowing_man:

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

What are you trying to accomplish

  • set up group routings for different page groups, but share the same page model

Screenshots or video link

Code stack you are integrating Builder with
NextJs

2

I created two group routing, (general) and (special), and I found a way to make work, but it’s not dynamic.

in the general route, the standard data fetching is like below

export const getPageModelData = async (slug: string) => {
  const pageData = await builder
    .get('page', {
      userAttributes: {
        urlPath: slug,
      },
      prerender: false,
    })
    .toPromise();

  return pageData;
};

However, with another routing setup and share the same page model, I had to hard code the fetch per route bases:

export const getAiPageModelData = async () => {
  const aiPageData = await builder
    .get('page', {
      userAttributes: {
        urlPath: '/single-special-page-route',
      },
      prerender: false,
    })
    .toPromise();

    return aiPageData
}
3

Hello @tlee-pb,

To address the issue you’re experiencing with live pages not reflecting changes from your drafts, make sure you’re following these steps for setting up group routing with different layouts in Next.js for your Builder.io pages:

  1. Page Model Setup: Ensure you have a single page model that will be used for both (general) and (special) group routes.
  2. Different Layouts: You’ll implement different layouts based on the route groups.
  3. Draft and Preview Issues: Double-check that your drafts are properly published and that your page rendering logic accounts for both draft and live versions.

In the Next.js app directory, structure your groups. Here’s an example:

app
├──(general)
│   └──[...page]
│       └──page.tsx
├──(special)
│   └──[...page]
│       └──page.tsx
├──layout.tsx
└──page.tsx

Inside app/(general)/[...page]/page.tsx :

import { RenderBuilderContent } from "@/components/builder";
import Head from "next/head";
import { builder } from "@builder.io/sdk";

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

export default async function GeneralPage(props) {
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + (props.params.page?.join("/") || ""),
      },
      prerender: false,
    })
    .toPromise();

  return (
    <>
      <Head>
        <title>{page?.data.title}</title>
      </Head>
      <div className="general-layout">
        <RenderBuilderContent model="page" content={page} />
      </div>
    </>
  );
}

Inside app/(special)/[...page]/page.tsx :

import { RenderBuilderContent } from "@/components/builder";
import Head from "next/head";
import { builder } from "@builder.io/sdk";

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

export default async function SpecialPage(props) {
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + (props.params.page?.join("/") || ""),
      },
      prerender: false,
    })
    .toPromise();

  return (
    <>
      <Head>
        <title>{page?.data.title}</title>
      </Head>
      <div className="special-layout">
        <RenderBuilderContent model="page" content={page} />
      </div>
    </>
  );
}

Create a helper component to render Builder content. For example, in components/builder.tsx:

"use client";
import { BuilderComponent, builder, useIsPreviewing } from "@builder.io/react";

builder.init("YOUR_PUBLIC_API_KEY");

export function RenderBuilderContent({ content, model }) {
  const isPreviewing = useIsPreviewing();
  if (content || isPreviewing) {
    return <BuilderComponent content={content} model={model} />;
  }
  return null;
}
1 Like