Integrating Algolia DocSearch into Next.js like Docusaurus

For the new Front Matter website, I needed to integrate search capabilities. Instead of building my own search experience this time, as I did on this website. I wanted to give Algolia a try.

The first time that I noticed Algolia was on the Docusaurus website. Docusaurus uses the service to search through all the documentation and works pretty fast and efficiently.

Show image

It happens to be that Algolia also provides a search implementation for documentation site via DocSearch. They will crawl your content, and you need to implement the controls on your website.

While waiting to have the Front Matter site approved, I found that you can run the services yourself.

{{< blockquote type="info" text="Run DocSearch by yourself

In this article, I will explain what I did to make it all work.

Prerequisites

Before you can start, you require the following:

• An account for Algolia: https://www.algolia.com/
• Created your first application on Algolia and an index. You will perform these steps while signing up.
• The application ID and search only API key. You can find both when going to your Algolia dashboard, click on platform, and in the API Keys section, you will find both.

Integrating DocSearch into Next.js

I accidentally stumbled upon the following docsearch.js GitHub repository. This project provides you the component like the one that Docusaurus uses. Luckily, there is also a React version available as an npm package but without any documentation available for you to consume.

Installing the component can be done by running: npm i @docsearch/react@alpha.

Once installed, you can use it as follows in your code:

1
import * as React from 'react';
2
import { DocSearch } from '@docsearch/react';
3

4
export const Searchbox: React.FunctionComponent<{}> = ({}: React.PropsWithChildren<{}>) => {
5

6
  return (
7
    <DocSearch
8
      apiKey={process.env.NEXT_PUBLIC_AGOLIA_APIKEY || ""}
9
      indexName={process.env.NEXT_PUBLIC_AGOLIA_INDEX || ""}
10
      appId={process.env.NEXT_PUBLIC_AGOLIA_APPID || ""}
11
      disableUserPersonalization={true}
12
      />
13
  );
14
};

Once integrated, you need to add one final thing, the CSS. Otherwise, the components from DocSearch would not be styled.

Go to your _app.tsx file, and add the following reference:

1
import '@docsearch/css';

In my case, the result looks as follow:

Show image

Running DocSearch crawler

The final step is to get your data crawled and push the records to Algolia. If you applied for DocSearch, you would have to wait until your site is added to their system. If you do not want to wait, I recommend checking out the following guide from Algolia: running your own crawler.

Show image