1. Getting started with JSS for Next.js development

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

Version:

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

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

As a front-end developer, you might be using a different operating system and, therefore, can not run the full SitecoreAI 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

SitecoreAI 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 SitecoreAI 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. The .env.local file is ignored by version control systems by default so that you don't accidentally commit local changes to your remote repository.

  4. Edit the following environment variable values:

    • SITECORE_API_KEY - the Edge API key. If you have already deployed the application to Vercel, copy the token from your Vercel environment variables. Otherwise, generate an Edge API key.

    • GRAPH_QL_ENDPOINT - https://edge.sitecorecloud.io/api/graphql/v1. This endpoint is the same as the one used for deploying the application on Vercel.

    • JSS_APP_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 the technology used by the application and the corresponding JavaScript SDK. You must also start the application in connected development mode to take advantage of development experience features such as hot code reloading and using data from your SitecoreAI instance.

To start the application:

  1. In a command-line tool window, from the root of your SitecoreAI 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:

    npm install

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

    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 SitecoreAI CM instance. 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.

If you have suggestions for improving this article, let us know!