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.

I got autocomplete with federated search working in nextjs 13. At first I was getting the error: SyntaxError: Unexpected token 'export'

After some playing around, I was able to get it working by using the dynamic import feature of next.

import dynamic from 'next/dynamic';
const Autocomplete = dynamic(() =>
  import('@components/autocomplete',).then((mod) => mod.Autocomplete)
  , {
    ssr: false,
  })

For my personal use case I wanted to get this example working in next13: autocomplete/examples/two-column-layout at next · algolia/autocomplete · GitHub

I converted the preact example to react. That along with the dynamic import did the trick!

If anyone is interested, I may make this available as a standalone package, or at the very least an example repo.

Cheers!

2 Likes