Deploy Next.js websites on Azure Static Web Apps

Next.js support on Azure Static Web Apps can be categorized as two deployment models, Static HTML Export Next.js applications, and hybrid rendering, which covers Server-Side Rendering and Incremental Static Regeneration.

Static HTML export

You can deploy a Next.js static site using the static HTML export feature of Next.js. This configuration generates static HTML files during the build, which are cached and reused for all requests.

To enable static export of a Next.js application, add next export the to build npm script in package.json.

{
    "scripts": {
        "build": "next build && next export"
    }
}

If you're using custom build scripts, set IS_STATIC_EXPORT to true in the Static Web Apps task of the GitHub Actions/Azure DevOps YAML file.

The following example shows the GitHub Actions job that is enabled for static exports.

      - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

Follow the deploy static-rendered Next.js websites tutorial to learn how to deploy a statically exported Next.js application to Azure.

Hybrid Next.js applications (preview)

Static Web Apps supports deploying hybrid Next.js websites where you can choose between static generation and server-side rendering (SSR) on a per page basis. Static Generation is often used over SSR for performance reasons.

Key features that are available in the preview are:

• Server side rendering
• API Routes
• Image optimization
• Incremental Static Regeneration
• Internationalization
• Middleware
• Authentication
• Output File Tracing

Follow the deploy hybrid Next.js applications tutorial to learn how to deploy a hybrid Next.js application to Azure.

Unsupported features in preview

During the preview, the following features of Static Web Apps are unsupported for Next.js with server-side rendering:

• APIs using Azure Functions, Azure AppService, Azure Container Apps or Azure API Management.
• Deployment via the SWA CLI.
• Static Web Apps provided Authentication and Authorization.
  • Instead, you can use the Next.js Authentication feature.
• The staticwebapp.config.json file.
  • Features such as custom headers and routing can be controlled using the next.config.js file.
• skip_app_build and skip_api_build can't be used.
• Incremental static regeneration (ISR) does not support caching images and on-demand revalidation

Note

The maximum app size for the hybrid Next.js application is 100 MB. Use standalone feature by Next.js for optimized app sizes. If this is not sufficient, consider using Static HTML exported Next.js if your app size requirement is more than 100 MB.