Deploy your front-end application to Netlify

Version: 22.x

Netlify is a cloud computing company that offers a development platform that includes build, deploy, and serverless backend services for web applications and dynamic websites. Netlify has first-class support for Next.js.

You can set up continuous deployment (CD) in Netlify to redeploy your JSS Next.js app whenever you publish code changes to your source control repository. This procedure assumes that you're deploying the Next.js application from the SitecoreAI project repository, which includes the XMC instance and the front-end solution.

This procedure does not describe how to implement automatic redeploys when you make changes to your SitecoreAI content. You can decide for yourself how best to implement this, according to the recommendations provided by Netlify.

Before you begin

  • Ensure you have a Netlify account that you're logged in to.

  • Ensure you have the SITECORE_EDGE_CONTEXT_ID and SITECORE_SITE_NAME environment variables for your deployment, and any other relevant variables (including custom ones).

  • If you made code changes in your local development environment, commit and push your code. If you set up your SitecoreAI environment to redeploy when pushing changes to the configured branch, allow the redeployment to complete.

  • If you made content and layout changes in a local environment, use the Sitecore CLI to publish your changes and verify that your content is on Edge.

  • In your SitecoreAI instance, publish all the changes you want to make available on your website.

  • In your Next.js application, commit and push your changes to your source control repository.

To deploy your front-end application to Netlify:

  1. In your Netlify account, follow the Netlify documentation for adding a new site based on an existing repository. Choose a different branch if you don't want to deploy the application from your default branch.

  2. In the Build settings section, in the Base directory field, enter the path to the root folder of the Next.js application. When using the Next.js XM Cloud foundation template, the path is headapps/nextjs-starter.

    XM Cloud is now SitecoreAI

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

    Netlify tries to populate additional fields based on your base directory. Verify that the auto-completed values are as follows:

    • Publish directory: headapps/nextjs-starter/.next.

    • Functions directory: headapps/nextjs-starter/netlify/functions. If you created custom serverless functions in a different directory, specify that directory here.

    • Build command: npm run build.

    For more information, see the Netlify Build configuration documentation.

  3. Click Add environment variables and enter the following variables:

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

    • SITECORE_SITE_NAME - the name of the site.

    • If you are building a very large website, enable retries for requests to the SitecoreAI Experience Edge GraphQL endpoint, by setting the GRAPH_QL_SERVICE_RETRIES to a value higher than 0.

    • Any other custom environment variables you've added to your .env file. Netlify recommends that all environment variables be added to the Netlify site configuration.

      Note

      You don't need to set environment variables for Personalize and other Sitecore product integrations. They are included in your Sitecore Context and automatically provided to the application and integrations. An exception is Sitecore Search.

  4. Click Deploy site.

  5. When the Netlify deployment process finishes, verify that the deployed application hosted by Netlify renders as expected.

Troubleshooting the CD setup

At the end of the deployment process, even though Netlify reports that the site was successfully built and deployed, you may see a Netlify 404 error page instead of the expected pages.

The most likely reason is that, because of the nested location of the Next.js app in a SitecoreAI project repository, Netlify could not detect that the application is a Next.js application and failed to set the correct runtime.

After your site is created in Netlify:

  1. In your Netlify dashboard, navigate to the site's configuration area.

  2. In the Build & Deploy section, in the Build settings, click Configure.

  3. Find the Runtime setting and select Next.js.

  4. Redeploy the site.

Do you have some feedback for us?

If you have suggestions for improving this article,