Frontend
Frontend
storefront-cli add-module coveo wires the Next.js frontend for you. Its install.js copies the module into sf-modules/coveo/ and overlays the storefront's generic extension points — the config "seams" — with the Coveo implementations. The base storefront ships these seams with native defaults, so the module plugs in additively; you don't edit core components, and a store that never installs Coveo is unaffected.
After installing, the only thing you need to do by hand is set the environment variables.
What the CLI wires
| Seam (in your project) | What Coveo provides |
|---|---|
config/listing-data-source.ts | Backs category & search pages with the Coveo headless SSR engine instead of the native unified searchProducts. |
config/module-providers.tsx | Mounts the Coveo client engine provider around the app. |
config/module-root-components.tsx | Mounts the analytics + customer bridges at the app root. |
config/facet-type-config.tsx | Registers the Coveo price facet renderer. |
config/search-results-slot.tsx | Renders Coveo instant (as-you-type) results in the search modal. |
components/products-listing/listing-client-provider.tsx | Hydrates the Coveo client engine from the SSR state. |
These files land in your project, so you can read and adapt them — see Configuration Files for the facet/field/sort/engine config the module also ships.
Environment variables
Add the Coveo keys to your .env:
NEXT_PUBLIC_COVEO_ORGANIZATION_ID=xxxxyyyyzzzz
NEXT_PUBLIC_COVEO_ACCESS_TOKEN=xxx-yyyy-zzz-www-cccccccccc
NEXT_PUBLIC_COVEO_TRACKING_ID=xxxx-yyyy-zzzzNEXT_PUBLIC_COVEO_ACCESS_TOKEN is the Coveo search API key. The headless engine routes its requests through the Alokai middleware, so it uses NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL on the server (which must be an absolute URL) and NEXT_PUBLIC_ALOKAI_MIDDLEWARE_API_URL on the client — both already part of the storefront's standard env.
Currency and locale
The module reads the active currency from the vsf-currency cookie and the locale from next-intl (the NEXT_LOCALE cookie / URL prefix), and sends them to Coveo on every request — so multi-currency prices and per-language results follow the shopper automatically. See Quick Start for the index-side fields this relies on (ec_price_value, ec_language).