Algolia is one of those heroes of the AI space that I rarely hear about in the daily AI news, but they are powering thousands of websites on the web, many of them open source, giving them Google-like search intelligence and more.
You can read more about the technology and especially the analytics features here
https://www.algolia.com/doc/guides/getting-started/what-is-algolia/
and Algolia for Netlify
https://www.algolia.com/doc/tools/crawler/netlify-plugin/quick-start/
But did you know that you can use the same technology not only for large websites, but also for a small blog or Webshop?
In this blog post, I’ll walk you through the simple process of integrating Algolia search into your Netlify-hosted Next.js blog.
How it works in a nutshell:
- Add your website to Algolia
- Algolia crawls your site regularly to get the latest content in a new index for your site.
- Get your website index snippet and API keys and add it to your code
- your code queries Algolia for every search on your site.
Let’s go.
Prerequisites
- A blog using the nextjs-blog-theme template
- A Netlify account
- Basic knowledge of Next.js
Step 1: Set Up Your Blog
First, clone and deploy the blog template:
https://app.netlify.com/start-with-template?entryPoint=from%20Sites%20page
Step 2: Install Algolia Crawler
- Visit Algolia Crawler for Netlify
- Click "Sign in to Algolia with Netlify"
- Authorize the Algolia crawler application
- Search for your site and click "Install"
- Confirm by clicking "Install plugin"
Copy the snippet above. We'll use it later to add Algolia to our blog.
I If everything is set up correctly, you should now be able to see the index and the records for your blog posts.
https://dashboard.algolia.com/
Step 3: Configure Your Credentials
- Get your Algolia App ID and API key from the Algolia dashboard
- Replace placeholder values in AlgoliaSearch.js:
- YOUR_APP_ID
- YOUR_SEARCH_API_KEY
- YOUR_NETLIFY_SITE_ID
Step 4: Add Required Components
Create these files in your project:
1. pages/_document.js
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html lang="en" className="theme-compiled">
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
</Head>
<body className="antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base">
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
2. components/AlgoliaSearch.js
import React, { useEffect } from 'react';
import Head from 'next/head';
const AlgoliaSearch = () => {
useEffect(() => {
if (window.algoliasearchNetlify) {
window.algoliasearchNetlify({
appId: 'YOUR_APP_ID',
apiKey: 'YOUR_SEARCH_API_KEY',
siteId: 'YOUR_NETLIFY_SITE_ID',
branch: 'main',
selector: 'div#search',
});
}
}, []);
return (
<>
<Head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>
</Head>
<div id="search" className="mt-6 max-w-md mx-auto"></div>
</>
);
};
export default AlgoliaSearch;
3. Update components/Header.js
import Link from 'next/link';
import AlgoliaSearch from './AlgoliaSearch';
export default function Header({ name }) {
return (
<header className="pt-20 pb-12">
<div className="block w-12 h-12 mx-auto mb-4 rounded-full bg-gradient-conic from-gradient-3 to-gradient-4" />
<p className="text-2xl text-center dark:text-white">
<Link href="/">
{name}
</Link>
</p>
<AlgoliaSearch />
</header>
);
}
Step 5: Deploy and Test
- Commit your changes
- Push to your repository
- Netlify will automatically deploy your site
- The crawler will index your content
- Search functionality will be available in the header
Your blog now has powerful search capabilities! The search box will appear in your header, allowing users to search through all your blog content instantly.
Please note that Neural Search is only available for higher planes, see https://www.algolia.com/pricing for more information. The free tier of Algolia provides sufficient capacity for most personal blogs. For larger sites or advanced features like neural search, you'll need to upgrade to a paid plan.
Top comments (0)