Dynamic Pages with Data from my database API

Technical Questions
,
1

So i am able to import data from my database table via json api endpoint into a grid on a page in my nextjs app and binding it there for a well working “product cataloge” page but how do I set up :-

  1. the links dynamically to redirect to the product details page so they also change when database entries change
  2. the product details page which fetches the right product and changes when the data in database changes.
  3. each product has a few specific options on my database which again i think i can bind with a json api endpoint. this i think requires nested dynamic routing but i only see catch all segments in my nextjs file so lost on how to implement this.
  4. book now button on the product details page is supposed to redirect to a url(my flutter app) with a slug comprised of parameters of selected product variation and the product. how do i implement that ?

So this might be a handful but really need to get these 4 bits sorted asap.
Cheers.

3

It seems builder.io is incapable of this. Probably plasmic, clutch or custom dev is better suited for this.

4

Hello @nimkuski,

Welcome to the builder.io forum.

  1. For setting the link dynamically to redirect to the product detail page, you may find help at

  1. Can you give us more context on this requirement, how are you fetching data from the database for the product page? Is it using product id?
    Set Up and Use Product Data - Builder.io

  2. You can probably use the section model and use targeting from the builder to achieve this
    Section Models - Builder.io
    Targeting Content in Builder - Builder.io
    Create a drag-and-drop editable blog with Next.js

  3. You should be able to create this book now link using data binding and builder state object, further, you can even use reusable symbols for this implementation

Let us know if the above doesn’t help. Thank you!

5

i am using a postgres database and not builder’s cms or contentful to store/fetch data.
Also you completely missed point 3. It’s nextjs’s dynamic nesting and targeting can’t do what that does from what I understand.
Can you answer again keeping in mind that i am fetching data from my own db ?

6

I think what you want here is to setup a page in nextjs like /products/[slug].jsx and then in nextjs fetch the necessary product data and pass it down to the builder component

Then you can bind that data you passed down. So tl;dr build your page as a Next.js route like you would any other page, just have a dynamic Builder section render the content like Manish said

E.g. you could make a section model called “product section” and have a flow like this (In pseudo code):


export default async function MyPage() {
  const productData = await getProductData();
  const builderSection = await builder.get('product-section')

  return <BuilderComponent 
    model="product-section" 
    content={builderSection}
    data={{ product: productData }} />
}

Now that product data is available to bind in our visual editor

1 Like