I almost shipped the admin search key to the browser. Use a read-only key on the storefront and keep index writes on the server only.
Next.js. Shopify catalog. Algolia InstantSearch on the PLP. Merchandising jobs on the server. If the browser received the admin key, every visitor with DevTools received the catalog write button.
Nothing, at first. Search still works. An admin key can search. Then someone copies the key from the network tab and clears an index, or dumps every record, or changes a ranking that merchandising spent a week on. Shoppers notice empty hits. You notice a support channel that says "search is gone."
InstantSearch wants searchClient. algoliasearch(appId, adminKey) returns a client. It answers queries. It also answers deleteIndex. I had both keys in the same env file. The Next.js client bundle does not care that you named the variable ALGOLIA_ADMIN_API_KEY in a comment. If it is NEXT_PUBLIC_, it ships.
The public key is a search-only key from the Algolia dashboard. ACL: search. Not addObject, not deleteIndex, not settings. InstantSearch on the storefront uses that. Server routes that push Shopify / Sanity records use the admin key and never import that module into a client component.
// client: InstantSearch
const searchClient = algoliasearch(process.env.NEXT_PUBLIC_ALGOLIA_APP_ID, process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_KEY);
// server: merchandising / index writes
const adminClient = algoliasearch(process.env.ALGOLIA_APP_ID, process.env.ALGOLIA_ADMIN_API_KEY);If a server helper needs to run during SSR of the PLP, pass hits as props. Do not pass the admin client. Do not "just for now" reuse it in a hook.
Algolia will let a search UI use an admin key. That is not a feature. That is you publishing the index password next to the product grid.
Happy coding!
Sander