New pages return 404 error on localhost

General
1

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
2e66270a464a4ceb9fa22e1ba315c1c7

What are you trying to accomplish
I want to create a new page in the editor and have it appear on my site/app.

Code stack you are integrating Builder with
NextJS

Reproducible code example
I am using the code generated by the builder.io installer:

# app/[...page]/page.tsx

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 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: "/" + (props?.params?.page?.join("/") || ""),
      },
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} model={builderModelName} />
    </>
  );
}
2

I am having this exact same issue. Same framework. The odd thing is the example page that is added when the builder dev tools is added shows and for me, I adjusted the folder name so I could edit the home page, the home page displays. All other pages show a 404.

/ - Displays
/builder-demo - Displays
all other pages - 404 This page could not be found

3

Hey Tim,

Could you share the code for one of these other pages that is giving a 404 error?

4

Hey @alexander. This is a snapshot of the page code. It’s out of the box, unmodified. You can see by the folder hierarchy, the page should support all pages including the home page. The odd thing is the home page and the /builder-demo pages are the only pages that display. All others give a 404. As a test, I just created and published a page with zero content. I even started with a completely new project, with no additional installed packages thinking maybe it was something I added conflicting with the builder code. The result was the same. I am using a NextJs app router project, javascript not typescript.

image
image1078×673 101 KB

5

I have the same issue ;(

6

Hello @pinokio98 and @tim,

The shared code appears to be fine and should not have any issues. Please ensure that you are using the correct API key and the latest version of the builder.io@react SDK(5.0.1).

If the issue persists, feel free to reach out to us. We are happy to help!

Best regards,