Soft navigation in Next.js 14 App Router to a page with instant search routes me back to the previous page on the client

[Francis Casibu]

🐛 Current behavior

Pretty much described it on the issue title, code: https://github.com/fcasibu/algolia-issue-sandbox/blob/main/app/_components/Search.jsx

🔍 Steps to reproduce

1. Start from home
2. Navigate to Search by clicking the link in the header
3. It will then navigate you back to home

Live reproduction

https://algolia-issue-sandbox.vercel.app/

💭 Expected behavior

It should not redirect me back to the homepage and it should stay in /search. This however does not happen if you directly go to /search.

I also tried looking into the codebase for the react-instantsearch-router-nextjs package and it uses window.location in the client, but after some digging the information it gives is not correct.

So to fix I would have to pass getLocation in routerOptions to keep using serverUrl

createInstantSearchRouterNext({
  singletonRouter,
  serverUrl,
  routerOptions: {
    getLocation() {
      return new URL(serverUrl);
    }
  },
})

But this is something that shouldn't need to be configured to fix

Package version

react-instantsearch-nextjs 0.1.14, react-instantsearch-router-nextjs 7.7.0

Operating system

macOS 13.2.1

Browser

Brave v1.63.174

Code of Conduct

• I agree to follow this project's Code of Conduct

[Aymeric Giraudet]

Hi @fcasibu,

react-instantsearch-router-nextjs is meant to be used with the pages router only, not with the app router. Naming is confusing but we made it before the app router was released :/

The InstantSearchNext component handles routing with Next.js already and computes the server url on its own, you just have to pass true to routing like :

<InstantSearchNext routing={true} />
// or
<InstantSearchNext routing />

You can see it on our docs here : https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#enabling-routing

Can you confirm it works for you with just routing={true} ? (you can even remove react-instantsearch-router-nextjs from your dependencies)

[Francis Casibu]

I am using this package because of previous project but haven't realized that, but yes it does indeed work, thanks @aymeric-giraudet

[nontone]

I also found the same issue when I added routing. should I create new issue or discussion?

follow this readme

As with the <InstantSearch> component, you can pass a routing prop to the <InstantSearchNext> component to customize the routing behavior. The difference here is that routing.router takes the same options as the historyRouter.

• https://github.com/algolia/instantsearch/tree/master/packages/react-instantsearch-nextjs

<InstantSearchNext
  indexName={indexName}
  searchClient={searchClient}
  routing={{
    router: history() as any,
    // stateMapping: simple(),
  }}
  future={{
    preserveSharedStateOnUnmount: true,
  }}
>

• https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/#rewriting-urls-manually
• https://github.com/algolia/instantsearch/blob/master/examples/react/e-commerce/routing.ts

I can't use history() without as any because of this TS error

• not show any error when using createInstantSearchRouterNext

is it possible to have example of app router with custom routing?