🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Discussing integrating Algolia search with Sanity and Next.js/Gatsby

12 replies
Last updated: Jul 10, 2020
Hello people,I'm User, working for Algolia.
I'm planning a live coding to show you how to add search functionality to your website built on Sanity.

Can you give me some idea regarding search? Like some special case of yours that was hard to deal with. Or some search feature you wish to have in your website, etc. Or let me know if you have any random question
Jul 10, 2020, 10:12 AM
An integration with Next.js would be nice! For Example how i can use it for filtering of the Blogposts by category and the full text search? Like on this page: https://rheinstetten.tv
Jul 10, 2020, 10:34 AM
I was thinking of using gatsby for the live coding. Do you think it still helps you if I do it on gatsby?
Jul 10, 2020, 10:35 AM
Another idea is to make a showcase fo a small shop where you can filter the articles by different properties like size, color, gender and so on
Jul 10, 2020, 10:36 AM
Not for us. We have switched from Gastby to Next.js. It’s much more flexible and has an incremental static site generation with preview mode build in. So we would focus on Next.js in the future
Jul 10, 2020, 10:38 AM
Thanks for the suggestion! I'll consider nextjs. Even if I go with gatsby, I'll give you enough information to apply with your nextjs website. The very beginning part (indexing data) is different and the rest (ui) is the same, though.
Jul 10, 2020, 10:43 AM
user S
! I’d recommend having a demo gatsby or nextjs site with at least 10-20 documents populated, and more if using multiple types. A couple use cases for Algolia come to mind:• Using Sanity + Gatsby/Next ( as a Help Center, and adding in help article search (this could include faceted search) and you could facet by solutions for iPhone or Android or Web as an example
• Using Sanity + Gatsby/Next to recommend similar articles at the end of reading a blog post
• Building out an online ecommerce shoe store (or other product store) using sanity + gatsby/next and searching through colors, brand, material, etc
Hope this is helpful!
Jul 10, 2020, 3:23 PM
user R
Great examples, i totally agree with you!
Jul 10, 2020, 3:26 PM
user R
Thanks for your examples!
One question,

as a Help Center
In that example, do you mean to have a search feature on the website? or on the studio?
Jul 10, 2020, 3:26 PM
user S
, I was thinking search on the front-end experience. The studio comes with a document search, but I haven’t stress tested it against hundreds or thousands of documents
Jul 10, 2020, 3:36 PM
Okay got it. Then I feel like your example 1 and 3 are technically the same (search with facets). Or did I miss something?And I didn't think of having a recommended article section for the live coding. Good idea!
Jul 10, 2020, 3:38 PM
From the overall perspective that there are facets, yes they are similar, but the execution can be different. In example 1 (Help Center), you could read the device type to prefer those articles first (or to display why the result was shown), “98% match because you’re on an iPhone” or something. For example 3 I was thinking would be more complex since products have multiple fields to check against (color, brand, etc), and probably could involve a more complex checkbox style faceted search whereas option 1 could either be solely sorted based on the facet or simply use a dropdown filter. What’s more, you can use these fields to provide more intelligent smart recommendations when the user clicks into one of the results at the bottom of the page. For example, viewing black nike running shoes could show other black or dark-tone running shoes at the bottom of the page, with a preference for Nike. Ultimately, its up to you how complex you want to get and what you think will help users here understand how to integrate Algolia into their Next or Gatsby front-end
Jul 10, 2020, 3:46 PM
Hey User, thanks a ton for great examples. I'll see how much I can fit into an hour. This is so helpful 🙂 I really appreciate it.
Jul 10, 2020, 4:00 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?