How to Connect Algolia with Sanity and a Next.js Website

15 replies

Last updated: Nov 25, 2022

Hello, guys im trying to connect

algolia

with sanity and the next.js website. Is there any docs and demo of it please let me know if anyone integrated this. Please help me I'm very new. I want to connect this in my e-commerce website. Im trying to connect this but is there any way to send data directly to

algolia

from

Sanity

. Please help

AI Update

Welcome! Integrating Algolia with Sanity and Next.js for your e-commerce site is definitely doable, and the good news is that Sanity has comprehensive documentation to guide you through it.

The Current Recommended Approach

The modern way to sync Sanity content with Algolia is to use Sanity Functions (serverless functions that run on Sanity's infrastructure) combined with the official Algolia JavaScript client directly. This approach gives you full control and doesn't require any additional packages beyond the official Algolia client.

Complete Step-by-Step Guide

Sanity has an official guide for implementing front-end search with Algolia that covers everything you need, including:

Initial indexing - A script to sync all your existing content to Algolia
Incremental updates - A Sanity Function that automatically syncs changes when you create, update, or delete content
Front-end implementation - React/Next.js search components using Algolia's InstantSearch

There's also a complete working example on GitHub with a live demo you can reference.

How It Works

The setup sends data directly from Sanity to Algolia automatically:

You define a Sanity Function that listens for document events (create, update, delete)
When a product or content piece changes in Sanity, the function triggers
The function sends the relevant data to your Algolia index using the Algolia client
Your Next.js frontend queries Algolia for fast search results

Quick Overview of the Process

Install the Algolia client:

npm install algoliasearch

Set up environment variables with your Algolia credentials (App ID, Search API Key, Write API Key)

Create an initial sync script to index your existing products/content to Algolia

Deploy a Sanity Function that keeps Algolia in sync as content changes. The function uses GROQ to project exactly which fields you want indexed

Build your search UI using React InstantSearch in your Next.js app

Perfect for E-commerce

This approach works great for e-commerce! You can index:

Product names, descriptions, prices
Categories and tags
Variants and SKUs
Any custom product data

The guide includes customization options for handling large documents, filtering specific content types, and controlling exactly what gets indexed.

Additional Resources

GROQ-Powered Webhooks filters guide - helps you understand how to filter which documents trigger your sync
Functions local testing guide - test your sync function before deploying
Algolia integration examples on Sanity Exchange - community implementations

The official guide is really comprehensive and walks through everything step-by-step. Since you're new to this, I'd recommend following it closely - it even includes testing instructions so you can verify everything works before going live.

If you get stuck, the Sanity community Discord is super helpful, and many folks have implemented this exact setup for e-commerce sites!

Not sure if there is anything else out there that is ‘better’ but a quick google suggested this, https://github.com/sanity-io/sanity-algolia

Here's a blog post by

user B

https://hdoro.dev/integrating-sanity-io-algolia

I did this

https://www.invisionapp.com/search

Algolia crawls the site, and then the config is in Sanity

I really did not like using the Algolia React components.

I ended up coding it myself, used

react-fast-compare

swr

, and wrote an api to ping sanity and algolia.

It was a fun project, but it took a bit

That works great Jon...lightning fast search results

Yeah I was pleased with the final result. Algolia had theirs setup to do a search per key stroke, and that seemed like overkill to me. So I X’ed that.

Thanks,

user J

and

user M

for the correct suggestions. I follow the ins and it's working fine. On the other hand, I'm getting one error could you please help me solve this. The webhook is not working correctly. the code is shown below. The wehook showing

*This Serverless Function* has timed out.

How is fix this issue?

import indexer from 'sanity-algolia';

import { algoliaInstance } from '../../graphql/utils/algolia';
import sanityServerClient, { algoliaSanityQuery } from '../../utils/sanity';

const handler = async (req) => {
  const passphrase = 'ALGOLIA_SECRET';
  if (passphrase !== process.env.ALGOLIA_SECRET) {
    return {
      status: 401,
    };
  }
  const index = algoliaInstance.initIndex(process.env.ALGOLIA_INDEX);
  const sanityAlgolia = indexer(
    {
      product: {
        index,
        // The projection is the piece of the GROQ query
        // where we determine what data to fetch
        projection: algoliaSanityQuery,
      },
      // 💡 Could have many other document types here!
    },

    // Serializer function for manipulating documents with Javascript
    // I'm not using it as GROQ is doing all the work
    (document) => document,
    // (document) => console.log(document, 'document'),
    // Visibility function to determine which document should be included
    (document) => !['unapproved'].includes(document.status),
  );
  // console.log('sanityAlgolia', sanityAlgolia);
  return sanityAlgolia
    .webhookSync(sanityServerClient, req.body)
    .then(() => ({
      status: 200,
      body: 'Success!',
    }))
    .catch(() => ({
      status: 500,
      body: 'Something went wrong',
    }));
};

export default handler;

What is

sanityAlgolia

I just wrote simple API’s in the

/api

dir within my nextjs project.

What’s your network tab say?

hey

user B

is there any way to send the in

levels

using

groq

query format is shown below

 'categories.lvl0',
    'categories.lvl1',
    'categories.lvl2',
    'categories.lvl3',

and here is my groq query

export const algoliaSanityQuery = `
*[
  _type == 'product'
  && !(_id in path('drafts.**'))
  && defined(slug.current)
] {
  "categories": categories[]->{
    title,
    "slug": slug.current,
    _id,
  },
 
}`;

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo