Empty url for preview not working on homepage

Hi,
I am trying to access the home page with the “http://localhost:3000/” URL
but I am not able to use this URL in the visual editor
I am getting the preview load error
I followed the instructions from docs but that isn’t working

Builder content link


Hey @gamersensei What is the Tech stack you are using? The error might be caused because of your folder structure. Follow our Quickstart Guide to make sure you are routing the pages correctly.

hi @sheema ,
i am using next js , i did install it following the quick start guide

The Quickstart Guide changes the folder structure which can cause an issue when loading the home page. You need to make sure you are following the app structure provided in the guide.

Paste the following code into a new file within the pages directory called [...page].tsx (you must include the brackets and ellipses), making sure to replace YOUR_API_KEY with your Public API Key, which you can find in the Account section of Builder.

Tip: If you don’t have a pages directory, be sure to create one. Or, if you prefer to use the App Router instead, see the guide for integrating the Next.js App Router.

Tip: If you don’t have an index route, such as pages/index.tsx , use pages/[[...page.tsx]] with two sets of square brackets. The two square brackets means that Builder handles the app’s home page.

The single set of square brackets, in this tutorial, assumes that you are keeping your home page.

Alternatively, you can checkout our github repo https://github.com/BuilderIO/builder/tree/main/examples/next-js-simple.
You wouldn’t need to change the folder structure in this one. Your folder structure should look like this

i do have the similar structure with index.tsx
folders

@sheema thanks for the help changing the component in index.tsx worked

1 Like