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

[thomasgauvin]

Hi folks!

We’ve rolled out improvements to our Next.js support on Azure Static Web Apps, specifically as it regards support for newer Next.js versions, and new server-side Next.js features. Here’s the blog post for the details on the announcement.

Here’s the TLDR:

• Support for Next.js 14 (& 13), React Server Components, App Directory, Server Actions: These server-focused features of Next.js are now fully supported on Azure Static Web Apps. We know many of you have started using these features to build full-stack components/server-side components that access to databases or APIs. This is now supported on Azure Static Web Apps, with the server-side functionality hosted on Static Web Apps’ managed backend functions.
• Increased size limits: While we were previously constrained to 100mb deployments, Next.js deployments on Azure Static Web Apps now support up to 250mb deployments. Standalone or static outputs are still the recommended workaround if your app sizes are expected to go beyond this.
• Partial support for staticwebapp.config.json: You can now handle header configurations, redirects, and routes permissions with the staticwebapp.config.json file. Certain configurations also need to be configured within the next.config.json configuration file in order for the Next.js server to expect certain behaviors. Some features are unsupported, such as the navigation fallback, which is configured on your behalf for the Next.js site.
• Access to Static Web Apps built-in authentication: You can now access the users’ client principal from the headers of the request within your Next.js API routes, React Server Components or Server Actions.

This improved support for Next.js current and future versions is enabled by the fact that Next.js backend functions are now hosted on dedicated App Service plans, with no change to current Static Web Apps plans. Next.js static assets continue to hosted on Static Web Apps’ globally distributed content host.

We continue to gather feedback, here's how to chime in:

We continue to gather feedback on our support for Next.js, and are actively tracking these issues which are currently affecting some Next.js sites. Please contribute to these threads if you are affected by these issues.

Static Web Apps related issues:

• Build timeout when trying to deploy Next.js · Issue Build timeout when trying to deploy Next.js #1427 · Azure/static-web-apps (github.com)
• Managed NextJS API's no longer linked, App Insights logs no longer functional #1417
• Static Web Apps does not yet support Node 20, please use 18.17.1: Support node 20 (or anything > 18.17.1) #1354.

Next.js related issues:

• Next.js version 13.4.13 has issues with app directory In v13.4.13 standalone server unexpectedly uses workers with experimental appDir vercel/next.js#53740, we recommend bumping to 13.5.6 or above

If you have general questions, feedback or issues which are not tracked above, please share them in this thread.

Notes

Enabling standalone

Deployment sizes are now 250mb, but you may still want to use standalone to deploy apps of larger size or decrease deploy times. To do so, you must do the following.

Enable standalone in next.config.json:

const nextConfig = {
    output: 'standalone',
};

Static Web Apps requires that your standalone output is left in the default location (.next/standalone).

Specifying Node version

Some recent versions of Next.js require versions of Node.js above the default, to specify the Node.js version in your Next.js site, add the following within your package.json:

{
  "engines": {
    "node": "18.17.1"
  }
}

Previous announcements regarding Next.js: #1066, #921

Happy shipping! 🚀

[gffelisberto]

this is great news! thank you :)

[JeroenvdBurg]

Congrats on the improved support for Next.js on Static Web Apps. 🎉 This new release fixes a lot of our concerns/issues. Next 14 is now working nicely including ISR.

Especially the dedicated compute for the azure functions results in much better performance in the SSR. In the region of the static webapp (West Europe) the performance is steady between 200 and 300 ms. With some outliers (not sure where those come from). Also no more coldstarts of the function after the first time hit.

You can clearly see that in other regions the latency is a lot higher, up to 2,5 sec avg in West-US.
So for multi-region sites the new distributed functionality would be really welcome #1429 (however not supported for next.js at the moment)

Furthermore (Local) development and deployment using the SWA CLI would be really usefull. We also use the SWA CLI in our devops pipeline instead of the Static Web Deploy task.

Overall a great achievement of the team, keep up the good work! Looking forward to GA .

[marcodali]

Should we still be using Azure/static-web-apps-deploy@latest for GitHub actions deployment?

If I set output = standalone as you suggest above then what values should I use here??

- name: Build And Deploy
  id: builddeploy
  uses: Azure/static-web-apps-deploy@latest
  with:
    azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ZEALOUS_STONE_02251B610 }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: "/"
    api_location: ""
    output_location: "out"
    skip_app_build: false

[angelitaooo]

@thomasgauvin @Reshmi-Sriram Can you point us to an example of how to configure the azure-pipelines.yml for deploying a server-side Next.js app using Azure DevOps, please?

This is what I have so far, and in the CD process, I'm getting an error, but in Azure DevOps I can see the artifacts downloaded correctly
but the next step, this - task: AzureStaticWebApp@0 failed.

    jobs:
      - deployment: DeployWebapp
        displayName: Deploying to Development
        environment: develop
        strategy:
          runOnce:
            deploy:
              steps:
                - task: DownloadPipelineArtifact@2
                  displayName: Download Artifacts
                  inputs:
                    artifact: webapp
                    path: $(Build.SourcesDirectory)/webapp

                - task: AzureStaticWebApp@0
                  displayName: Deploy to Azure Static WebApp
                  inputs:
                    app_location: "/webapp"
                    output_location: ""
                    app_build_command: 'echo No build required' # Skip the Oryx build by using a no-op command
                  env:
                    azure_static_web_apps_api_token: $(deployment_token)
                    ....

[abbasalwash]

Is there any information on when support for Next.js (Preview) for Static Web Apps will move out of preview and into production? In our work, we need this functionality, as we do not deploy preview features to production. It’s fantastic that this functionality is supported! Alternatively, is there a roadmap that I could refer to?

[matt-gribben]

Does anybody know if it's possible to give the App Service that runs the server side functions access to a private vnet? I'd like to be able to give it access to an api that isn't public.