Serge van den Oever's weblog

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

Tue Dec 28 2021 • ☕️ 2 min read • you like my writing? Buy me a coffee

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:

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

Discuss on Twitter • Edit on GitHub

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. You are free to share and adapt this work for non-commercial purposes, provided you give appropriate credit, provide a link to the license, and indicate if changes were made. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc/4.0/.

Serge van den Oever's weblog

Serge van den Oever

Personal blog by Serge van den Oever - als je maar lol hebt...
X: @svdoever
LinkedIn: Serge van den Oever - articles on LinkedIn
GitHub: svdoever

Technology Consultant @ Macaw
2021-2024 Sitecore Technology MVP