Deploying Next.js to Azure Web App with Github Actions

This is not going to be a detailed post, this is more like a checklist to remember of all the required things in 2023 to have a correct deployment from Github to Azure Web App when I'm working with Next.js framework.

1. If I'm using Bicep or terraform for deployment this step is not necessary, otherwise Create a Web App in Azure and configure the deployment with Github.

This will create a Github Deployment file, but I'll like something simpler like this:

name: Build and deploy

on:
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    environment:
      name: production

    steps:
      - uses: actions/checkout@v2

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: "18.x"

      - name: npm install, build, and test
        run: |
          npm install --force
          npm run build
          mv ./build/static ./build/standalone/build
          mv ./public ./build/standalone
        working-directory: ./src
        env:
          NEXTAUTH_SECRET: ${{ vars.NEXTAUTH_SECRET }}
          NEXTAUTH_URL: ${{ vars.NEXTAUTH_URL }}
          AZURE_AD_TENANT_ID: ${{ vars.AZURE_AD_TENANT_ID }}
          AZURE_AD_CLIENT_ID: ${{ vars.AZURE_AD_CLIENT_ID }}
          AZURE_AD_CLIENT_SECRET: ${{ vars.AZURE_AD_CLIENT_SECRET }}
          NEXT_PUBLIC_CONNECTION_PROVIDER: ${{ vars.NEXT_PUBLIC_CONNECTION_PROVIDER }}
          NEXT_PUBLIC_CONNECTION_PRESENCE: ${{ vars.NEXT_PUBLIC_CONNECTION_PRESENCE }}
          NEXT_PUBLIC_CONNECTION_MEETING: ${{ vars.NEXT_PUBLIC_CONNECTION_MEETING }}

      - name: "Deploy to Azure Web App"
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: "teamshousepre"
          slot-name: "Production"
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_134181791EE54060B31CE60610FB9DAE }}
          package: ./src/build/standalone

Some interesting things here are:

• I'm installing with --force because I sometimes need Next.js canary version.
• After building I am moving static and public folders inside standalone folder.
• I shared the ENV variables with the deployment (not always needed but depending on how you have created the project)
• I'm uploading the standalone folder.

1. Configure Next.js to use standalone and don't use .next folder (this folder is sometimes forgotten during the deployment).

{
  reactStrictMode: true,
  output: "standalone",
  distDir: "build",
}

1. This can be changed in the deployment file but is also easy to change the startup command on Azure Settings, we want node server.js.

1. Remember to fill the variables on Azure and Github:

1. Still receiveing 500 ERROR?

Then you will need to investigate the Azure Logs

Nothing else on my checklist right now, enjoy if you need this :)