Home App Docs Blog Github

Connect Data Model as Data source in pages

Hi!

What are you trying to accomplish
I want for each of my data model to have the same page structure, but I don’t want to build the page each time.

In our use case, we have content writers that will be creating content in BuilderIO, using Data models. This is nice because it looks like a form, so the content writer can just fill the fields with the constraints we want.

So I have this page, listing all the “Item” data models:
https://mysite.com/items

I want to build this page for each model:
https://mysite.com/items/{slug}
Where the “slug” is declared on the “Item” data model.

I don’t want to create N pages items/X, items/Y, I’d like to have one page model Item that will display the item I want based on the URL slug.

Here I can almost do it with a connector:
Screen Shot 2021-11-30 at 12.52.57 PM

Code stack you are integrating Builder with
We are using NextJS

Thanks!

@Paul yes of course, this is definitely possible within Builder.

I would recommend you check out this guide on creating a Blog: Creating a blog in Builder - Builder.io

Which essentially goes through the same process, but instead uses a blog page as opposed to an item. Each time a new model is authored, it should automatically show on both the /items page and have its own /items/{slug} page. Hopefully that answers your question, try it out and let me know if you encounter any issues, or have any further questions!

@TimG Hey, thank you for the response, this is great but we would to minimize the code in the front-end of our app and handle all the writing of the pages in BuilderIO essentially. Basically having only one [page].tsx to handle all the pages of the app. Do you think this is possible?

@Paul yes definitely. Going back to the blog example I linked above: Creating a blog in Builder - Builder.io

You really could omit the first List articles page mentioned, and only do the [page].tsx as you mentioned. Then within builder you can create a page at https://mysite.com/items, connect the items data you have created, and then loop over that data to show all the items. Each would then link to the item pages using the logic outlined in the Add a Preview section of the linked page

You can find more on connecting data and looping over items on the pages below: