Deploying Next.js to Azure App Service: Step-by-Step Guide 2026

By Elhassane Mehdioui, Full Stack Web Developer

---

Deploying a Next.js application to Microsoft Azure has never been more approachable, yet the sheer number of hosting options can leave developers paralysed at the starting line. Should you reach for Azure App Service, Static Web Apps, or Container Apps? Once you have picked a target, how do you wire up CI/CD, environment variables, custom domains, autoscaling, and monitoring without losing a weekend? This guide answers every one of those questions with concrete CLI commands, portal walkthroughs, and production-ready YAML pipelines — all updated for 2026.

---

Choosing the Right Azure Service for Next.js

Before writing a single line of configuration, you need to understand what each Azure hosting primitive offers.

Azure App Service

App Service is a fully managed platform-as-a-service (PaaS) that runs your Node.js process directly on a managed VM fleet. It supports the Next.js start command out of the box, which means server-side rendering, API routes, middleware, and ISR all work without any extra plumbing. App Service is the right choice when:

• You need SSR, API routes, or Edge Middleware.
• You want zero container knowledge — just push code and go.
• You need built-in staging slots, autoscale rules, and VNet integration.

Pricing anchor (2026): The B1 tier ($13/month) is sufficient for low-traffic apps; P2v3 ($190/month) handles serious production workloads.

Azure Static Web Apps

Static Web Apps is purpose-built for statically exported sites and SPAs. It integrates tightly with GitHub Actions, gives you a global CDN for free, and supports serverless API functions via Azure Functions. Use it when:

• You export your Next.js app with output: 'export' in next.config.js.
• You do not need persistent server processes or the full Node.js runtime.
• Your budget is tight — the free tier is genuinely free.

The big caveat: dynamic SSR, on-demand ISR, and Node.js API routes are not supported without an accompanying Functions app.

Azure Container Apps

Container Apps sits on top of Kubernetes (via KEDA) but hides all cluster management. You bring a Docker image; Azure handles scheduling, scaling to zero, and revision management. Choose Container Apps when:

• You already containerise your workloads.
• You need scale-to-zero economics for sporadic traffic.
• You want to run multiple microservices alongside your Next.js front end.

Verdict for most teams in 2026: App Service wins on simplicity and Next.js feature parity. This guide focuses on App Service with notes on the others where relevant.

---

Prerequisites

• Azure CLI >= 2.60 — az --version
• Node.js >= 20 LTS
• A Next.js app (the examples use my-next-app)
• An Azure subscription with Contributor rights on a resource group

---

Creating an App Service via the Azure Portal

1. Navigate to portal.azure.com and click Create a resource.
2. Search for Web App and click Create.
3. Fill in the Basics tab:
   • Subscription / Resource Group: pick or create one (e.g. rg-nextjs-prod).
   • Name: must be globally unique, e.g. my-next-app-2026.
   • Publish: Code.
   • Runtime stack: Node 20 LTS.
   • Operating System: Linux.
   • Region: pick the region closest to your users.
4. Choose a Pricing plan (B1 for dev, P2v3 for production).
5. Click Review + create, then Create.

The portal creates the App Service Plan and the Web App in roughly 60 seconds.

---

Creating an App Service via the Azure CLI

# Log in
az login

# Create resource group
az group create \
  --name rg-nextjs-prod \
  --location eastus

# Create App Service Plan (Linux, B1)
az appservice plan create \
  --name plan-nextjs-prod \
  --resource-group rg-nextjs-prod \
  --sku B1 \
  --is-linux

# Create Web App with Node 20 runtime
az webapp create \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --plan plan-nextjs-prod \
  --runtime "NODE:20-lts"

Verify your app is live at https://my-next-app-2026.azurewebsites.net.

---

Configuring the Node.js Runtime

Azure App Service on Linux uses Oryx to detect and build Node.js apps. Two settings matter most.

Startup Command

Tell App Service how to start Next.js after Oryx installs dependencies and runs the build:

az webapp config set \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --startup-file "node_modules/.bin/next start -p 8080"

App Service routes external traffic to port 8080 by default on Linux. Alternatively, set the PORT environment variable and let Next.js pick it up.

Always On

For non-free tiers, enable Always On to prevent the process from sleeping:

az webapp config set \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --always-on true

---

Setting Environment Variables in Azure

Never hard-code secrets. App Service exposes environment variables as Application Settings, which are injected into the process at runtime exactly like .env.local — but stored encrypted in Azure.

Via the Portal

Go to your Web App > Settings > Environment variables > App settings > Add.

Via the CLI

az webapp config appsettings set \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --settings \
    NEXT_PUBLIC_API_URL="https://api.example.com" \
    DATABASE_URL="@Microsoft.KeyVault(SecretUri=https://kv-prod.vault.azure.net/secrets/db-url/)" \
    NODE_ENV="production"

The @Microsoft.KeyVault(...) syntax pulls the value from Azure Key Vault at runtime — keep your connection strings out of App Settings entirely.

---

GitHub Actions Workflow for Azure Deployment

This is the most important piece of automation you will write. The workflow below:

1. Installs dependencies and runs the Next.js build.
2. Packages the output.
3. Publishes to App Service using the official azure/webapps-deploy action.

Step 1 — Download the Publish Profile

az webapp deployment list-publishing-profiles \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --xml > publish-profile.xml

Add the contents of publish-profile.xml as a GitHub repository secret named AZURE_WEBAPP_PUBLISH_PROFILE.

Step 2 — Create .github/workflows/azure-deploy.yml

name: Deploy Next.js to Azure App Service

on:
  push:
    branches:
      - main
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: my-next-app-2026
  NODE_VERSION: "20.x"

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Set up Node.js ${{ env.NODE_VERSION }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: "npm"

      - name: Install dependencies
        run: npm ci

      - name: Build Next.js application
        run: npm run build
        env:
          NEXT_PUBLIC_API_URL: ${{ secrets.NEXT_PUBLIC_API_URL }}

      - name: Create deployment package
        run: |
          zip -r deploy.zip . \
            --exclude ".git/*" \
            --exclude ".github/*" \
            --exclude "node_modules/.cache/*"

      - name: Deploy to Azure App Service
        uses: azure/webapps-deploy@v3
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
          package: deploy.zip

Push to main and watch the Actions tab — green in about three minutes on a B1 plan.

Optional: Deploy to a Staging Slot First

      - name: Deploy to staging slot
        uses: azure/webapps-deploy@v3
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          slot-name: staging
          publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE_STAGING }}
          package: deploy.zip

      - name: Swap staging to production
        uses: azure/CLI@v2
        with:
          inlineScript: |
            az webapp deployment slot swap \
              --name ${{ env.AZURE_WEBAPP_NAME }} \
              --resource-group rg-nextjs-prod \
              --slot staging \
              --target-slot production

Deployment slots give you zero-downtime releases and instant rollback — critical for production.

---

Custom Domains and SSL

Add a Custom Domain

# Verify you own the domain first (add the TXT record Azure gives you to your DNS)
az webapp custom-hostname add \
  --hostname www.example.com \
  --webapp-name my-next-app-2026 \
  --resource-group rg-nextjs-prod

Bind a Managed Certificate (Free)

Azure App Service issues and auto-renews free TLS certificates for custom domains:

az webapp config ssl create \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --hostname www.example.com

# Bind the certificate
az webapp config ssl bind \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --certificate-thumbprint <thumbprint-from-above> \
  --ssl-type SNI

Enforce HTTPS:

az webapp update \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --https-only true

---

Autoscaling

For the P1v3 tier and above you can configure autoscale rules based on CPU or HTTP queue depth.

# Enable autoscale on the App Service Plan
az monitor autoscale create \
  --resource-group rg-nextjs-prod \
  --resource plan-nextjs-prod \
  --resource-type Microsoft.Web/serverfarms \
  --name autoscale-nextjs \
  --min-count 1 \
  --max-count 5 \
  --count 1

# Scale out when CPU > 70 % for 5 minutes
az monitor autoscale rule create \
  --resource-group rg-nextjs-prod \
  --autoscale-name autoscale-nextjs \
  --condition "Percentage CPU > 70 avg 5m" \
  --scale out 1

# Scale in when CPU < 30 % for 10 minutes
az monitor autoscale rule create \
  --resource-group rg-nextjs-prod \
  --autoscale-name autoscale-nextjs \
  --condition "Percentage CPU < 30 avg 10m" \
  --scale in 1

---

Application Insights Monitoring

Application Insights gives you distributed tracing, live metrics, failure analysis, and custom dashboards — essential for any production Next.js app.

Create an Application Insights Resource

az extension add --name application-insights

az monitor app-insights component create \
  --app insights-nextjs-prod \
  --location eastus \
  --resource-group rg-nextjs-prod \
  --application-type web

Connect It to Your Web App

INSTRUMENTATION_KEY=$(az monitor app-insights component show \
  --app insights-nextjs-prod \
  --resource-group rg-nextjs-prod \
  --query instrumentationKey \
  --output tsv)

az webapp config appsettings set \
  --name my-next-app-2026 \
  --resource-group rg-nextjs-prod \
  --settings APPINSIGHTS_INSTRUMENTATIONKEY="$INSTRUMENTATION_KEY" \
             ApplicationInsightsAgent_EXTENSION_VERSION="~3"

The ApplicationInsightsAgent_EXTENSION_VERSION=~3 setting enables the auto-instrumentation agent, which collects HTTP request telemetry, dependency calls, and exceptions without any code changes.

Adding Custom Telemetry in Next.js

Install the SDK:

npm install @microsoft/applicationinsights-web

Create lib/appInsights.ts:

import { ApplicationInsights } from "@microsoft/applicationinsights-web";

const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: process.env.NEXT_PUBLIC_APPINSIGHTS_KEY,
    enableAutoRouteTracking: true,
  },
});

appInsights.loadAppInsights();
export default appInsights;

Import it once in app/layout.tsx and you have full SPA page-view tracking.

---

Production Checklist

Before you go live, run through these items:

• NODE_ENV=production is set in App Settings.
• All secrets are in Key Vault, not App Settings plain text.
• HTTPS-only is enforced.
• Always On is enabled.
• A staging slot is configured for zero-downtime deploys.
• Autoscale rules are in place for the expected traffic profile.
• Application Insights is connected and returning live telemetry.
• Custom domain TLS certificate is bound and auto-renews.
• Health-check path is configured (App Service > Monitoring > Health check).

---

Summary

Azure App Service remains the most pragmatic target for full-featured Next.js deployments in 2026. It supports every Next.js rendering mode, integrates cleanly with GitHub Actions, and offers enterprise-grade features — deployment slots, VNet, Key Vault references, autoscaling, and Application Insights — without forcing you to manage containers or Kubernetes clusters. Static Web Apps is the right call only if you have fully committed to static export; Container Apps earns its complexity when you need multi-service architectures or scale-to-zero economics.

Follow the steps in this guide and you will have a production-grade Next.js deployment on Azure — with CI/CD, custom domain, SSL, autoscaling, and monitoring — in under two hours.

---

Elhassane Mehdioui is a Full Stack Web Developer specialising in Next.js, Azure, and modern web architecture.