# Nextjs localhost does not properly configure with visual editor

**URL:** <https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811>\
**Category:** Visual Editor Help\
**Created:** [May 13, 2025, 7:57pm UTC](https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811 "2025-05-13T19:57:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![flinnbella](https://avatars.discourse-cdn.com/v4/letter/f/439d5e/32.png) [@flinnbella](https://forum.builder.io/u/flinnbella)\
**Post date:** [May 13, 2025, 7:57pm UTC](https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811/1 "2025-05-13T19:57:57Z")

</div>

Essentially the issue is that my visual editor is saying it cannot find localhost, I have my .env file correctly configured along with the [page…] file. Strangely all other subpages (/home, /about-us, etc…) all load correctly but the root page just shows the generic nextjs page template and I cannot add my custom components or anything, any advice would be appreciated thanks!

---

<div class="post-metadata">

**Author:** ![Rahulj08](https://avatars.discourse-cdn.com/v4/letter/r/7ba0ec/32.png) [@Rahulj08](https://forum.builder.io/u/Rahulj08)\
**Post date:** [May 15, 2025, 5:56am UTC](https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811/2 "2025-05-15T05:56:28Z")

</div>

Hi @flinnbella,

Thanks for reaching out.

As i looked into this and found that It looks like the issue might be related to how Next.js handles routing.  
In Next.js, the `index.tsx` file under the `pages` directory is specifically used to serve content for the root route (`/` ). While your dynamic route (`[...page].tsx` ) appears to be correctly handling subpages like `/home` and `/about-us` , the root (`/` ) is still displaying the default Next.js template because it likely hasn’t been customized yet.  
To resolve this, I recommend moving or copying the relevant logic or components from `[...page].tsx` into `index.tsx` . This will ensure that your homepage is rendered with your intended content, just like your other subpages.

 ![nextjs1](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5860b86f599ce215b1bfe434fe809c5ad867d258.png)  
You have not updated your index.tsx page.

 ![nesxtjs2](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/5/5022eaaacabe068162bffcf0d741ba55c0191ae9.png)  
You need to add the code from page.tsx to Index.tsx. The reason for this is that it works like this in Next.js

If you have any more questions or are stuck anywhere, please do let me know.

Best Regards,

---

<div class="post-metadata">

**Author:** ![flinnbella](https://avatars.discourse-cdn.com/v4/letter/f/439d5e/32.png) [@flinnbella](https://forum.builder.io/u/flinnbella)\
**Post date:** [May 15, 2025, 6:17am UTC](https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811/3 "2025-05-15T06:17:07Z")

</div>

Here is what my page.tsx (thats what its called rather than index.tsx in mine for some reason, I don’t believe I changed it. This is the one in the same directory as […pages] not the pages.tsx in […pages])

```auto
import Image from "next/image";
import React from "react";
import { builder } from "@builder.io/sdk";
import Head from "next/head";
import { RenderBuilderContent } from "@/components/builder";

// Replace with your Public API Key
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY || '');

export default async function Page({params}: {params: Promise<{page: string[]}>}) {
  const model = "page";
  const {page} = await params;
  const content = await builder
    .get("page", {
      includeUnpublished: true,
      userAttributes: {
        urlPath: "/" + (page?.join("/") || ""),
      },
      prerender: false,
    })
    .toPromise();

  return (
    <>
      <Head>
        <title>{content?.data.title}</title>
      </Head>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} model={model} />
    </>
  );
}

export function Home() {
//BoilerPlate NextJS Code
}

```

---

<div class="post-metadata">

**Author:** ![flinnbella](https://avatars.discourse-cdn.com/v4/letter/f/439d5e/32.png) [@flinnbella](https://forum.builder.io/u/flinnbella)\
**Post date:** [May 15, 2025, 6:22am UTC](https://forum.builder.io/t/nextjs-localhost-does-not-properly-configure-with-visual-editor/14811/4 "2025-05-15T06:22:14Z")

</div>

Nevermind it works I just deleted all the code from root url previously