How can I deploy a Next.js app to Azure with CI/CD pipelines?

Below is an approach that many teams take when deploying a Next.js application on Azure WebApps:

---

What to Include in Your Deployment .zip

When using Next.js in production (started by running the “build” script and then running “next start”), you should package the following:

• Build Output:
  The entire .next folder that is produced when you run npm run build. This contains your compiled pages, server files, and static HTML (if using SSR or SSG).

• Runtime Files:
  • package.json (and optionally package-lock.json or yarn.lock)
  • Your next.config.js (if present)

• Static Assets:
  • The public/ folder (if you have any static assets used by your app)

What Not to Include:

• You generally don’t need to include node_modules because Azure will detect your Node.js application (via your package.json) and run an install during deployment if required.
• Do not package only the .next folder alone—the runtime (including the configuration and static assets) is required so that the startup command can run your Next.js server (with the proper dependencies).

---

Startup Command Considerations

Azure WebApps running on Linux try to detect a Node.js application by looking for a package.json entry point. For a Next.js app, ensure that your package.json contains a “start” script similar to:

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

When you deploy:

• If you leave the Startup Command blank:
  Azure should detect your Node app and run npm start by default.

• If you need to specify it manually:
  Set the command to:

  npm run start
  

  This tells Azure to run your defined “start” script (which calls next start).

If you see errors like “npm start is not recognized as an internal or external command,” double-check your package.json and confirm that the “start” script is defined. Some people try to directly call next start (or npx next start), but if you have the script set up, it’s best to simply run npm run start.

---

Summary for Your Pipeline

1. Build Pipeline:

   • Run npm install
   • Run npm run build
   • Archive a deployable package that includes the .next folder plus critical runtime files (package.json, public/, next.config.js, etc.).

2. Release (Deployment) Pipeline:

   • Deploy the zip so that Azure can install runtime dependencies (via the package.json) and then start the app using npm run start.

This lets your app start as a full Next.js server that can render dynamic pages and serve static assets correctly.

---

By packaging the proper files and ensuring your startup command correctly starts Next.js, your Azure WebApp should display your Next.js application instead of the default page.