Hi everyone. I'm working with Nextjs ( pages route...
# community-help
s
Hi everyone. I'm working with Nextjs ( pages router ) and integrated Server-Side Typesense for products using the React Instant Search library. As I am using MUI library I have built the UI using hooks provided by React Instant Search. I implemented it by following the code practices provided by React Instant Search Lib in its documentation and by following the code example provided in the Typesense Nextjs example repo [https://github.com/typesense/showcase-nextjs-typesense-ecommerce-store]. I used custom routing logic using createURL, parseURL, routeToState, and stateToRoute methods. Issue: When I change the page ( redirect to another URL ) it goes to the new link and then suddenly goes back to the previous URL instead of persisting the new redirected URL. The URL changed in the URL address bar but reset to the last URL page ( page without any filters applied ). As you can see in the screenshot of the console, the product page is rendered but then again it goes back to the previous page calling all the routing methods. Typesense code:
Copy code
<InstantSearchSSRProvider {...serverState}>
          <InstantSearch
            indexName={indexName}
            searchClient={searchClient}
            future={{ preserveSharedStateOnUnmount: false }}
            // Synchronizing the UI state and the URL
            routing={{
              router: createInstantSearchRouterNext({
                singletonRouter,
                serverUrl,
                routerOptions: {
                  cleanUrlOnDispose: false,
                  createURL: ({ qsModule, routeState, location }) =>
                    createURL({
                      qsModule,
                      routeState,
                      location,
                      isShopPage: true,
                    }),
                  parseURL: ({ qsModule, location }) =>
                    parseURL({ qsModule, location, isShopPage: true }),
                },
              }),
              stateMapping: {
                routeToState: routeToState,
                stateToRoute: stateToRoute,
              },
            }}
          >
              <VirtualFilters />
              {/* UI components /*}
          </InstantSearch>
</InstantSearchSSRProvider>