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.
Builder content link
Builder public api key
388d2ee67cf04ff2a18959d4307a0e96
What are you trying to accomplish
Just started a new nextjs project and let builder add all of the initial config and code. I am running this locally using npm run dev. The first builder-demo page works fine both in preview and live. I added a test page using the page model and published it at /test. It returns the test page using live preview but returns a 404 if just trying the live page.
I created another test page at /blog, same thing. I didn’t change any of the boiler plate code.
Screenshots or video link
Code stack you are integrating Builder with
NextJS
Reproducible code example
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "../../components/builder";
// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
interface PageProps {
params: {
page: string[];
};
}
export default async function Page(props: PageProps) {
const builderModelName = "page";
const url = "/" + (props?.params?.page?.join("/") || "");
const content = await builder
// Get the page content from Builder with the specified options
.get(builderModelName, {
userAttributes: {
// Use the page path specified in the URL to fetch the content
urlPath: url,
},
})
// Convert the result to a promise
.toPromise();
console.log("DEBUG", url, content);
return (
<>
{/* Render the Builder page */}
<RenderBuilderContent content={content} model={builderModelName} />
</>
);
}
"use client";
import { ComponentProps } from "react";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
import { BuilderContent, builder } from "@builder.io/sdk";
import DefaultErrorPage from "next/error";
import "../builder-registry";
type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
export function RenderBuilderContent({ content, model }: BuilderPageProps) {
console.log("DEBUG2", content, model);
// Call the useIsPreviewing hook to determine if
// the page is being previewed in Builder
const isPreviewing = useIsPreviewing();
// If "content" has a value or the page is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (content || isPreviewing) {
return <BuilderComponent content={content} model={model} />;
}
// If the "content" is falsy and the page is
// not being previewed in Builder, render the
// DefaultErrorPage with a 404.
return <DefaultErrorPage statusCode={404} />;
}