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.