# Builder and NextJS (App Router) not working properly at root url ("/")

**URL:** https://forum.builder.io/t/builder-and-nextjs-app-router-not-working-properly-at-root-url/6431
**Category:** Technical Questions
**Tags:** visual-editor, nextjs
**Created:** [September 21, 2024, 9:01pm UTC](https://forum.builder.io/t/builder-and-nextjs-app-router-not-working-properly-at-root-url/6431 "2024-09-21T21:01:07Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://forum.builder.io/u/Alexx)
#### Post date: [September 21, 2024, 9:01pm UTC](https://forum.builder.io/t/builder-and-nextjs-app-router-not-working-properly-at-root-url/6431/1 "2024-09-21T21:01:07Z")

</div>

Hi,

I am on NextJs, App-router. My main interest is not to make multiple pages, but to use the page-builder only on the main (root) page.

However, I am running into trouble when using “/” as a path.

That is:  
The [builder.io](http://builder.io) editor does not work properly, showing no content besides the header and footer that is supplied by by nextjs app. When I drag something in the editor, the content is not shown and there is no interactivity.  
Is seems like builder has a specific problem with the root path (“/”), any other path works well and the editor works.

Did anyone of you get this to work properly, specifically on the root url?

My setup is as follows:

1. I deleted the […page] folder, as I will only have a single page that I want to edit using builder.

2. Added a page component with:  
page url: “/”  
title: “homepage”

3. I added the builder.tsx:

// components/builder.tsx  
“use client”;  
import { ComponentProps } from “react”;  
import { builder } from “@builder.io/sdk”;  
import { BuilderComponent, useIsPreviewing } from “@builder.io/react”;

// Replace with your Public API Key  
builder.init(process.env.NEXT\_PUBLIC\_BUILDER\_API\_KEY);

type BuilderPageProps = ComponentProps;

export function RenderBuilderContent(props: BuilderPageProps) {  
// Call the useIsPreviewing hook to determine if  
// the page is being previewed in Builder  
const isPreviewing = useIsPreviewing();

```
// If "content" has a value or the section is being previewed in Builder,
// render the BuilderComponent with the specified content and model props.
if (props.content || isPreviewing) {
  return <BuilderComponent {...props} />;
}

return null;

```

}

1. Modified the main page.tsx in the app folder to:

import Layout from “@/components/layouts/home/layout”  
import { builder } from “@builder.io/sdk”;  
import { RenderBuilderContent } from “./builder”;

builder.init(process.env.NEXT\_PUBLIC\_BUILDER\_API\_KEY);

export default async function Home(props) {

const content = await builder  
.get(“homepage”, {  
userAttributes: {  
urlPath: “/” + (props?.params?.page?.join(“/”) || “”),  
},  
})  
.toPromise();

return (  
  
\<RenderBuilderContent content={content} model={“homepage”} /\>  
  
)  
}

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [September 24, 2024, 8:16am UTC](https://forum.builder.io/t/builder-and-nextjs-app-router-not-working-properly-at-root-url/6431/2 "2024-09-24T08:16:49Z")

</div>

Hello @Alexx,

Welcome to the [Builder.io](http://Builder.io) forum!

It looks like there is an issue with the model name you’re using in your `builder.get` call and `RenderBuilderContent`. The model named “homepage” is not available under your space, “Alex Space.” I recommend updating the model name to “page” instead.

Here’s the updated code for your reference:

```javascript
import Layout from "@/components/layouts/home/layout";
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "./builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);

export default async function Home(props) {
  const content = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
    })
    .toPromise();

  return (
    <RenderBuilderContent content={content} model={"page"} />
  );
}

```

 ![Screenshot 2024-09-24 at 1.42.16 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/27039e97f1cd890bf94cfd5d7fc7192f7735ff9f.png)

If you are working in a different space that does have a model called “homepage,” please let us know, and we’ll be happy to assist you further.

Thank you!