Deploying Next.js + Sitecore JSS: Real-World Azure PaaS Setup

Deploying Next.js + Sitecore JSS on Azure PaaS

 Overview:

Deploying a Sitecore JSS (JavaScript Services) app with Next.js can be challenging when moving to production or any upar enviroment, especially in Azure PaaS. This post outlines a clean separation of concerns deployment architecture where:

• CM handles only content authoring (no Next.js).

• CD acts as the Sitecore backend API provider for the JSS app.

• Web App hosts the Next.js SSR app (head) independently.

This architecture ensures performance, security, and scalability for modern composable solutions.

Architecture Overview:

Setup Breakdown:

 Sitecore CM (Content Management)

• Purpose: Only used by authors to manage content.

• Does NOT include: JSS app, rendering host config.

• Deployment: Done via Sitecore Azure Toolkit or ARM templates.

• Benefit: Keeps CM clean and lightweight.

Sitecore CD (Content Delivery)

• Purpose: Serves layout data & APIs for JSS app.

• Configured with:

  • JSS app registration (using jss setup)

  • renderingHost set to SSR endpoint.(App Config-->Include-->ZZZ-->Yourwebsite.config)
    

    serverSideRenderingEngineEndpointUrl=" https://nextjs-frontend-app.azurewebsites.net/api/editing/render"

    serverSideRenderingEngineApplicationUrl="https://nextjs-frontend-app.azurewebsites.net"

  • Allowed CORS origins for your Next.js Web App. (cd app server->cors->give next sever url -->save)
    

  

Next.js Web App (Frontend SSR)

• Hosted separately from Sitecore instances.

• Deployed via Azure DevOps, GitHub Actions, or manual ZIP.

• Go to src/rendering folder of your project and build the next project by command : npm run build

• Above command will generate .next folder now you can deploy below highlighted (with white color) files and folder on your next.js web app

• 

• Configured with: (azure cloud-->next.js web app-->Settings-->Enviroment Variable-->App settings)

• .env.production:
  

  SITECORE_API_HOST=https://your-cd-site.azurewebsites.net

  SITECORE_API_KEY=xxxxx

  JSS_APP_NAME=my-next-app

  NEXT_PUBLIC_SITECORE_API_HOST=https://your-cd-site.azurewebsites.net

  NEXT_PUBLIC_JSS_APP_NAME=my-next-app

  NEXT_PUBLIC_SITECORE_API_KEY=xxxxx

• 

• Web.config or server.js to handle SSR entry and keep the server alive.

• Added to CD app settings so Sitecore can recognize it for SSR.

You must ensure:

• ✅ App is registered using jss setup on CD.

• ✅ RenderingHost + SSR Engine Endpoint settings are on CD, not CM.

• ✅ Next.js Web App fetches data from CD via GraphQL/Layout Service.

• ✅ CORS/Allowed Origins are correctly set on CD and Web App.

Testing the Deployment

1. Content Authoring (CM):

   • Login to Sitecore CM and publish a JSS route/page.

2. CD API Validation:

   • Hit /sitecore/api/layout/render/jss?item=/your-path&sc_lang=en on CD.

3. Next.js SSR:

   • Open https://your-nextjs-app.azurewebsites.net.

   • Confirm content renders and route data is fetched.

💡 Final Thoughts

Separating the Next.js frontend from Sitecore CM/CD gives you:

• Faster builds and independent deployments.

• Modern DevOps flexibility (you can scale Next.js app separately).

• Cleaner separation of content vs presentation.

This setup works well for Sitecore XM/XM Cloud scenarios where content and frontend are truly decoupled.