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. 

Install Sitefinity

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.

Configure Sitefinity CMS 

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.  

Create Next.js application 

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

Running in local development mode 

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: 
  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. 

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?