Algolia Integration

Complete guide to integrating Algolia search in your Founderflow Boilerplate. Learn how to set up instant search, configure search indices, and provide powerful search experiences for your users.

Overview

🔍

Algolia Search Integration

Algolia provides powerful, fast, and relevant search capabilities with typo tolerance, faceted search, and instant search suggestions. Perfect for content discovery and user experience enhancement.

✓

Instant Search

Real-time search results as users type

✓

Typo Tolerance

Smart handling of misspellings and typos

✓

Faceted Search

Filter results by categories and attributes

✓

Search Analytics

Detailed insights into search behavior

✓

Personalization

AI-powered search result personalization

✓

Multi-language

Support for multiple languages and locales

Setup & Configuration

Environment Variables

Configure your Algolia integration with these environment variables:

.env.local

# Algolia Configuration

NEXT_PUBLIC_ALGOLIA_APP_ID=your_app_id

NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=your_search_api_key

ALGOLIA_ADMIN_API_KEY=your_admin_api_key

NEXT_PUBLIC_ALGOLIA_INDEX_NAME=your_index_name

Algolia Client Configuration

Set up the Algolia client for search operations:

lib/algolia.ts

import { algoliasearch } from 'algoliasearch';

const client = algoliasearch(

process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,

process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY!

);

const adminClient = algoliasearch(

process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,

process.env.ALGOLIA_ADMIN_API_KEY!

);

export const searchClient = client;

export const adminSearchClient = adminClient;

export const indexName = process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME!;

Search Implementation

Search Component

Create a search component with instant search functionality:

components/search/AlgoliaSearch.tsx

'use client';

import { InstantSearch, SearchBox, Hits } from 'react-instantsearch';

import { searchClient, indexName } from '@/lib/algolia';

export default function AlgoliaSearch() {

return (

</InstantSearch>

);

}

function Hit({ hit }: { hit: any }) {

return (

<h3 className="font-semibold">{hit.title}</h3>

<p className="text-gray-600">{hit.excerpt}</p>

</div>

);

}

Data Indexing

Index your content to make it searchable:

lib/algolia-indexer.ts

import { adminSearchClient, indexName } from '@/lib/algolia';

export async function indexContent(content: any[]) {

const index = adminSearchClient.initIndex(indexName);

try {

await index.saveObjects(content);

console.log('Content indexed successfully');

} catch (error) {

console.error('Error indexing content:', error);

}

// Example usage in API route

export async function POST(request: Request) {

const content = await request.json();

await indexContent(content);

return Response.json({ success: true });

}

Next Steps

Now that you understand Algolia integration, explore these related areas:

Sanity Integration

Learn how to integrate search with your CMS content.

Customization Guide

Customize your search experience and UI components.