Setup Next.js renderer

Next.js

Next, you have to configure the access to the default web service endpoint in Sitefinity CMS:

1. In Sitefinity CMS backend, navigate to Administration » Web services. 
2. Open the Default web service. 
   
3. Under Who can access the content by this service?, select Everyone. 
   
4. Save your changes.  
   

To create your Next.js application, perform the following: 

1. Open your terminal in the directory you want to create the application in. 
   
2. Run the following command: npx create-next-app nextjs-sitefinity --example https://github.com/Sitefinity/nextjs-samples/tree/main/src/starter-template 
   This is  the basic minimum code needed to bootstrap a standalone rendering application. Changes and updates to this would be reflected in the GitHub repository of the Next.js project. 
3. In the console, type cd nextjs-sitefinity 
   
4. In the console, type npm run dev  

To develop your website, you need access to the WYSIWYG editor and to the backend at the same time - to drop your widgets and configure them.

Running in development mode does not require installing additional software and works on any Node.js supported OS.

NOTE: The sample project runs under SSL by default and installs a default SSL certificate. To remove it, change the command configuration in the package.json file. 

To have seamless experience when using the standalone renderer application together with Sitefinity CMS, the renderer is also working as a proxy and forwards every request it cannot handle to Sitefinity CMS. This way, the user does not have to switch between the two applications. This is done through the SF_CMS_URL environment variable. Setting this variable allows proxying any requests unhandled by the Next.js renderer to the CMS.

You host the renderer at your public domain and your users use only this domain, without considering whether the renderer or Sitefinity CMS handles their request.

Environment variables legend:

• (Required) 'SF_CMS_URL': The URL of Sitefinity CMS, where to proxy all of the requests that are not pages and to which all of the API call will be made.
  
• (Required) 'SF_LOCAL_VALIDATION_KEY': The secret key to work with Sitefinity Cloud. Required only when working with Sitefinity cloud for pages that are not handled by the Next.js renderer. Fore more information on the secret key, see Set up the project for local development (using Next.js Renderer)
  
• (Optional) 'NEXT_PUBLIC_SF_CMS_URL': The URL of the CMS for client-side calls, to which all of the API call will be made. Defaults to '/'.
  
• (Optional) 'SF_PROXY_ORIGINAL_HOST': Environment variable that controls the host header sent to the CMS. Useful for multisite testing locally.
  
• (Optional)'SF_HOST_HEADER_NAME': Environment variable that controls the host header sent to the CMS. Useful for cloud hosting when the original host is sent via a custom header value.
  
• (Optional)'SF_WHITELISTED_PATHS': Comma separated urls to pages made with the legacy (MVC/Web forms) frameworks so that the requests can be proxied to Sitefinity for rendering. Default is empty.
  
• (Optional)'SF_IS_HOME_PAGE_LEGACY': A flag indicating that the home page of the site is created with the legacy frameworks (MVC/Web forms) and navigation to 'www.siteurl/' will proxy the request to Sitefinity. Defaults to 'false'.
• (Optional) 'SF_WHITELISTED_WEBSERVICES': A comma-separated urls for sitefinity web services that should be allowed through the proxy.
• (Optional) 'SF_WEBSERVICE_PATH': Change the web service that the Next.js renderer instance should use. Keep in mind that a custom one should be created first in Sitefinity via Administration » Web services. The service should be enabled and its access set to Everyone. The default value is 'api/default'