Preview in Builder not as per the page created in NextJS App code

[sohail]

Hi @manish-sharma ,

I have created a page and a section (symbol - announcement bar) in Builder and then integrated these BuilderComponenets in my NextJS app code as shown below:

// Passing data to BuilderComponent page through code
/* eslint-disable @next/next/no-async-client-component */
'use client';
import { useEffect, useState } from "react";
import { builder } from "@builder.io/sdk";
import { BuilderComponent } from "@builder.io/react";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

interface PageProps {
    params: {
        page: string[];
    };
}

type MyObject = { val: number; quote: string }[];

// This could be data from DB or API with offset & limit
const sample data: MyObject = [
    { val: 1, quote: "The only limit to our realization of tomorrow will be our doubts of today." },
    { val: 2, quote: "Success is not final, failure is not fatal: It is the courage to continue that counts." },
    { val: 3, quote: "Your time is limited, don't waste it living someone else's life." },
    { val: 4, quote: "The greatest glory in living lies not in never falling, but in rising every time we fall." },
    { val: 5, quote: "Life is what happens when you're busy making other plans." },
    { val: 6, quote: "Get busy living or get busy dying." },
    { val: 7, quote: "The purpose of our lives is to be happy." },
    { val: 8, quote: "Life is really simple, but we insist on making it complicated." },
    { val: 9, quote: "Life is short, and it's up to you to make it sweet." },
    { val: 10, quote: "In three words I can sum up everything I've learned about life: it goes on." },
];

export default function Page(props: PageProps) {
    const [content, setContent] = useState(null);
    const [contentBar, setContentBar] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const result = await builder
                .get("page", {
                    userAttributes: {
                        urlPath: "/product-view-test-data" + (props?.params?.page?.join("/") || ""),
                    },
                    cachebust: true,
                    cacheSeconds: 10
                })
                .toPromise();

            const resultBar = await builder
                .get("page", {
                    userAttributes: {
                        urlPath: "/announcement-bar" + (props?.params?.page?.join("/") || ""),
                    },
                    cachebust: true,
                    cacheSeconds: 10
                })
                .toPromise();
            setContentBar(resultBar);
            setContent(result);
        };

        fetchData();
    }, [props.params.page]);

    return (
        <div>
            {content && contentBar && (
                <>
                    <BuilderComponent
                        content={contentBar}
                        model="page"
                    />
                    <BuilderComponent
                        content={content}
                        model="page"
                        data={{
                            name: "JON DOE",
                            company: "ABC",
                            description: "Example of passing data to BuilderComponent page through code. This is my own description supplied through my code.",
                            list: [1, 2, 3, 4],
                            obj: sampleData,
                        }}
                    />
                </>
            )}
        </div>
    );
}

Although the live page is correctly rendering, when editing this whole page in Builder, I saw my Page section getting duplicated in the preview.

My code: GitHub - sohailkhan361/demo-poc-1: Project created as a POC for tech stack: NextJS, Builder.io POC-1
Builder Public API Key: NEXT_PUBLIC_BUILDER_API_KEY=c7c102df613943ddb9642a9636ce10cc

Observations:

1. My custom components are not visible for this new page I added.
2. I used the “Get Code” feature to sync the code in my NextJS app but it didn’t seem to work as expected, and required many changes to be in line with the actual page.
3. I also saw some margins at the bottom or top of some pages/sections which I tried to remove/reduce to zero but I am still able to see them. (Though not a high priority, this could help enhance user UI experience)

Could you please help me address these?

Thank you.

[manish-sharma]

Hello @sohail,

The preview issue appears to stem from the BuilderComponent within the editor returning the same content. For assistance in resolving this, you may find helpful insights in the following forum post: Forum Post: Multiple BuilderComponents

1. To address the issue of the custom component not loading for the “/product-view-test-data” page, try resolving it by importing the Builder Registry. You can do this using the following import statement:

   import "../../builder-registry";
   

   

2. The Get Code feature is currently in BETA, and we do have a ticket to investigate the Sync to codebase feature. We’ll keep you posted with any progress. In the meantime, you can sync code from the builder to your codebase using the npm command option.

3. To assist you better with the margin issue, could you please share a specific page and provide a screenshot where you are experiencing the margin at the bottom and are unable to remove it? This information will help us analyze the problem more effectively and provide you with a tailored solution.

[sohail]

@manish-sharma

import "../../builder-registry";

Thank you for the quick response.

I made the changes in my local and I am still seeing the same preview.

For the margins issue, I published some more changes and currently, it is not visible.
Perhaps it was the caching-related issue.

[manish-sharma]

Hello @sohail,

I noticed that you’re utilizing the BuilderComponent to incorporate the announcement bar symbol from the page model. A recommended approach would be to either directly employ the symbol or alternatively, create a new section model specifically named “announcement-bar.” Subsequently, you can utilize the announcement-bar to fetch and render the content through the BuilderComponent. This method ensures a cleaner and more modular structure in managing your components.

e.g.

  const resultBar = await builder
                .get("announcement-bar", {
                    userAttributes: {},
                    cachebust: true,
                    cacheSeconds: 10
                })
                .toPromise();

   <BuilderComponent
             content={contentBar}
             model="announcement-bar"
    />
   <BuilderComponent
             content={content}
             model="page"
             data={{
                            name: "JON DOE",
                            company: "ABC",
                            description: "Example of passing data to BuilderComponent page through code. This is my own description supplied through my code.",
                            list: [1, 2, 3, 4],
                            obj: sampleData,
                        }}
    />

[sohail]

It worked.

Thank you very much.