使用 Next.js 和 Typesense 构建电商店铺前端

除了搜索体验外，Typesense 还可用于构建高性能的浏览体验，例如电商店铺中的产品列表页面。

本实现方案特别采用了 Next.js (opens new window) 作为前端（React）框架。

在线演示 (opens new window) | 源代码 (opens new window)

核心亮点

• 这里 (opens new window)展示了如何配置 Typesense Instantsearch Adapter (opens new window) 与 react-instantsearch 的集成。
• 这里 (opens new window)展示了如何配置 RefinementList 组件来实现项目筛选。
• 这里 (opens new window)展示了如何配置 ToggleRefinement 组件来筛选记录中的布尔字段。
• 这里 (opens new window)提供了一个自定义 RangeSlider 组件的实现。
• 这里 (opens new window)展示了如何使用 Highlight 组件高亮匹配的搜索词。
• 这里 (opens new window)展示了如何配置 SortBy 组件以利用 Typesense 对同一索引/集合支持多种排序顺序的特性。
• 这里 (opens new window)展示了如何让用户自定义每页显示的搜索结果数量。