How Well Does Azure Static Web Apps (SWA) Support Next.js? | Pages Architecture

I have developed an application that focuses on isolating and testing the most essential features of Next.js. After creating the app, I deployed it to Azure Static Web Apps (SWA). Recently, SWA updated its platform, and I was excited to see how their improvements have impacted Next.js. To my surprise, the improvements were impressive.

💡 The current app uses the Pages-based architecture; I plan to develop an App Router Next.js application very soon. Give the repo a ⭐.

Next.js Application Overview

The Next.js application I deployed is publicly available and open-source on GitHub.

Essential factors of the app:

• Next.js version 13.4.16
• Pages-based Architecture
• Sitecore JSS version 21.6.3

For more details on the app, check out my earlier article: Exploring Every Feature in Next.js and Testing Hosting Providers or YouTube Video: Using Every Next.js Feature to Test Hosting Providers (Part 1).

How I Deployed the Next.js Application

I followed the Deploy hybrid Next.js websites on Azure Static Web Apps (Preview) documentation to deploy my app. I didn't make any configuration changes, so it was an out-of-the-box deployment of Next.js to Azure Static Web Apps.

Although Next.js support has been in preview on Azure SWA for years, this latest release makes me expect it to be out of preview soon. However, I am not hosting production Next.js applications in SWA since support is still in preview.

Next.js Support in Azure Static Web Apps

I was presently surprised that Azure Static Webs Apps had full support for every feature I tested. I ran my automated Cypress tests against the deployed Next.js app, and every test passed.

Check out the table to see every feature tested and the results.

Next.js Feature Support
Next.js Version 13.4.16 Pages Architecture	✅
getStaticProps()	✅
getServerSideProps()	✅
Image Optimization	✅
Incremental Static Regeneration (ISR)	✅
API Routes	✅
Middleware Redirects	✅
Edge Runtime	✅
Dynamic Routes	✅
next.config.js Redirects	✅
next.config.js Rewrites	✅
Sub-path Internationalization	✅
Sitecore JSS Image Optimization	✅

Based on the test results, Azure Static Web Apps is a suitable platform to host a Pages-based Next.js application on version 13. However, it's important to note that SWA Next.js support is still in preview, so it's not recommended for production deployments yet. 

I tested a pages-based Next.js 14 app, which failed due to Node version issues. I haven't investigated further, but Node 14 deployments do not work out of the box for now.

How to Test Hosting Providers Yourself

Want to test Azure Static Web Apps for yourself? Have a specific version of Next.js that you need to test.

1. Fork my open-source repository on GitHub: https://github.com/thomas-desmond/host-check-nextjs
   • Remember to give the repo a star! ⭐
2. Deploy the Next.js to your hosting provider
3. Change the url environment variable in the cypress.config.ts file
4. Run the automated Cypress end-to-end tests and see the results
   1. Open cypress test window npm run cypress:open
   2. Choose E2E Tests
   3. Choose your preferred browser
   4. Run all the specs (tests)
   5. Review the results of the tests

Watch the YouTube video version of this content: Testing Azure Static Web Apps Support for Next.js | Pages Architecture