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:
Top comments (0)