Algolia Search Starter

Algolia Search Starter

A minimal Next.js starter showing how to use Algolia with the Algolia integration on the Vercel Marketplace. Deploy it, seed the sample products, and you have a full search experience — search-as-you-type, highlighting, keyboard navigation (⌘K) — powered by SiteSearch components built on React InstantSearch.

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

Deploy your own

Deploying this starter with the button below installs the Algolia integration on your new project. It provisions an Algolia app and injects the API keys as environment variables — no manual configuration needed.

After the first deploy, seed the sample data once:

1
git clone https://github.com/<your-account>/algolia-search-starter && cd algolia-search-starter
2
npm install
3
npx vercel link         # link to the project you just deployed
4
npx vercel env pull .env.local
5
npm run seed            # pushes data/products.json to the starter_products index

Reload your deployment — search is live.

How it works

The integration injects three environment variables into the Vercel project:

The browser-safe values are mapped in next.config.ts via the env key. The write key is deliberately not mapped.

• app/page.tsx — landing page rendering the search experience
• components/search.tsx — SiteSearch component (algoliasearch lite client + react-instantsearch)
• data/products.json — 20 sample products
• scripts/seed.mjs — idempotent seed script targeting the starter_products index

Local development

1
git clone https://github.com/algolia/algolia-search-starter && cd algolia-search-starter
2
npm install
3
npx vercel link          # link to a Vercel project with the Algolia integration installed
4
npx vercel env pull .env.local
5
npm run seed             # idempotent - safe to re-run
6
npm run dev

Open http://localhost:3000 and hit ⌘K.

Learn more

• Algolia documentation
• Algolia on the Vercel Marketplace
• SiteSearch component registry
• React InstantSearch

License

MIT