Algolia Integration Example

Algolia × Supabase × Vercel Starter

A minimal Next.js starter for instant, typo-tolerant search over Postgres data. Algolia indexes and searches the products, Supabase stores them, and the Algolia connector keeps the index in sync — no sync code in the app. Deploy it, seed the database, connect the two from their dashboards, and search is live.

Live demo: algolia-supabase-vercel-starter.vercel.app

Deploy your own

The button installs both integrations on your new project — Supabase provisions a Postgres database, Algolia provisions an application — and injects their environment variables. No manual configuration.

Set up the database

Create and seed a products table by pasting demo/seed.sql into the Supabase SQL Editor (open your project → SQL Editor) and running it — this demo uses a 12-column table mixing searchable and internal-only fields.

The demo/ folder holds the sample dataset and transformation used by this walkthrough — replace them with your own data when adapting the template.

Connect Algolia

Create the connector from the Algolia dashboard → Data sources → Connectors → Supabase:

1. Connect Supabase - connect to Supabase directly to prefill all the database values from the Advanced Configuration section
2. Transformation — paste demo/transform.js into the wizard's transformation editor; it maps id to objectID, returns only the searchable attributes, and derives in_stock from quantity — a transformation can compute fields, not just strip them. Check the preview: the internal-only fields (cost_price, supplier_id, internal_notes, stock_location) must be gone.
3. Destination — set the index name to products.
4. Task — run a full reindex. Add a schedule if you want recurring syncs.

Reload your deployment — search is live.

Configure facets

The sidebar filters need faceting enabled. In the Algolia dashboard, open index products → Configuration → Facets and add:

• category, price, rating — searchable facets for the sidebar
• in_stock — set as filter-only (powers the "Hide out of stock" toggle)

Local development

1
git clone https://github.com/algolia/algolia-supabase-vercel-starter && cd algolia-supabase-vercel-starter
2
npm install
3
npx vercel link              # link to the project you deployed
4
npx vercel env pull .env.local
5
npm run dev

Open http://localhost:3000.

How it works

The integrations inject these environment variables. The Algolia integration may use bare (ALGOLIA_*) or NEXT_PUBLIC_-prefixed names — next.config.ts maps either shape. Only the two Algolia search values are exposed to the browser:

⚠️ The write key must never be referenced in client code — its NEXT_PUBLIC_ prefix would inline it into the browser bundle if referenced. This app never references it.

Key files:

• app/page.tsx — landing page rendering the search experience
• components/search/search-experience.tsx — InstantSearch UI (algoliasearch lite client)
• app/products/[id]/page.tsx — product page served from Supabase, showing the DB-only fields

Going to production

• Add authentication before exposing any write path — this template is read-only.
• Enable incremental sync with a soft-delete column so removals propagate to the index.
• Trigger the connector task from the Ingestion API as a server-side extension instead of the dashboard schedule.

License

MIT