Nextjs localhost does not properly configure with visual editor

Visual Editor Help
1

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!

2

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
nextjs12296×1064 355 KB

You have not updated your index.tsx page.

nesxtjs2
nesxtjs22362×1138 112 KB

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,

1 Like
3

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])

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
}
4

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