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 :-
the links dynamically to redirect to the product details page so they also change when database entries change
the product details page which fetches the right product and changes when the data in database changes.
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.
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.
For setting the link dynamically to redirect to the product detail page, you may find help at
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
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
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 ?
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):