Netlify and Vercel are two cloud-based platforms in the JamStack ecosystem that are officially recommended by Sitecore for deploying frontend (Next.js) applications. These platforms support both Server Side Rendering (SSR) and Static Site Generation (SSG).
In this blog, we’ll walk through the steps to deploy a website integrated with Sitecore XM Cloud using Netlify, which offers first-class support for Next.js.
Prepare the GitHub Repository
-
Create a public GitHub repository and commit/push your code.
-
Set environment-specific values in theÂ
.env file. -
If you’ve made content or layout changes in your local XM environment, use the Sitecore CLI to publish your changes and verify the content is available on the Experience Edge.
-
In your XM Cloud instance, publish all changes you want reflected on your live site.
Continuous Deployment Setup in Netlify
-
Register and create a free Netlify account, then log in.
-
Click “Add new project” and choose “Import an existing project”.
-
Since the Next.js project is hosted on GitHub, select “GitHub” and authorize your account.
-
Select the repository you wish to deploy.
-
Once selected, Netlify will detect it as a Next.js project and populate the default build settings.
In our case, the Next.js app resides underÂheadapps/nextjs-starter, so update the path accordingly.-
Build command:
npm run build -
Publish directory:
headapps/nextjs-starter/.next
-
-
Set the environment variables manually using key-value pairs (or import fromÂ
.env). The required variables are:GRAPH_QL_ENDPOINT
SITECORE_API_HOST
SITECORE_SITE_NAME
SITECORE_API_KEY
SITECORE_EDGE_CONTEXT_ID
-
Click “Deploy site”. If the deployment is successful, you’ll see a deployment log similar to this:
-
Once deployment is complete, verify that the deployed app is rendering correctly on Netlify.
Configure Webhooks to Redeploy on Content Update
To automate redeployments of your Next.js app when new content is published to the Edge Delivery Platform, configure webhooks:
-
In Netlify, navigate to:
Project settings > Build & deploy > Continuous deployment > Build hooks-
Provide a name like “experience edge”
-
A unique build hook URL will be generate
-
-
Open the Experience Edge Admin API URL and set up authentication.
-
To generate a bearer token, make a POST request to:
https://auth.sitecorecloud.io/oauth/token
Include the following in the request body:grant_type: client_credentials
client_id: <your-client-id>
client_secret: <your-client-secret>
-
You can create the client ID and client secret from XM Cloud Deploy App under:
Credentials > Environment.
Provide a label, and select your project and environment to generate the credentials.
-
Send a POST request to the webhook creation endpoint using Postman:
https://edge.sitecorecloud.io/api/admin/v1/webhooksRequest body:
   7. Within a few seconds, you’ll see a new deploy triggered from Experience Edge under the Deploys  section in Netlify.
   8. Finally, verify that the updated content is visible on your live site.
Conclusion
Deploying a Next.js application integrated with Sitecore XM Cloud on Netlify is a streamlined and efficient process, especially with built-in support for continuous deployment and Experience Edge. By configuring environment variables and webhooks properly, you can ensure your site is always up-to-date with the latest published content. This setup offers a scalable and developer-friendly approach to modern Jamstack deployments backed by enterprise-grade CMS capabilities.
