Setting up a Next.js app with Sitecore JSS CLI in Connected Mode involves several steps. This mode allows you to work with Sitecore Experience Platform as your backend, making it easier to utilize Sitecore’s features during development.

Here’s a step-by-step guide to set it up:

Open our newly created application in Visual Studio Code and observe the file and folder structure; it closely resembles that of a React or Next.js application.

Before we begin the setup, let’s ensure that our configuration is correctly configured.
Navigate to the path: /sitecore/config/.config.

Make sure the name and Hostname are configured correctly.

Sitecore-JSS-CLI-in-Connected-Mode

Now, let’s create an API key for communication between the front end and back end. Open your Sitecore instance and navigate to the path “/sitecore/system/Settings/Services/API Keys”. Create an API key item under this location.

Sitecore-JSS-CLI-in-Connected-Mode 2

CORS Origins : *
Allowed Controllers : *
Impersonation User : extranetanonymous

Sitecore-JSS-CLI-in-Connected-Mode3

Now, go to PowerShell and run the following command:

jss setup

When executing the aforementioned command, you will be prompted to provide the Sitecore folder path, Sitecore hostname, Sitecore import service URL, Sitecore API key, and deployment secret key.

You can choose to ignore providing values for the import service URL and deployment secret key, as they will be generated automatically. The API key refers to the item ID of the API key created prior to this step. Please refer to the image below for clarification.

Sitecore API key: Write your API key’s item ID.
Deployment secret will be created automatically.

Once the all steps are done. The all setting are saved in scjssconfig.json file which is present in the next.js root directory.

Now, navigate to the root path of your Next.js project sitecoreconfig. Here, you’ll find two files:

<appname>.config
<appname>.deploysecret.config

Open the <appname>.deploysecret.config file and copy the deploymentSecret.

Step 1:
Open the <appname>.config file.
Find the following setting and add your deploymentSecret as its value:

Step 2:
Open the .env file.
Find the JSS_EDITING_SECRET setting and add the deploymentSecret. Also, find the SITECORE_API_KEY setting and write your Sitecore API key itemId in this setting.

Now, open PowerShell and run the following command:

jss deploy config

This command will deploy the config files to the App_ConfigIncludezzz folder.

The next step is to deploy the items to Sitecore. Run the following command:

jss deploy items –includeContent –includeDictionary

This command will deploy the Sitecore items to your Sitecore instance.

Now run the below command to start application in connected mode.

jss start:connected

Additional Configurations

Based on the specific needs of your business You may have to adjust extra settings, for example:

  • GraphQL Endpoint: Set up your GraphQL endpoint, if you’re together Sitecore’s GraphQL services.
  • Proxy Middleware: Create proxy middleware, if required, to manage API requests in the course of development.
  • Custom Templates and Components: Define your own custom components and templates for integration to the Sitecore material administration capabilities.

If you follow these steps, you will have a fully functioning Next.js application that is integrated to Sitecore JSS with Connected Mode that allows you to leverage the capabilities that is Sitecore’s Experience Platform while developing.

While this blog post focuses on the setup for connected mode however, it is also possible to use the Sitecore JSS CLI can also allow users to configure the Next.js application in disconnected mode. This is helpful in situations where you don’t have instant access to the Sitecore installation or you prefer an approach to development that is code-first.

Additional Resources

email subscribe image

Subscribe to our Newsletter and Dive into Exclusive Content!