Cannot create a page that is targeted at "/"`

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 [] looks like this:

// Initialize the Builder SDK with your organization's API Key
// Find the API Key on:

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
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: `/${(params?.page as string[] | undefined)?.join("/") || ""}`,

  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: => `${}`),
    fallback: true,

/** Handles the render loop logic
 *  Renders the page with title and metadata along with any content from 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: 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 (
        {/* Add any relevant SEO metadata or open graph tags here */}
        <meta name="description" content={page?.data?.description} />
        <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?

You need to rename the file to [[…page]].tsx.

Hello @IanCZane,

Did renaming using double braces [[…page.tsx]] resolve the issue?

Yes it did. I marked it as such.