Topics

Set up the project for local development (using Next.js Renderer)

The decoupled Next.js Renderer in Sitefinity Cloud enables you to take advantage of a three-tier application architecture and build your frontend presentation layer using Next.js.

Set up the Next.js Renderer project code locally

The project’s code files can be accessed from the Repos section on the Management Portal. You can clone the repository for local development.

To set up a Next.js Renderer project on your local development environment, follow these steps:

  1. Log in to your Sitefinity Cloud Management Portal.
  2. Navigate to Repos » Files.
  3. From the branches dropdown, select the project branch that you want to setup locally.
    For example, select main.
  4. To clone the project Git repository on your local machine, click the Clone button, located in the upper right corner of the screen.
  5. You can clone the repository using the command line or by selecting an IDE you want to clone to.
    For example, to clone the project in Visual Studio Code, from the IDE dropdown, select Clone in Visual Studio Code. Then specify your Microsoft Entra ID (formerly, Azure AD) credentials, when prompted by the Visual Studio Code.

Configure the Renderer application

After you have cloned the repository locally, you must configure the Next.js Renderer application to connect to Sitefinity CMS. In Sitefinity Cloud, you can connect your local Renderer application only to a non-Production environment, which is Staging in a default setup.
In Sitefinity Cloud PaaS setup where the Developer Extensions toggle is enabled, you can configure the Renderer application to work with your local setup of the Sitefinity CMS application - in case you need to simultaneously develop on both applications.

When you connect your local Renderer application to a Sitefinity CMS application instance hosted in the cloud, you must configure the LocalValidationKey property of the Next.js Renderer application. Your local Next.js Renderer application will send the LocalValidationKey with each request. When the HTTP request reaches the cloud-hosted Next.js Renderer application, it will compare the incoming LocalValidationKey with its own RemoteValidationKey. If they match, then the setup will be successful, and you will be able to develop locally against the cloud-hosted version of application.

To configure the LocalValidationKey property of the Next.js Renderer application, perform the following:

  1. Navigate to your dedicated Key Vault instance in the Azure portal.
    For more information, see Azure Key Vault.
  2. On the Key Vault left-hand sidebar, select Objects and then select Secrets.
  3. Select LocalValidationKey and from the listed versions, select the current version of the value.
  4. In the dialog that opens, copy the value specified in Secret value.
  5. On your local Renderer, edit the .env.development file and add the validation key and edit the URL in the following way:

  6. Save and close the file.
  7. Install the project packages by navigating to the folder where the project is located and running the npm install command.

Run the Renderer application locally

To run the Next.js Renderer application on the local environment, use the npm run dev command and navigate to https://localhost:5001/Sitefinity.

Was this article helpful?

Next article

Set up the project for local development (using Sitefinity CMS)