Add link component to algolia nextjs starter

Hey there folks happy new year :slight_smile:
does anyone here have an example of how I can add the link component to the nextjs example on github so that the search-results actually become clickable?

thanks in advance
Linda

Hi Linda,

This plugin leverages and exposes React InstantSearch, meaning it has the same API. When defining your hit component (the one you pass to the Hits widget, you can wrap it with the Link component from Next.js.

// ... other imports
import Link from 'next/link';

function HitComponent({ hit }) {
  return (
    <Link href="#">
      <Highlight attribute="name" hit={hit} />
    </Link>
  );
}

const Page = () => (
  <>
    <Configure hitsPerPage={12} />
    <SearchBox />
    <RefinementList attribute="categories" />
    <Hits hitComponent={HitComponent} />
    <Pagination />
  </>
);

Please note that next-instantsearch isn’t an official Algolia library, so we’ll only be able to help with any support related to React InstantSearch. We have an example of a working Next.js/React InstantSearch SSR application here.

1 Like

Thank you sooooo much​:star_struck::star_struck::star_struck::star_struck::star_struck:
Does this then mean that i have to have all the urls in there? I am doing a search for a blog. Is it the same procedure if i Just use react and not next.js? Not decided on whether or not i should use react or bext