Next.js widget fundamentals

 

Overview

The WYSIWYG page editor of Sitefinity CMS works with reusable components called widgets. Widgets provide configurable and reusable parts for page building, which can vary from a simple visual element to complex components for displaying content with rich logic.

The Sitefinity Next.js allows for the development of custom widgets following the React and Next.js development principles.

File structure

  • next.config.js » The standard config file for nextjs. This file has been modified to sooth the needs of the integration with the CMS. The file can be further modified according to the needs of the application.
  • public/assets » Contains resources such as bootstrap and the default thumbnail for page templates selection in the administration.
  • package.json » Standard package.json file with dependencies for @progress/sitefinity-widget-designers-sdk and @progress/sitefinity-nextjs-sdk
  • src/middleware.ts » Standard next.js middleware file. The default implementation contains the proxy logic. The file can be further modified according to the needs of the application.
  • src/index.css » Default styles for the widgets based on bootstrap.
  • src/app/widget-registry.ts » Contains the widget registrations. Use this file to register your own custom widgets. See Widget development for new widgets.
  • src/app/[...slug]/page.tsx » This page file handles the rendering of all of the pages inside the CMS.
  • src/app/render/page.tsx » This page file is used for single component rendering during edit or rendering of personalized widgets
  • src/app/api/template-interceptor* » Api route related to the proxy logic. The purpose of this route is to intercept the page templates response and inject a custom page template that will serve as a base for all of the future templates.

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

Widget designers