Develop with Next.js

Next.js

Next.js overview

Next.js is an open-source web development framework based on React. It provides server-side rendering and enhanced search engine optimization (SEO), built-in routing, which addresses some common issues in React development. The integration with Sitefinity CMS provides additional benefits:

• Ready-to-use widgets
• Widget and page-level personalization
• Seamless integration with KendoReact

Sitefinity Next.js SDK

Provides out-of-the-box widgets developed using the Next.js frontend framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.

Getting started

To view the latest version of the SDK, run in the rerminal:
npm view @progress/sitefinity-nextjs-sdk

To view all SDK versions in ascending order, run in the terminal:
npm view @progress/sitefinity-nextjs-sdk versions --json

Install via npm:
npm i @progress/sitefinity-nextjs-sdk --save

Install via yarn:
yarn add @progress/sitefinity-nextjs-sdk

You can get started using it with our starter template in the following Next.js samples repository. It provides the needed integration for communicating with a Sitefinity server, setup documentation, and the basic boiler plate for getting started.

Contents

Main

The root module contains mainly tooling and interfaces related to widget rendering, models, metadata, renderer contracts.

Custom widgets

Creating and declaring custom widgets should adhere to the following convention. Widgets should be registered in a WidgetRegistry by WidgetMetadata, which consists of:

• componentType - reference to the component function.
• metadata, describing the properties of the widget:
  • entity? - class reference, decorated using the @progress/sitefinity-widget-designers-sdk custom decorators.
  • designerMetadata? - JSON format for a custom designer, used when the entity is not provided.
• editorMetadata? - implementing the interface EditorMetadata, providing in formation to the editor about widget category, name, and other visual and operational data.
• ssr? - indicating whether the widget should be server-side rendered or not.
• views? - used to make custom views/detail views for a widget.

For more information and code samples, visit our Next.js samples repository.

Required HTML attributes

To ensure the WYSIWYG page and form editor functions correctly, it is necessary to include certain custom HTML attributes when viewing the markup in edit mode. The htmlAttributes is designed to address this requirement comprehensively. Additionally, the classNames helper is provided to facilitate the accumulation of custom CSS classes.

Widget children content holder

To define an area in your custom widget template where children widgets could be added, to the HTML element that would hold them should have the data-sfcontainer attribute set.

The WYSIWYG editor will display on that spot the option to add a widget. If you want to have the ability to add widgets to your manually designated places and hide the default empty widget "add widget" placeholder, you can use the setHideEmptyVisual function to modify the dataAttributes.

Rest SDK

import { RestClient } from '@progress/sitefinity-nextjs-sdk/rest-sdk';

Provides a way to communicate with Sitefinity's REST API for the majority of the necessary operations and data queries. The entry static class RestClient is part of the @progress/sitefinity-nextjs-sdk/rest-sdk module.

Widgets

import * from '@progress/sitefinity-nextjs-sdk/widgets';
import * from '@progress/sitefinity-nextjs-sdk/widgets/forms';

These modules contain the following out-of-the-box widgets:

• Breadcrumb
• Call to action
• Classification
• Content list
• Content block
• Document list
• Forms
  • Form
  • Checkboxes
  • Content block
  • Dropdown
  • Dynamic list
  • File upload
  • Multiple choice
  • Paragraph
  • Section
  • Submit button
  • Text field
• Image
• Language selector
• Navigation
• Search
  • Search box
  • Search results
  • Search facets
• Section
• User management
  • Login form
  • Change password
  • Registration
  • Reset password
• Language selector

Styling

import { StyleGenerator } from '@progress/sitefinity-nextjs-sdk/widgets/styling';

Provides styling helper methods and interfaces that we provide mainly in the StyleGenerator class.

Code reference

For the exact implementation of the widgets and tooling, visit the public read-only Next.js SDK repository.