# Develop with 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](https://github.com/Sitefinity/nextjs-samples/tree/main/src/starter-template). 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](https://github.com/Sitefinity/nextjs-samples).

### 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](https://github.com/Sitefinity/nextjs-sdk).