Integrating Search UI with NextJS Router Dynamic Routes

Elastic Search
1

I'm using the steps written in NextJS Integration , when integrating Search UI with NextJS Router, I'm having troubles in the case I have dynamic routes, ie. /seller/[id], then when activating some Facets, the url get lost, instead of writing /seller/12 for id=12 writes /seller/[id]

1 Like
2

Hi @Lew_Ashby,

Could you clarify /seller/[id] is the url you're navigating to from Search UI? NextJS router has difficulty with Search UI routing. Could you share an example of this working in codesandbox?

3

Hi @joemcelroy, thanks for the reply

seller/[id] is a page were the user can navigate to get items from an specific seller, lets say. So, inside that page I use Search UI for filtering, etc, those items, when I activate a facet the url gets the parameters from the filters but rewrites the actual value of id with [id], ie. instead /seller/12/search_ui_filters the urls becomes /seller/[id]/search_ui_filters were search_ui_filters are all the filters activated

4

thanks! Ive replicated the issue, working on finding a solution :slight_smile:

5

Right this is a working solution on codesandbox priceless-dhawan-wpzewc - CodeSandbox

The issue was we were updating the query params without the id in the query param. Nextjs uses the query params to interpolate the url. In the example above im retrieving the id and creating a new query object which contains both search ui params and next js router params.

Not too happy with the solution. Will update documentation if I figure a cleaner way, but this should unblock you.

2 Likes
6

thanks @joemcelroy for the solution and explanation, I appreciate the help.
I hope the documentation get some update about this issue

7

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.