Deploying a Next.js Application with Azure Static Web Apps

Overview

Deploying a modern web application should be fast, secure, and reliable. Azure Static Web Apps simplifies this process by providing a managed hosting platform with built-in continuous deployment, global content delivery, custom domains, and automatic SSL certificates.

For projects built with frameworks like Next.js, React, Angular, Vue, Hugo, or Jekyll, Azure Static Web Apps offers an efficient deployment workflow that integrates seamlessly with GitHub Actions.

Why Azure Static Web Apps?

Azure Static Web Apps is designed specifically for modern frontend applications. Instead of managing servers and deployment pipelines manually, developers can focus on building features while Azure handles hosting, scaling, security, and global delivery.

Key Benefits

• Managed hosting with minimal configuration
• Automatic deployments through GitHub Actions
• Free SSL certificates
• Global CDN for faster content delivery
• Custom domain support
• Serverless API integration
• Built-in authentication options
• Free tier for personal and development projects

Create an Azure Static Web App

After signing in to the Azure Portal, I created a new Static Web App and configured the basic settings.

Resource Group

I created a dedicated Resource Group to organize all project resources, making them easier to manage throughout development and deployment.

Static Web App Configuration

Configure the following settings:

• Application Name
• Azure Subscription
• Resource Group
• Region closest to your users
• Hosting Plan (Free or Standard)

Connect Your GitHub Repository

Azure provides native GitHub integration, making continuous deployment quick and effortless.

After connecting my GitHub account, I selected:

• Repository
• Branch
• Build Preset
• Framework

Azure automatically generated a GitHub Actions workflow that handles future deployments whenever changes are pushed to the selected branch.

Configure the GitHub Actions Workflow

The generated workflow can be customized to match your project structure.

Typical configuration includes:

• Build command
• Application location
• API location (optional)
• Output directory

Once configured, every commit automatically triggers a new deployment.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    permissions:
       id-token: write
       contents: read
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Install OIDC Client from Core Package
        run: npm install @actions/core@1.6.0 @actions/http-client
      - name: Get Id Token
        uses: actions/github-script@v6
        id: idtoken
        with:
           script: |
               const coredemo = require('@actions/core')
               return await coredemo.getIDToken()
           result-encoding: string
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_SAND_0189C450F }}
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          github_id_token: ${{ steps.idtoken.outputs.result }}
        env:
          NEXT_PUBLIC_SANITY_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_SANITY_PROJECT_ID }}
          NEXT_PUBLIC_SANITY_DATASET: ${{ secrets.NEXT_PUBLIC_SANITY_DATASET }}
          NEXT_PUBLIC_RESEND_API_KEY: ${{ secrets.NEXT_PUBLIC_RESEND_API_KEY }}
          NEXT_PUBLIC_UPLOADTHING_SECRET: ${{ secrets.NEXT_PUBLIC_UPLOADTHING_SECRET }}
          NEXT_PUBLIC_UPLOADTHING_APP_ID: ${{ secrets.NEXT_PUBLIC_UPLOADTHING_APP_ID }}


          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          action: "close"

Deploy the Application

Each push to the deployment branch automatically starts the CI/CD pipeline.

The workflow performs the following steps:

1. Clone the repository
2. Install project dependencies
3. Build the application
4. Generate production assets
5. Deploy the website to Azure Static Web Apps

This automation eliminates the need for manual deployments and keeps the production environment synchronized with the latest code.

Configure a Custom Domain

Azure makes connecting a custom domain straightforward.

After verifying domain ownership, I mapped the domain to the Static Web App and Azure automatically provisioned an SSL certificate, enabling HTTPS without additional configuration.

This provides a secure and professional deployment with minimal effort.

Conclusion

Azure Static Web Apps provides a streamlined deployment experience for modern frontend applications. With built-in GitHub integration, automatic SSL, global content delivery, and continuous deployment, it significantly reduces deployment complexity while improving reliability.

For freelance and production projects, I regularly recommend Azure Static Web Apps because it allows developers to spend less time managing infrastructure and more time building high-quality applications.