I want to be able to set up a page at the root address of my site, meaning I want the target to be “/” for that page.
Whenever I try to create a page with the target at “/” though, it’s unable to load in the visual editor, unable to be previewed, and unable to be loaded at localhost:4200 (the port on which I’m running the local server).
My [...page.tsx] looks like this:
// Initialize the Builder SDK with your organization's API Key
// Find the API Key on: https://builder.io/account/settings
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);
export const getStaticProps: GetStaticProps = async ({ params }) => {
const cacheTTL = parseInt(process.env.NEXT_PUBLIC_BUILDER_CACHE_TTL);
// Fetch the first page from Builder that matches the current URL.
// Use the `userAttributes` field for targeting content.
// For more, see https://www.builder.io/c/docs/targeting-with-builder
const page = await builder
.get("page", {
userAttributes: {
urlPath: `/${(params?.page as string[] | undefined)?.join("/") || ""}`,
},
})
.toPromise();
return {
props: {
page: page || null,
},
revalidate: cacheTTL,
};
};
export const getStaticPaths: GetStaticPaths = async () => {
// Fetch all published pages for the current model.
// Using the `fields` option will limit the size of the response
// and only return the `data.url` field from the matching pages.
const pages = await builder.getAll("page", {
fields: "data.url", // only request the `data.url` field
options: { noTargeting: true },
limit: 0,
});
return {
paths: pages.map((page) => `${page.data?.url}`),
fallback: true,
};
};
/** Handles the render loop logic
* Renders the Builder.io page with title and metadata along with any content from Builder.io itself
* Renders an error page if the user is in Live mode (not previewing through the editor) and there is no route match
*/
export default function Page({
page,
}: {
page: React.ComponentProps<typeof BuilderComponent>["content"];
}) {
const router = useRouter();
// This flag indicates if you are viewing the page in the Builder editor.
const isPreviewing = useIsPreviewing();
if (router.isFallback) {
return <h1>Loading...</h1>;
}
// Add your error page here to return if there are no matching
// content entries published in Builder.
if (!page && !isPreviewing) {
return <DefaultErrorPage statusCode={404} />;
}
return (
<>
<Head>
{/* Add any relevant SEO metadata or open graph tags here */}
<title>{page?.data?.title}</title>
<meta name="description" content={page?.data?.description} />
</Head>
<BuilderComponent model="page" content={page} />
</>
);
}
I have no other files in my pages directory in my Next.js project, other than an _app.tsx and a _document.js that sets up things like <meta> tags and loads in some custom fonts.
When I create and publish a page with a target of /, it breaks every page on my site. I get this error message when attempting to open any other page, either directly or in the visual editor:
And opening localhost:4200 just gives me a 404.
Any ideas?