Next.js Deployment to Azure Static Web Apps via Azure DevOps

Modern frontend applications require a reliable CI/CD pipeline for automated builds and deployments. In this article, we’ll deploy a Next.js static export application to Azure Static Web Apps (SWA) using an Azure DevOps multi-stage YAML pipeline.

We’ll cover:

• Creating an Azure Static Web App
• Configuring deployment credentials
• Building a Next.js static export
• Creating an Azure DevOps YAML pipeline
• Adding manual approval before production deployment
• Deploying automatically from the main branch

Architecture Overview

Our deployment workflow will look like this:

Developer Push → Azure DevOps Pipeline

                     │

                     ├── Build Next.js App

                     ├── Export Static Files (out/)

                     ├── Publish Artifact

                     ├── Manual Approval

                     └── Deploy to Azure Static Web Apps

Step 1: Configure Next.js for Static Export

Azure Static Web Apps hosts static content efficiently.
For Next.js, configure static export in next.config.mjs.

const nextConfig = {

  output: 'export',

};

export default nextConfig;

Step 2: Create Azure Static Web App

In Azure Portal:

1. Go to Azure Portal
2. Create a new Static Web App
3. Choose:
   • Hosting Plan: Free or Standard
   • Deployment Source: Other
4. Complete resource creation

After creation:

1. Open the Static Web App
2. Navigate to:

Settings → Deployment Token

3. Copy the deployment token 

Step 3: Store Deployment Token in Azure DevOps

In Azure DevOps:

This generates a static out/ directory during build.

Pipelines → Library → Variable Groups

Create a variable group:

vg-webv2-prod

Variable	Value
AZURE-SWA-DEPLOYMENT-TOKEN

Step 4: Create the YAML Pipeline

Create a new file or download the files from the link below

azure-pipelines.yml

Step 5: Create the Pipeline in Azure DevOps

1. Go to:

Pipelines → New Pipeline

2. Select repository
3. Choose:

Existing Azure Pipelines YAML file

4. Select:

azure-pipelines.yml

5. Run the pipeline

How the Pipeline Works

Build Stage

The pipeline:

• installs Node.js
• installs dependencies
• runs Next.js build
• validates the out/ directory
• packages static files into a ZIP
• publishes artifact

---

Manual Approval Stage

Before deployment:

• reviewers receive approval notification
• deployment pauses
• approver validates build artifact
• Production deployment starts only after approval

Deployment Stage

The deployment stage:

• downloads artifact
• extracts static files
• installs Azure Static Web Apps CLI
• deploys the application to production

Final Thoughts

A single multi-stage YAML pipeline is usually the best approach for small-to-medium frontend applications because it keeps CI and CD tightly integrated while maintaining deployment control and traceability.

As your application grows, you can later extend the pipeline with:

• staging environments
• blue-green deployments
• automated testing
• reusable templates
• release orchestration