Algolia Search with Optimizely SAAS

Algolia + Optimizely SAAS (Remko Next.js) Integration Guide

This guide explains how to integrate Algolia Search with your Optimizely SaaS CMS project built on the Remko Starter Kit (Next.js).
It focuses on the Crawl Method, which automatically indexes your published Optimizely pages into Algolia — without manual API synchronization.

Overview

Algolia is a powerful, fully managed search-as-a-service platform that delivers lightning-fast, relevant, and typo-tolerant search results.

When connected with Optimizely SaaS, you can enable:

Real-time full-text search
Category or keyword-based filtering
Faceted navigation
Personalized content discovery

With the Crawl Method, Algolia automatically reads and indexes your Optimizely site content — no backend coding required.

Prerequisites

Make sure you have the following ready before you begin:

Requirement	Description
✅ Optimizely SaaS CMS	Project built on Remko Starter Kit (Next.js)
✅ Node.js	Version 18+
✅ Algolia Account	create from Algolia site
✅ Optimizely API Credentials	(Only needed if you plan to fetch content manually)

Setting Up the Algolia Crawler

Log in to your Algolia Dashboard → Crawler section.
Click “Create a new crawler.”
Add your site URL — e.g.

https://optimizely-something.vercel.app/
Define your crawling rules — typically, you’ll want to include pages that have:

<meta name="title" content="..." />

<meta name="description" content="..." />

<meta name="keywords" content="..." />
Start the crawl. Once complete, Algolia will automatically create an index containing your site’s structured content.

Tip: You can view and fine-tune your index data in Algolia → Indices → [your index name].

Environment Variables

These variables connect your frontend with your Algolia app.

Variable	Purpose
`ALGOLIA_APP_ID`	Identifies your Algolia app
`ALGOLIA_SEARCH_KEY`	Safe public key for frontend search
`ALGOLIA_INDEX_NAME`	Your index name in Algolia
`ALGOLIA_ADMIN_KEY`	Private admin key (backend use only)
`OPTIMIZELY_API_URL`	Only required for API-based indexing
`OPTIMIZELY_API_KEY`	Access token if using Optimizely REST API

Note:

NEXT_PUBLIC_ prefix is required so your keys are available in the browser.
Do not include your ALGOLIA_ADMIN_KEY in frontend code — it’s sensitive.

Add Algolia to Your Next.js App

Install the required dependencies:

Implementing the Search Component

Create a file like components/Search.tsx:

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

const searchClient = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY!
);

export default function Search() {
  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME!}
    >
      <div className="p-6">
        <SearchBox />
        <Hits hitComponent={Hit} />
      </div>
    </InstantSearch>
  );
}

function Hit({ hit }: any) {
  return (
    <div className="p-4 border-b border-gray-200">
      <h3 className="font-semibold text-lg">{hit.title}</h3>
      <p className="text-gray-600">{hit.description}</p>
    </div>
  );
}

Note - you can add pagination , facet and other stuff as well.

Deploying to Vercel

Push your code to GitHub (or GitLab/Bitbucket).
Connect your repo to Vercel.
In Vercel → Project Settings → Environment Variables, add the same values as in your .env.local.
Click Deploy — your search-enabled Optimizely SaaS site goes live!

Advantages of Using Algolia with Optimizely SaaS

Benefit	Description
Ultra-Fast Search	Delivers instant search results with minimal latency using Algolia’s distributed infrastructure.
Intelligent Relevance	Built-in typo tolerance, synonyms, and ranking formulas improve result accuracy.
No Backend Complexity	The crawler eliminates the need for building sync APIs — setup takes minutes.
Highly Customizable UI	Algolia’s React InstantSearch library allows you to create dynamic and interactive search interfaces.
Built-in Analytics	Gain insights into user behavior, popular searches, and zero-result queries.
Scalable & Cloud-Hosted	Perfectly complements Optimizely SaaS’s headless architecture and cloud hosting model.
Secure Key Management	Use public search keys on frontend, while keeping admin keys private for backend-only tasks.

Nov 10, 2025

Comments

error Please login to comment.