About algolia-search
A development skill with patterns for integrating Algolia Search, covering React InstantSearch, Next.js server-side rendering, and index synchronization. It is for developers building search interfaces and keeping Algolia indexes current.
Key features
- 01React InstantSearch Hooks search patterns
- 02Next.js server-side rendering integration
- 03Routing and URL synchronization considerations
- 04Full, record-level, and partial index updates
- 05Batching and incremental update guidance
Use cases
- 01Build instant search in a React app
- 02Set up server rendering for Next.js search
- 03Sync application data to an Algolia index
- 04Update selected index attributes only
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/algolia-searchin Claude Code to confirm it loaded.
Details
From the project READMEAlgolia Search Integration
Patterns
React InstantSearch with Hooks
Modern React InstantSearch setup using hooks for type-ahead search.
Uses react-instantsearch-hooks-web package with algoliasearch client. Widgets are components that can be customized with classnames.
Key hooks:
- useSearchBox: Search input handling
- useHits: Access search results
- useRefinementList: Facet filtering
- usePagination: Result pagination
- useInstantSearch: Full state access
Next.js Server-Side Rendering
SSR integration for Next.js with react-instantsearch-nextjs package.
Use instead of for SSR. Supports both Pages Router and App Router (experimental).
Key considerations:
- Set dynamic = 'force-dynamic' for fresh results
- Handle URL synchronization with routing prop
- Use getServerState for initial state
Data Synchronization and Indexing
Indexing strategies for keeping Algolia in sync with your data.
Three main approaches:
- Full Reindexing - Replace entire index (expensive)
- Full Record Updates - Replace individual records
- Partial Updates - Update specific attributes only
Best practices:
- Batch records (ideal: 10MB, 1K-10K records per batch)
- Use incremental updates when possible
- partialUpdateObjects for attribute-only changes
- Avoid deleteBy (computationally expensive)
⚠️ Sharp Edges
| Issue | Severity | Solution |
|---|---|---|
| Issue | critical | See docs |
| Issue | high | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |
| Issue | medium | See docs |