Understanding Sitecore Search, XM Cloud, and Next.js Through the Creation of a Search Results Component

In this blog post, I will guide you through creating a search result component in XM Cloud. This component will retrieve content results from my blog feed URL. To achieve this, I will create a widget on the Sitecore search platform, along with a source where my blog feed will be crawled. The crawled content will then be displayed in the search result component using a widget provider in a Next.js app. For this integration, I will use the Sitecore Search React SDK to develop a search component that includes a search input field, all implemented with minimal code.

This blog post is divided into three parts. Let’s delve into it and uncover this important concept step by step.

Part 1 — Sitecore Search

The first and crucial step involves configuring your attributes, source, widget, and document extractor code through your Sitecore Search portal. If you wish to delve deeper into these terms, I recommend watching my SUG Kolkata session titled “Beginner’s Guide to Sitecore Search — Key Features and Best Practices.”

Attribute — Since I am creating a simple search results page, there’s no need to add any attributes beyond the out-of-box attributes provided by Sitecore, as these will be sufficient for this purpose.

Widget — I will be creating my own widget specifically designed for displaying search results.

To create a widget, log in to the CEC portal, navigate to the widgets section, and click on the “Add Widget” option, as illustrated in the screenshot below.

I will select the “Search Results” widget from the options provided, as I am planning to incorporate a search Results component into XM Cloud.

Click on the save button to create your widget. As of now, I will not add any rules and will stick to the default settings only.

Source —To create a source, navigate to ‘Sources’, click on ‘Add Source’, and follow the on-screen instructions.

In case of trigger, I am going to use Advance Crawler as I am going to add my blog feed and will show the listing on search component.

Note — In most projects, we typically utilize an advanced web crawler and employ the sitemap.xml of our web application as a trigger. However, since I don’t have an XM Cloud site ready and hosted on Vercel at the moment, I am using my blog feed to demonstrate the XM Cloud component.

After saving, navigate to the trigger section and add the trigger configuration.

Now comes an important step: configuring the document extractor code. Here, we write the code that specifies which fields to extract from the blogs that we want to display on the search page.

Here is a sample of the document extractor code that I used to extract information from blogs.

Note —To test the document extractor code, I have detailed the use of a tool called the Cheerio sandbox in my blog post. Please refer to it for a comprehensive understanding.

// Sample extractor function. Change the function to suit your individual needs
function extract(request, response) {
    $ = response.body;

    return [{
        'description': $('meta[name="description"]').attr('content') || $('meta[property="og:description"]').attr('content') || $('p').text() ||$('#content').text(),
        'name': $('meta[name="searchtitle"]').attr('content') || $('title').text() ||"no title",
        'type': $('meta[property="og:type"]').attr('content') || 'website_content',
        'url': $('meta[property="og:url"]').attr('content')
    }];
}

For now, I have utilized the default settings for the remaining configurations, and I have published and triggered the index.

Navigate to Content Collections to view the results that have been crawled.

Part 2 — XM Cloud

I cloned the SXA Starter project from the Git repository and set up an XMDemoSite for demonstration purposes. I plan to create a search results component in XM Cloud, integrate this component with Next.js, and fetch the search results from Sitecore Search using the source I previously established.

Note —To set up an XM Cloud project locally, you can refer to several detailed blog posts written by community members that provide guidance on the process.

The content tree structure for my demo site is organized as follows:

Navigate to create a JSON rendering named “searchResults.”

Under the home node, create a search page and incorporate the newly created component into that page as illustrated in the screenshot below:

Since I’ve just created a rendering, you might be wondering what other aspects of Search can be utilized in XM Cloud to make the best use of the CMS as well.

Here is the answer:

Searches consist of attributes, which are essentially template fields tailored to our project needs. A search isn’t complete without the use of facets and filters. These elements can be configured through the CMS. The SourceID and WidgetID that we previously established can be integrated into the base template for search settings. This integration allows us to choose the appropriate source and widget according to the specific use case.

Example -

Search Settings Template — This sample template is provided for informational purposes and will vary depending on our project’s specific use case. Additional fields can be added as required to tailor to our particular needs.

Part 3 — Next.js (Head Application)

To integrate Sitecore Search with Next.js, we first need to run the following commands in our head app:

Sitecore offers a Sitecore Search React SDK, and in this instance, I am using the React SDK approach to connect Next.js to Sitecore Search.

npm i @sitecore-search/react 
npm i @sitecore-search/ui

Adding screenshots for reference

After running the above commands, we need to add the following variables to our environment file, which can be obtained from the CEC portal:

Now, run the command below to create the widget and follow the on-screen instructions for the next steps.

npm run create-widget

After running the commands and following the on-screen instructions, you will see that a new folder has been created within the project, as depicted in the screenshot below:

Remember to set your source ID to ensure that you retrieve results from the source you created.

I utilized the autogenerated code, modifying only the source ID and widget ID.

Create a component inside the components folder called “SearchResults,” which we had initially set up in XM Cloud. Add code to indicate that it fetches data from the widget created in part 1. To ensure that the search pages display all the result data from the specified source, you simply need to map it with the sourceId.

To access the results from our widget, we need to register the widget provider in the _app.tsx file as outlined:

Now, execute the final command to obtain the results.

As we near the conclusion of this blog, we have successfully created a functional Search Result component. Please disregard the UI aspect since I employed a style-free component. If you wish to delve deeper into the Search React SDK, widget provider, and SDK hooks, I encourage you to explore the reference links provided by Sitecore.

References

Sitecore Search — Demo

React resources for your implementation | Sitecore Documentation

GitHub — Sitecore/Sitecore-Search-JS-SDK-Starter-Kit

Keep Learning…