Next.js findResultsState with aroundLatLng

Hello, I’m using Next.js and am able to use the example you’ve provided to successfully servers-side render algolia search and refinement list results. However, when trying to filter the result set based on a lat/lng I’m running into trouble.

The approach I’ve taken is to add the place name into the URL for example /results/florida/miami – then the getInitialprops method will query algolia places for florida miami returning the lat/lng. I add that to searchState in an aroundLatLng property and pass to findResultsState.

It’s not returning the correct results from the server. If i swap the <Configure /> component out depending on the aroundLatLng prop that works, however. Some code:

  const newSearchState = {
      ...searchState,
      aroundLatLng: `${searchState.lat}, ${searchState.lng}`,
    }
    const resultsState = await findResultsState(CoachSearchResultsLayout, {
      ...DEFAULT_PROPS,
      searchState: newSearchState,
    })

Please let me know what I may be missing - thanks in advance!

Hi there,

I’m Dorian, software engineer at Algolia.

Do you think you could use this code sandbox template to replicate, at least in its essence, this part of your code? This would help tremendously in finding the best way to achieve what you want to do.

Thanks in advance!

Do you have a codesandbox template that using nextJS? That’s where I’m having the issue. Without having to go into the sandbox - can you please let me know if there’s a way for the findResultsState function to take aroundLatLng as an argument? Or if there’s another way to pass it geographical coordinates? i can’t seem to find the function signature anywhere…thanks!

Hi @jsw324, we don’t have a codesandbox with nextJS. I did find this other thread that may be of some help? I also found this codesandbox that uses findResultState which may give you some inspiration.

HI Cindy - Thanks for sending - the issue i’m having is specific to geolocation coordinates. findResultsState works fine for everything except for aroundLatLng - i’d like to pass lat/lng as part of searchState into that function. Can you help?

Hi @jsw324

We actually have a code sandbox for Next.js but before you jump into that, I want to check one thing first.

Even if you pass aroundLatLng, if there is no widget that takes it into account, then the value gets lost.

Imagine an example like this:

static async getInitialProps({ asPath }) {
  const searchState = {
    ...pathToSearchState(asPath),
    aroundLatLng: '48.8637,2.3615',
  }
  const resultsState = await findResultsState(App, {
    ...DEFAULT_PROPS,
    searchState,
  });

aroundLatLng is there, but if your App needs a corresponding widget which in this case is Configure.

So, in your App, you need this.

<Configure
  aroundLatLng={this.props.searchState.aroundLatLng}
/>

Let me know how it goes and if you have any question!

Thank you, and yes I have the corresponding configure widget. Question - in that case does the results returned from the aroundLatLng query come from the server? As I said, I’m able to get it working where (assuming aroundLatLng was the only search term) the results come back without taking into consideration aroundLatLng then once the page renders it flashes to the new results - similar to a traditional SPA.

I’m not sure yet, but it sounds like there is an issue with hydration.
Could you provide us a reproducible exmple here?

It will help us identify the cause of the issue.