Next.js pages and templates

Overview

To use Sitefinity Next.js renderer with the New page editor, you should create a page, using the new Next.js page template. You create templates and pages using the standard Sitefinity CMS UI, but you edit them in the New page editor.

PREREQUISITES: You must have enabled the New interface in your Sitefinity CMS. 

Create Next.js page templates

You can create Next.js templates in two ways:

  • Using the Sitefinity CMS backend UI and the Templates grid.
  • Programmatically, using layout files.

You create and manage Next.js templates in the Templates grid, just like the MVC page templates in Sitefinity CMS backend.

The framework of a template is determined by the template that it is based on when creating it. To make a template a Next.js template, you must base it either on another programmatically created Next.js template or on the Default Next.js template. 

Create templates: To create a Next.js template, follow procedure Create a template.
The Next.js templates are grouped at the bottom of the Select a base template page, when creating a template.

Manage templates: To manage Next.js templates, use the Templates grid.

Edit templates: When you open an Next.js template for editing, it opens in the New page editor.

net-core-page-template

Create Next.js pages

Perform the following:

  1. In the Next.js renderer backend, navigate to Pages and click Create a page.
  2. Enter the title of the page and click Continue.
  3. On Select a template step, select the Default template in the NextJS section.
    The new template is applied and the page opens for editing, using the New page editor. With the New page editor, you get a set of new layout and content widgets.

For more information about creating pages, see Create pages.

Supported widgets

The New page editor support the following widgets:
  • Section widget
    This is a layout widget that you can use to create the layout elements of your page. It also has an out-of-the-box styling features, such as margins, paddings, and backgrounds.
  • Navigation widget
    This is the widget that you use to create your website navigation.
  • Content block widget
    This is the widget that you use to create content. You can use it to display text, tables, images, or videos.
  • Image widget
    This is the widget that you use to display images.
  • Call to action widget
    This is the wiget 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.
  • Custom widgets
    For more information, see Custom widgets

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

Create Next.js forms