---
title: "Walkthrough: Connecting the Next.js application directly to the Experience Edge endpoint"
slug: "walkthrough--connecting-the-next-js-application-directly-to-the-experience-edge-endpoint"
abstract: "Set up your local front-end development on operating systems that don't support Windows containers"
---
# Walkthrough: Connecting the Next.js application directly to the Experience Edge endpoint

The XM Cloud foundation template contains a JSS Next.js front-end application. You can [run XM Cloud CM locally for development purposes](https://doc.sitecore.com/xmc/en/developers/xm-cloud/en/set-up-your-full-stack-sitecoreai-local-development-environment.html), 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](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-experience-edge-for-xm.html) 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)](https://doc.sitecore.com/sai/en/developers/sitecoreai/sitecoreai.html) 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](https://doc.sitecore.com/sai/en/developers/jss/216/jss-sai/javascript-services-sdk--jss--for-next-js.html "JavaScript Services SDK (JSS) for Next.js"). 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:

    ```shell
    npm install
    ```

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

    ```shell
    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.