Walkthrough: Connecting the Next.js application directly to the Experience Edge endpoint

Version: 22.x

The XM Cloud foundation template contains a JSS Next.js front-end application. You can run XM Cloud CM locally for development purposes, but it requires Docker with Windows Containers enabled.

As a front-end developer, you might be using a different operating system and, therefore, can not run the full XM Cloud solution locally. Furthermore, you might only be responsible for developing the front-end applications and only need access to the latest layout and content data.

You can run your local Node.js server and connect the application directly to the remote Experience Edge endpoint.

This walkthrough describes how to:

  • Connect the application to the Edge endpoint.

  • Start the client application and verify the integration.

Connect the application to the Edge endpoint

Sitecore Experience Manager Cloud (XM Cloud) is a Software-as-a-Service (SaaS) tool that provides you with content and layout information headlessly through Experience Edge. This means that you can build your front-end application against the Edge endpoint.

To connect the application to the Edge endpoint:

  1. Open the XM Cloud project folder with Visual Studio Code.

  2. Go to the rendering app root folder sxastarter.

  3. Create a copy of the existing .env file and name it .env.local. By default, the .env.local file is ignored by version control systems, so you don't accidentally commit local changes to your remote repository.

  4. Edit the following environment variable values:

    • SITECORE_EDGE_CONTEXT_ID - Your unified Context ID. Use the Preview Context ID for published and non-published content and layout data, or the Live Context ID for published data only.

    • SITECORE_SITE_NAME  - the name of the site.

  5. Enable debugging by uncommenting the line containing DEBUG=sitecore-jss:*,-sitecore-jss:layout

Start the client application and verify the integration

To develop client applications, you must be familiar with Next.js and the corresponding Next.js SDK. You must also start the application in connected development mode to use data from your XM Cloud instance.

To start the application:

  1. In a command-line tool window, from the root of your XM Cloud project working directory, go to the directory of the front-end application, for example, src/sxastarter.

  2. Install the dependencies for the application with the command:

    RequestResponse
    npm install

  3. In a separate terminal window, go to the directory of the front-end application and run the following command:

    RequestResponse
    npm run start:connected

  4. To verify that you are running your application against the remote Edge endpoint, make a content change in one of the pages in your remote XM Cloud CM instance.

    • If you used the Preview Context ID, save the page.

    • If you used the Live Context ID, save and publish the page.

    Reload the page to see the changes in your browser window serving the local rendering host.

  5. Make a small but visible change in your app code. The change should become instantly visible in your local rendering host window without reloading.

Do you have some feedback for us?

If you have suggestions for improving this article,