Site search with the Next.js Renderer

Next.js

Overview

There are two main strategies that you can use to index a site built with the Next.js Renderer:

• External search
• Sitefinity search

External search

You can implement external third-party search engines to periodically index your Sitefinity site. These search engines provide their own API for querying that search index. You can leverage that API to build custom search box and search results widgets, which you can place on your Next.js pages.

EXAMPLE: Examples of such search engines include:

• Programmable Search Engine
• Cludo

Sitefinity search

Sitefinity Next.js Renderer is integrated with the Sitefinity Search service.
For more information, see Site search.

The Next.js Renderer page editor provides the following search widgets:

• Search box
• Search results
• Search facets

You use these widgets to create the search capabilities on your Next.js pages. You need to place the widgets on the corresponding pages and configure them to work with the desired search index in the CMS.
For more information, see Compare search services.

NOTE: For the ASP.NET Core Renderer equivalent of this article, see Site search with the ASP.NET Core Renderer.

Index MVC pages vs. Next.js Renderer pages

Sitefinity CMS search indexes content and pages. Indexing MVC pages works like an external search engine. This means that the entire output HTML is scanned and indexed. This is possible, because the pages are executed and indexed in the memory, and because they are rendered inside the CMS, they can be invoked in-process.

The Next.js Renderer is different, because it is decoupled from the running CMS process, and by default the output HTML of its pages cannot be accessed. Therefore, the Renderer provides the ability to index individual properties from your widget entity. As of Sitefinity CMS product update 15.4.8640, you can also opt in to index the entire rendered HTML output of decoupled renderer pages (both the Next.js Renderer and the ASP.NET Core Renderer). For more information, see Index the entire page HTML.

Implement indexing

Index individual properties

You must decorate the widget properties that you want to index with the ContentContainer decorator:

import { ContentContainer } from '@progress/sitefinity-widget-designers-sdk/decorators/content-container';
import { DataType } from '@progress/sitefinity-widget-designers-sdk/decorators/data-type';
import { KnownFieldTypes } from '@progress/sitefinity-widget-designers-sdk/common';

export class ContentBlockEntity {
    @ContentContainer()
    @DataType(KnownFieldTypes.Html)
    Content: string | null = null;
}

This decorator is also used on the Content block widget to allow its content to be indexed by the Sitefinity search index. This is possible, because the property value is stored in the CMS and the CMS can index it.

RECOMMENDATION: Sitefinity CMS indexes the raw value of the property and does not know of any modifications to it that are done by the Renderer. Therefore, we recommend rendering the property value, which holds the content to be indexed, without additional processing.

Index the entire page HTML

PREREQUISITES: This feature is available as of Sitefinity CMS product update 15.4.8640.

You can configure Sitefinity CMS to index the entire rendered HTML output of decoupled renderer pages (ASP.NET Core Renderer and Next.js Renderer), instead of indexing individual widget properties. To do this, perform the following:

1. Navigate to Administration » Settings » Advanced » Publishing.
2. Select the Enable indexing of html of decoupled pages checkbox.
3. Click Save changes.

When this setting is enabled, the ContentContainer decorator becomes redundant, because the content of the properties it decorates is already part of the full page HTML that gets indexed.

RECOMMENDATION: If you need more granular control over which content is indexed, leave the Enable indexing of html of decoupled pages checkbox cleared, and decorate the specific widget properties you want to index with the ContentContainer decorator instead.