Next.js on Azure, and an example on how to use it for Sitecore JSS

Next.js, developed by Vercel, runs best on Vercel. Problem is: it is difficult to "sell" to customers who commited to Microsoft Azure as their cloud platform to use Vercel (at the time of writing 178 employees) as an additional cloud provider for only the frontend application. Customers like insurance companies do for example a lot of checks on Azure before they even dare to go to the cloud on Azure, let alone they will embrace an additional cloud provider they never heard of.

This is why we started a Macaw Innovation Board project at in June 2021 to research how we could run Next.js in the best way on Azure, and use this approach as a core setup for future Sitecore JSS projects.

The implementation is created with the following assumptions:

• The Next.js server end-points must be completely implemented using consumption-based Azure functions
• The implementation should support Incremental Static Generation (ISG) to ensure rerendering of pages in case of page changes in the Sitecore CMS
• The Azure CDN is used, with support for page expiration in combination with ISG

The results

The results of our research can be found in the open-source GitHub repository https://github.com/macaw-cad/nextjs-on-azure.

It provides the following headstart code and examples:

Next.js basic example

• basic-nextjs-azure-functions - the Next.js website running from an Azure function for the basic website example
• basic-nextjs-example - the Next.js code for the basic website example

Next.js Sitecore Headless example with JSS

• jss-nextjs-app-azure-functions - the Next.js website running from an Azure function for the Sitecore headless JSS example
• basic-nextjs-app - the Next.js code for the Sitecore headless JSS example

React UI components

• ui-components - a core set of React UI components and styling to be used in custom-built websites

Blog posts

My colleague Erwin Smit, who did most of the implementation work, wrote a great set of blogposts explaining a lot of the things happening in the code base.

Checkout his list of posts:

• Next.js on Azure Functions
• Deploy Azure Functions with GitHub Actions using AzCopy
• Sitecore JSS on Azure Functions

And some nice additional posts on functionality showcased in the GitHub repository https://github.com/macaw-cad/nextjs-on-azure:

• Add external datasource to Sitecore JSS
• Integrate OrderCloud with Sitecore JSS Next.js