Layout and style
Overview
Next.js pages can use templates that are either stored in the Renderer application or created directly in the Sitefinity CMS backend based on the default template or other existing ones for the Next.js renderer.
- Templates in the Renderer App: These are React functional components registered within the Renderer application. When a page is based on one of these templates, the Renderer uses it to display the page.
- Templates in Sitefinity Backend: You can also create templates in the Sitefinity backend. These templates can be based on a default layout or a custom design and are stored in the Sitefinity database.
Out-of-the-box Sitefinity Next.js Renderer comes with a blank template called Default that you can select in the template selector. This template references Bootstrap5 CSS framework. The default Section widget also contain the Bootstrap5 grid system markup.
How to create custom template
This sample demonstrates how to setup a custom template component that can be used as a base for building your Next.js application. The template is meant to define what is in the body tags. You can refer scripts using the Next.js ccript element and its properties. In the case when you want to modify the whole page structure, you can do that by modifying or creating a global or a route-specific layout.tsx for more information, see Next.js documentation on Pages and layouts.
Template inheritance is available for custom templates as well. You can base your Sitefinity CMS templates on the custom templates from the Next.js Renderer.
To create your own custom template, you must do the following:
- Create a
.tsx file that holds implementation of the template. The component accepts two arguments: widgets and requestContext.
- The widgets property is a dictionary of ReactNode components that are ready to be rendered. The key of the dictionary is the name of the container where the widgets should be placed. The
requestContext property is of type RequestContext and holds information about the current request.
- To define your own custom sections, you can decorate several html tags (div, header, footer, aside, section, main, body) with the
data-sfcontainer="your_placeholder_name" attribute, which will enable users to drop widgets into different placeholders.
- Register the custom template in the template registry, which is part of the starter project sample. That way the templates will be available in the backend UI of Sitefinity CMS and you can choose between them when you create new page. To do this go to Sitefinity backend » Pages » Create a page, enter page title and click Continue. Your template files will be available at the top of the template selector under the section Next.js templates: