Hi,
I am trying to add custom components to the homepage,
I am able to see the page in the visual editor but after publishing it I am not able to see the changes on the storefront (http://localhost:3000/) ,
need help to find out what I am missing,
I have attached a screenshot if the index.ts and other relevant info
Builder content link
Builder.io: Drag & Drop Headless CMS
Builder public api key
ae0b3f35602f4880a6a57b4f491d43dc
Hello @gamersensei,
Upon reviewing the screenshot you provided, I’ve identified an issue in your code, specifically on line 58 with the <BuilderComponent /> where the model name is set as “home.” However, on line 38 in the builder.get call, you’re retrieving content for the “homepage” model.
To address the 404 issue you’re experiencing, consider updating the builder.get call to use “home” as the model name. This adjustment should align the model names and potentially resolve the problem.
Feel free to reach out if you have any further questions or need additional assistance.
Best regards,
hi @manish-sharma ,
I made following change as you suggested , getting error ,
export async function getStaticProps({}) {
const homepage = await builder.get('home').toPromise()
return {
props: {
homepage: homepage || null,
},
}
}
export default function Page({ homepage }: any) {
const isPreviewing = useIsPreviewing()
// If the page content is not available
// and not in preview mode, show a 404 error page
if (!homepage && !isPreviewing) {
return <DefaultErrorPage statusCode={404} />
}
return (
<>
{/* Put your header here. */}
<BuilderComponent model="home" content={homepage || undefined} />
{/* Put your footer here. */}
</>
)
}
Hello @gamersensei,
For […page.tsx], could you try using the below code and see if that works for you
// pages/[...page].tsx
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("ae0b3f35602f4880a6a57b4f491d43dc");
// Define a function that fetches the Builder
// content for a given page
export const getStaticProps: GetStaticProps = async ({ params }) => {
// Fetch the builder content for the given page
const page = await builder
.get("home", {
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("home", {
// 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();
// 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="home" content={page || undefined} />
</>
);
}