Next.js + seo friendly urls for facet selection

Open Q&A
,
1

Hi everyone!
After waiting for a very long time the arrival of react-instantsearch-hooks-router-nextjs I’ve been trying to implement it on an existing next.js installation.

I’ve some faceting that gets mapped to a seo friendly url like:
xxx.test/shop/use/off-road

In my next.js installation I have a a /shop folder with 2 routes: index.js and [...slug].js, they contain the same code, and components and of course the instant search configuration following the documentation for ssr rendering +

The problem I have is that when the faceting gets mapped to a /use/xxx/ url next.js re-renders the page to the new route moving away from the index route to the […slug] one.

In the documentation and in the examples I could only find use cases when the filtering gets mapped to some query strings, but never to seo friendly urls.

Anyone can shed some light?
Thanks a lot

2

Made some progress, using the push callback available inside the routerOptions:

routerOptions: {
        push(url) {
          //console.log('url', url, router)
          // Update the URL with a shallow route change
          router.push(
            {
              pathname: router.asPath
            },
            url,
            { shallow: true }
          )
        },

So I can force to remain in the same path while just pushing the history with the shallow parameter.
Works fine when working inside the /shop/index.js route, when the page is inside the [...slug].js route at every switch of facet it refresh the page anyway and in the console I see a 404 to the relative json of the path is trying to fetch.