Autocomplete and nextjs 13

Anyone that have a working sample of autocomplete and nextjs 13. The things I have working in nextjs 12 will not work as I want with autocomplete in header and then result in body. So I need to do something completely different. My plan is to use the autocomplete outside the InstantSearch context and then communicate the result through custom events… but I can’t get the autocomplete component to work. Whatever I do it is always triggering the detached mode, and the styles from @algolia/autocomplete-theme-classic isn’t loaded even though they are imported in my component.

Hey Tomas,

I was playing with a basic autocomplete with Next JS earlier this week, but stepped back to vanilla JS after having some issues with the renderer (it didn’t like that I was trying to render Vnode objects).

It sounds like you’re trying something a bit more ambitious with autocomplete + instantsearch and some hooks/routing. I know getting all the routers to play nice can be tricky – any chance you have a codesandbox or equivalent I could look at?

Haven’t had the time to play with this since life happened. My end goal is to have a (not the) autocomplete component and then also a search page showing the result. I don’t think I want to have instant search result as you type in the autocomplete box, only autocomplete suggestions. This basically means the result in the autocomplete box can just link to the search page and I think I’m good.

One thing I’ve experience so far is that the search box in the autocomplete doesn’t seem to have its initial render on the server, so instead the whole page loads and without search box and then the searchbox pops up 0.5 s later… and I don’t like that :).

I’ll see if I can create a smaller example.

1 Like

Do you know if anyone has done something like what I want to do? Basically have the autocomplete in a header and then have the search results on another page. This means that the autocomplete wouldn’t be inside the provider.

If not I think creating my own autocomplete and/or search result might be the only valid way forward.