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

**URL:** <https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688>\
**Category:** Technical Questions\
**Tags:** nextjs\
**Created:** [June 6, 2023, 2:49pm UTC](https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688 "2023-06-06T14:49:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![IanCZane](https://avatars.discourse-cdn.com/v4/letter/i/5fc32e/32.png) [@IanCZane](https://forum.builder.io/u/IanCZane)\
**Post date:** [June 6, 2023, 2:49pm UTC](https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688/1 "2023-06-06T14:49:51Z")

</div>

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:

```auto
// 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:

 ![Screenshot 2023-06-06 at 10.50.33 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/2ae14fc5646b13cb76809983a4bb71af6a6460e6.png)

And opening `localhost:4200` just gives me a 404.

Any ideas?

---

<div class="post-metadata">

**Author:** ![JonathanLand](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@JonathanLand](https://forum.builder.io/u/JonathanLand)\
**Post date:** [June 7, 2023, 8:05am UTC](https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688/2 "2023-06-07T08:05:02Z")

</div>

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

> **[Routing: Dynamic Routes | Next.js](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-segments)**
>
> Dynamic Routes are pages that allow you to add custom params to your URLs. Start creating Dynamic Routes and learn more here.

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [June 7, 2023, 1:47pm UTC](https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688/3 "2023-06-07T13:47:08Z")

</div>

Hello @IanCZane,

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

---

<div class="post-metadata">

**Author:** ![IanCZane](https://avatars.discourse-cdn.com/v4/letter/i/5fc32e/32.png) [@IanCZane](https://forum.builder.io/u/IanCZane)\
**Post date:** [June 7, 2023, 1:50pm UTC](https://forum.builder.io/t/cannot-create-a-page-that-is-targeted-at/3688/4 "2023-06-07T13:50:55Z")

</div>

Yes it did. I marked it as such.