This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Community Hub.

Next.js is a popular framework for building modern web applications with React, making it a common workload to deploy to Azure Static Web Apps’ optimized hosting of frontend web applications. We are excited to announce that we have improved our support for Next.js on Azure Static Web Apps (preview), increasing the compatibility with recent Next.js features and providing support for the newest Next.js versions, enabling you to deploy and run your Next.js applications with full feature access on Azure.

What’s new?

As we continue to iterate on our Next.js support during our preview, we’ve made fundamental improvements to ensure feature compatibility with the most recent and future versions of Next.js. Such improvements include support for the new React Server Components model in Next.js as well as hosting Next.js backend functions on dedicated App Service instances to ensure feature compatibility.

Support for Next.js 14, React Server Components, Server Actions, Server Side Rendering

With the introduction of the App Directory, React Server Components and Server Actions, it’s now possible to build full-stack components, where individual components exist server-side and have access to sensitive resources such as databases or APIs, providing a more integrated full-stack developer experience.

For instance, a single component can now contain both queries and mutations with database access, facilitating the componentization of code.

// Server Component export default function Page() { // handle queries, accessing databases or APIs securely here // Server Action async function create() { 'use server' // handle mutations, accessing databases or APIs securely here // ... } return ( // ... ) }

These features, including recent server-side developments for Next.js, are now better supported on Azure Static Web Apps. Support for the pages directory, which is still supported by Next.js 14, will also continue to work on Azure Static Web Apps.

Increased size limits of Next.js deployments

Previously, Next.js deployments were limited to 100mb due to the hosting restrictions of managed functions. Now, you can deploy Next.js applications up to 250mb in size to Azure Static Web Apps, with the Next.js statically exported sites supporting up to the regular Static Web Apps quotas now.

Partial support for staticwebapps.config.json

With the improved support for Next.js sites, the `staticwebapps.config.json` file which is used to provide configurations to the way your site is hosted by Azure Static Web Apps is now partially supported. While app-level configurations should still be completed within the `next.config.json` to configure the Next.js server, the `staticwebapps.config.json` file can still be used to limit routes to roles and other headers, routes, redirects or other configurations.

Support for Azure Static Web Apps authentication and authorization

Azure Static Web Apps provides built-in authentication and role-based authorization. You can now use this built-in authentication with Next.js sites to secure them. The client principal containing the information of the authenticated user can be accessed from the request headers and used to perform server-side operations within API routes, Server Actions or React Server Components. The following code snippet indicates how the user headers can be accessed from within a Next.js codebase.

import { headers } from 'next/headers' export default async function Home() { const headersList = headers(); const clientPrincipal = JSON.parse(atob(headersList.get('x-ms-client-principal') || '')) return ( <main > {clientPrincipal.userId} </main> ); }

Next.js backend functions hosted on a dedicated App Service plan

To ensure full feature compatibility with current and future Next.js releases, Next.js workloads on Azure Static Web Apps are uniquely hosted leveraging App Service. Static contents for Next.js workloads will continue to be hosted on Azure Static Web Apps globally distributed content store, and Next.js backend functions are hosted by Azure Static Web Apps with a dedicated App Service plan. This enables improved support for Next.js features, while retaining Static Web Apps’ existing pricing plans.

How can you activate these improvements?

These improvements have been rolled out to all regions of Azure Static Web Apps, and will take effect on your next deployment of a Next.js workload to your Static Web Apps resource.

Get started with Next.js on Azure Static Web Apps

We're constantly listening to feedback, iterating on our support for various frameworks and improving Static Web Apps to make it the best host for your frontend web applications. We're actively discussing Next.js support in our community GitHub: Improved support for Next.js (Preview) for Static Web Apps · Azure/static-web-apps · Discussion #1428 (github.com)

Improved Next.js support (Preview) for Azure Static Web Apps