How to add different routes in builder for same site?

[JiyaAgrawal20]

I have a project and I’m trying to integrate builder in it. This project is made up on app router with nextjs. I’m not able to integrate different pages/route in builder.
This is my folder structure –

I have a page.tsx file inside [[…page]] folder inside app folder –

I have a builder.tsx file inside components folder which has that RenderBuilderContent function.

I am able to see “open in builder” button only in localhost:3000/builder-demo route and nowhere else.
In the visual cms of builder, I’m able to see all the registered and unregistered components in the custom components section but only on the route “localhost:3000/builder-demo” and nowhere else.
I have tried creating different page models and configured them but still it’s giving me the same error in builder.
This is the error I’m getting –

Can anyone help me as to where am I missing something.
I have added the public key in both builder.tsx and page.tsx for connecting to the right account.

[imdb]

There’s some bug not sure what it is, for me what fixes this when it happens is I edit my app/layout.tsx file and add an import
import “…/builder-registry”;

that points to the builder-registry.ts file. Sometimes I have to comment it out then put it back.

Other things to try is do a Build of the project and check for errors, if during the build you don’t see the /builder-demo page being built that means you probably need to do this import trick from above.

Also you need to do that import anyways if you’re going to use custom components. Without that being there this ‘Register custom components’ feature doesn’t actually register them with Visual Builder.

There’s no documentation for that.

[manish-sharma]

Hello @JiyaAgrawal20,

It looks like you were able to resolve the preview error issue, is that right?