Integrating Algolia in NextJS Commerce

In this post, I'll demonstrate how to enhance an already awesome open source headless e-commerce project - NextJS Commerce. This enhancement will focus on relying on Algolia to implement a listing page.

Prerequisites

Before getting started, I'm assuming you already have NextJS Commerce setup. This also entails you have a Shopify account.

Step 1: Install Shopify Plugin

Go to Shopify app store and install the Algolia Search and Discover plugin. Follow through the instructions and Algolia will ask to connect your account through the plugin. If you don't have an Algolia account yet, you can create one.

Step 2: Configure the Plugin

Afterwards, it should reroute you to the configure plugin screen. Select the Algolia application you want to store your indexes. If you just created your account, an initial application is created for you (My First Application). For those who have an existing account I recommend go to your Algolia dashboard and create a separate one.

Before you proceed, take note of the Application ID and the Search API Key. The Application ID is the string within the parenthesis after the name. If you missed this step you can always go to the Settings tab to check for these details.

After hitting save, the plugin will attempt to synchronize your Shopify products to your index. Still in the Shopify plugin screen, from the tabs, go to Indexing. You should see the indexing status loading. This background process may take awhile so you can leave the page for now.

Step 3: Install React InstantSearch

From this point onwards, we will be coding and altering NextJS Commerce. In your project, install React InstantSearch. This package will provide helpful components for rendering widgets that we can use in building our listing page (ie: sorting and filtering)

npm install algoliasearch react-instantsearch
# or
yarn add algoliasearch react-instantsearch

Step 4: Setup React-InstantSearch and Render Hits

To have a fresh start, I recommend creating a new NextJS page in your project. Copy the snippet below and configure the searchClient to your own Application ID and Search Key you took note in Step 2.

'use client';
import { AlgoliaProduct } from '@/types/algolia';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, useHits, UseHitsProps } from 'react-instantsearch';

export default function Shop() {

  const searchClient = algoliasearch('Application ID','Search Key');

  const RenderCustomHits = (props: UseHitsProps) => {
    const { hits } = useHits(props);

    const renderHits = hits.map((h) => {
      const hit = h as unknown as AlgoliaProduct;
      return (<h2 key={hit.id}>{hit.title}</h2>);
    });
    return renderHits;
  };

  return (
    <main className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <InstantSearch
            searchClient={searchClient}
            indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME}
        >
          <RenderCustomHits />
        </InstantSearch>
    </main>
  );
}

The InstantSearch will serve as a wrapper to all Algolia widgets. The useHits is a hook used to get the products from the index. Looping through it will return an entry in the index. In this example, I'm just rendering the title. You can style it out as you see fit and create an ideal product card for your listing page.

There are a lot of widgets available through the React InstantSearch. You can build out pagination, sorts and filters quickly by utilizing this package. To know more check out their docs.

Conclusion - The Tip of the Iceberg

With Algolia, you can pretty much build anything a listing page needs. However at the end of the day they are a paid service. So be mindful and read through their pricing.

I've also made an advance guide in integrating Algolia in NextJS Commerce. The blog pertains in rapidly developing a product listing page using this tech stack. It shows how to further enhance the page and integrate functionalities like sort and filter. If you follow through the steps here, you can proceed to step 3 in my blog.

Closing Remarks

This is my first post in this community and I'm happy to hear some thoughts and feedback. One of my motivation in creating this post is to inform headless ecommerce developers on one of the many ways in quickly building a product listing page.