Next.js renderer widgets

Overview

Content and functionality of Sitefinity CMS Next.js pages are defined through widgets. Widgets allow you to design the layout, display static and dynamic content, and configure how you want your content displayed. 

The Next.js renderer aims to have complete parity with  the ASP.NET Core widgets, for further information on how to use the widgets, see ASP.NET Core widgets. The Next.js SDK comes out of the box with a predefined set of widgets. They are created using both server-side rendering as well as client-side rendering. The general case is a combination of both components – a SSR wrapper which has a CSR component as a child. 

NOTE: The Next.js framework allows a SSR component to have a CSR child, but not the other way around.

The widgets are divided into the following categories:

Built-in widgets

Layout and presets

Section widget
You use the Section widget to define the layout of the page and then style it, using paddings, margins, and backgrounds.

Navigation widgets

Navigation built-in widgets enable you to display website navigation, breadcrumbs, and search and classification.

  • The Navigation widget you use to display your website pages as navigation links. You can choose from predefined styled navigation views – Accordion, Horizontal, Vertical, Vertical Sitemap, Tabs, or create a custom one.
  • The Breadcrumb widget that you use to display the path to the current page. This helps your users to navigate the website and to understand where the page they are looking at is located.
  • The Classification widget that you use to display tags and categories.
  • The Search box widget that you use to enable users to search for content on your website. Once you drop the widget on a page, a text box for entering search keywords is displayed.
  • The Search results widget that you use to configure where and how to display the results of a search that a user performed on your website.
  • The Search facets widget that you use to display search facets. Facets are used to group search results based on predefined fields. They allow users to further narrow down search results.

Content widgets

You use these widgets to display reusable content, which you have created in the Content section of Sitefinity CMS backend. You can display content from the content modules, such as News, Forms, Events, or Images.

The Next.js content widgets are the following:

  • The Content block widget that you use to create text.
  • The Content list widget that you can use to display content from both static and dynamic modules.
  • The Image widget that you use to display images.
  • The Call to action widget that you use to display a one or two call to action buttons on your page. You can have a button from the primary action and a button for a secondary action.
  • The Document list widget that you use to display a list or table of links to documents, where each document or file can be downloaded. You can choose documents or files from the already uploaded or upload new.
  • The Form widget that you use to display Next.js forms on your website. It comes with its own set of content and layout widgets, that are accessible via the Forms WYSIWYG editor. The form and its widgets come OOB both as partially SSR components and as fully CSR components. By default, the widget registry uses the SSR variation. You can change this by overriding these widgets in your custom widget registry:

Login widgets

You use these widgets to provide the users of your website the ability to register and log in your site.
The Next.js login widgets are the following:

  • The Login form widget that you use to enables your website users to log in to your website.
  • The Change password widget that you use to enable users to change their password.
  • The Reset password widget that you use to enable users to reset their password, in case they have forgotten it.
  • The Registration widget that you use to enable your website users to register in your website.

Overriding default widgets

Changing metadata, component functions, designers or whole widgets can be changed or removed by modifying the entries from the default widget registry. 

Modifying default widgets entities

You can replace or modify the widget designer metadata by modifying the widget’s entity class and changing the entity reference in the Widget registry. The @progress/sitefinity-widget-designers-sdk allows inheritance and overriding of the class properties. For more information, see Sitefinity widget designers SDK.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?

Next article

Develop with Next.js