Setup Next.js renderer

In this mode, the external Next.js renderer handles the requests that it can process and serves as a proxy and forwards all other requests to Sitefinity CMS, which means that it is possible to display some pages via the Next.js rendering engine and the rest would fallback to the default Sitefinity CMS rendering. This allows gradual page by page migration from the classic Sitefinity CMS pages to Next.js or having some of the pages rendered by Next.js and the rest handled by the Sitefinity CMS. 

The following article describes how to setup Sitefinity CMS to work with a standalone Next.js application as renderer. 

First, you need to install Sitefinity CMS. Follow the instructions here: Install Sitefinity in hybrid ASP.NET Core and MVC mode.

Additionally, you can deploy your Sitefinity CMS on the cloud. For more information, see Cloud deployment.

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: 

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/starter-template 
   
3. In the console, type cd nextjs-sitefinity 
   
4. In the console, type npm run dev 
   

To develop your site, you need access to the WYSIWYG editor and the backend at the same time to drop your widgets and configure them. The development mode enables this by using the HTTP-proxy-middleware package to proxy any Sitefinity CMS related requests to Sitefinity CMS and allows the Next.js renderer to handle only the frontend rendering of the pages. 

Running in dev mode does not require installing additional software and works on any nodejs supported OS. Follow these steps: 

1. Open the console in the application folder. 
   
2. Run npm i 
   
3. Open the .env.development file. 
   
4. Set the PROXY_URL variable to point to the URL of Sitefinity CMS. 
   
5. Depending on where your Sitefinity CMS project is hosted: 
   
   • For projects hosted in Sitefinity Cloud, enter your SF_CLOUD_KEY environment variable in the .env.development file. 
     
   • For projects hosted on Azure App Services, see Host Sitefinity CMS and .NET Core Renderer on Azure App Services. 
     
   • For projects hosted on IIS, perform steps 5 to 14 from Host Sitefinity CMS and the .NET Core Renderer on the same IIS 
      
     
6. Generate an access key and set the SF_ACCESS_KEY environment variable. For more information, see Generate access key. The access key is identified for staging or dev environments, where page editing will be done.
   
7. In the console, run npm run dev.
   

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.