Add Algolia Autocomplete to Next.js
Budget: €30 – €250 EUR
My Next.js + Strapi application already uses Algolia for instant search; the index is populated and the algoliasearch client is configured. The remaining step is to enrich the search bar with Algolia’s Autocomplete component so users immediately see relevant suggestions as they type.
Here is what I’m after:
• Integrate the latest @algolia/autocomplete-js (or the compatible React wrapper) into the existing search bar component.
• Style the dropdown so it blends seamlessly with our current UI—fonts, colours and spacing should mirror the rest of the app rather than Algolia’s default look.
• Keep the implementation clean and component-based so I can reuse it elsewhere.
Acceptance criteria
– Autocomplete opens on focus and updates on keystroke without page reloads.
– Selecting a suggestion routes to the correct results page, preserving our router logic.
– No visual drift: padding, hover states and typography match the existing design system.
– Code is pushed via Git with concise setup notes so I can replicate locally.
The core tech stack is Next.js with Strapi v4 as the CMS; TypeScript is enabled. Let me know if you need any extra project context, and feel free to suggest micro-optimisations such as debouncing or caching if they slot in easily.
Here is what I’m after:
• Integrate the latest @algolia/autocomplete-js (or the compatible React wrapper) into the existing search bar component.
• Style the dropdown so it blends seamlessly with our current UI—fonts, colours and spacing should mirror the rest of the app rather than Algolia’s default look.
• Keep the implementation clean and component-based so I can reuse it elsewhere.
Acceptance criteria
– Autocomplete opens on focus and updates on keystroke without page reloads.
– Selecting a suggestion routes to the correct results page, preserving our router logic.
– No visual drift: padding, hover states and typography match the existing design system.
– Code is pushed via Git with concise setup notes so I can replicate locally.
The core tech stack is Next.js with Strapi v4 as the CMS; TypeScript is enabled. Let me know if you need any extra project context, and feel free to suggest micro-optimisations such as debouncing or caching if they slot in easily.