E-Commerce Storefront with Next.js & Typesense

In addition to search experiences, Typesense can also be used to build performant browsing experiences like product listing pages in an ecommerce store.

This implementation specifically uses Next.js for a frontend (React) framework.

Live Demo | Source Code

Key Highlights

• Here's how to configure the Typesense Instantsearch Adapter with react-instantsearch.
• Here's how to configure the RefinementList widget to filter items.
• Here's how to configure the ToggleRefinement widget to filter boolean fields in records.
• Here's a custom RangeSlider widget implementation.
• Here's how to highlight matched terms using the Highlight widget.
• Here's how to configure the SortBy widget to work with Typesense's support for multiple sort orders on the same index / collection.
• Here's how to allow your users to configure how many results they want to see per page.