Deploy Node/React/Next.js application to Azure App Service

 To deploy your Next.js dashboard (with App Router) to Azure App Service, follow these steps. 

Azure supports Next.js out-of-the-box with static and server-rendered content, including middleware.

microsoft/copilot-metrics-dashboard

>>C:\copilot-metrics-dashboard\src\dashboard>

1. Prepare Your App for Azure, Ensure your app is ready:

package.json must have a build and start script:

{

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

You're using App Router (e.g., app/page.tsx), so next build will generate both static and server-rendered routes.

2. Create Production Build (Locally or via CI), run through VSC

npm install

npm run build

npm start - This confirms your app runs as a production server with next start.

Make sure the build completes successfully.

3. Deploy Using Azure CLI or Azure Portal

Option A: Using Azure CLI, deploy directly from your machine, run through PowerShell:

a. Login to Azure, select your subscription: az login

b. Create a resource group (skip if it already one)

az group create --name myResourceGroup --location "East US"

c. Create App Service plan, F1 - free service, B1 - basic service

az appservice plan create --name myPlan --resource-group myResourceGroup --sku B1 --is-linux

d. check runtime versions: az webapp list-runtimes --os-type linux

e. Create Web App (Node 18+ recommended)

az webapp create  --resource-group myResourceGroup --plan myPlan --name my-nextjs-dashboard --runtime "NODE:22-lts" --deployment-local-git

This returns a deploymentLocalGitUrl like: https://<username>@my-nextjs-dashboard.scm.azurewebsites.net/my-nextjs-dashboard.git

f. Get Your Publishing Credentialsfor your App Service:

az webapp deployment list-publishing-credentials --name my-nextjs-dashboard --resource-group myResourceGroup

This will return something like:

{
  "publishingUserName": "$cot",
  "publishingPassword": "abcd1234example",
  "scmUri": "https://$cot@cot.scm.azurewebsites.net/cot.git"
}

g. Initialize git, Push local code to Azure

git init

git add .

git commit -m "Initial deploy"

h. Deploy (get Git remote URL from above), Add Azure remote

# git remote add azure <deployment-url>

git remote add azure https://<username>@my-nextjs-dashboard.scm.azurewebsites.net/my-nextjs-dashboard.git

error: remote azure already exists.

You can verify it's updated with: git remote -v

Option 1: Update the Existing Azure Remote: git remote set-url azure https://<new-azure-deploy-url>.git

Option 2: Remove and Re-add the Remote: git remote remove azure, git remote add azure https://<your-deployment-url>.git

Option 3[x]: Keep the existing azure and add another one: git remote add azure1 https://<your-other-deployment-url>.git, git push azure1 master

git push azure master

When prompted for username/password for Git deploy

Username: publishingUserName (e.g. $copilot)

Password: publishingPassword

remote: Build Summary :

remote: ===============

remote: Errors (0)

remote: Warnings (0)

remote:

remote: Triggering recycle (preview mode disabled).

remote: Deployment successful. deployer =  deploymentPath =

Error:

error: src refspec main does not match any

error: failed to push some refs to 'https://<username>@my-nextjs-dashboard.scm.azurewebsites.net/my-nextjs-dashboard.git

means that your local Git repository doesn't have a main branch, or it's not committed yet.

4.Done! Visit Your Site, https://my-nextjs-dashboard.azurewebsites.net

Option B: Deploy from GitHub Repo, Go to Azure Portal > your App Service > Go to Deployment Center > Choose GitHub as source

Select your repo & branch > Configure Build Settings:

Runtime: Node 18

Build command: npm install && npm run build

Start command: npm run start

(Optional) Set Environment Variables, In Azure Portal > Go to your App Service > Go to Configuration

Under Application settings, add variables like, You can also set secrets here (e.g., database URLs, API keys).

NODE_ENV = production

Save and restart the app