Integrating Algolia Search with Umbraco And Next.js

Introduction

This guide provides simple steps to integrate Algolia search with content managed in Umbraco and displayed using Next.js.

Step-by-Step Integration of Algolia Search with Umbraco and Next.js

1. Setting Up Your Algolia Index
2. Fetch Data from Umbraco
3. Push Content to Algolia (Indexing Script)
4. Implement Algolia Search on the Frontend (Next.js)
5. Display Results in Next.js

1.Setting Up Your Algolia Index

Steps:

1. Open your Algolia Dashboard.
2. Create a New Index
   Example: blogs_custom
3. Set up Ranking & Sorting
   • Add a customRanking, such as / descending by createdDate.
4. Enable Facets
   • Enable for fields like types or tags to allow filtered search.

2. Fetch Data from Umbraco

Leverage the Umbraco Delivery API to collect the structured content you wish to index.

const BLOG_API_URL = “https://your-umbraco-project.umbraco.io/umbraco/delivery/api/v2/content/item/your-item-path”;

• Replace with your Umbraco project’s API endpoint.

3. Push Content to Algolia (Indexing Script)

Sample script:

Tip:
Run this script on a schedule (cron job) or automatically trigger it using a CMS webhook on content publish.

4. Implement Algolia Search on the Frontend (Next.js)

Sample React function for querying Algolia:

5. Display Results in Next.js

Typical rendering snippet:

Conclusion

• By following these steps, you have successfully integrated Umbraco with Algolia search and a Next.js frontend. This setup allows you to deliver fast, accurate, and faceted search experiences using structured content managed in Umbraco and indexed in Algolia.