NextJS URL Routing Example

Hello,

I have been trying to implement react-instantsearch in my Next.JS project and having trouble working it out with url routing with custom routes that next.js provides.

There is no access to the asPath that it has and it would be great if there is an example of URL routing with nextjs.

Thanks!

There will be one example illustrating how everything can work with next.js

But basically you can use the Router api like this:

const searchStateToUrl = searchState =>
  (searchState
    ? `${window.location.pathname}?${qs.stringify(searchState)}`
    : '');

...

 onSearchStateChange(searchState) {
    const href = searchStateToUrl(searchState);
    Router.push(href, href, {
      shallow: true,
    });
  }

For the rest, it’s as usual.

Hi,

Thank you for the snippet.

So I am not sure how do I only render the complete page without SSR in next js, so I get an error with the above code.

window is not defined.

Not sure how to do it properly here.

Can you share a code sample?

Just created a repo with just next js, custom routing and instantsearch.

Please have a look https://github.com/harshmaur/react-instantsearch-next

Thanks for the repo @harshmaur,

I’ll try to help you debug it. In the mean time you can look and run this example to take inspiration of: https://github.com/algolia/react-instantsearch/tree/feat/server-side-rendering/packages/react-instantsearch/examples/next-app

It’s still under development but I believe it works so it should help you.

Great! THanks! I will check this out, Infact I am moving my whole frontend stack to nextjs and I use almost all components in react-instantsearch, so should be a good way to test out the feature.

How Do install and run your modified core in my own project?

What do you mean @harshmaur?

To run the next.js app, just do yarn and yarn run dev.

@marielaure.thuret
I wanted to use the branch you created in my own project instead of downloading it and running it separately.

I tried to install “beta” but I dont see server.js being included in the react-instantsearch of node_modules.

I ran your example as well and I get this error https://cl.ly/0r3c2B3m0E1I

Yes for now it will not work because it has not been released yet (there’s a PR in progress).

The example was more for you to take inspiration from, especially regarding the URL sync.

Hey, Yes, I am monitoring the PR, also I have seen the example and I find that its only possible to achieve it after I get the feature in the release itself. So I will wait for it. I hope it wont take long now.