Deploying Next.js to Azure Web App with Github Actions
Tags: nextjs, azure, githubactions
Published: 2023-05-03 07:18:03

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31ambaff0xexefzer1ca.png)

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.

2. 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",
}
```

3. 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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/im9fbysgrbmbggfa0s11.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe9yc3avi8t643jjuris.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f32iunj9idkdgvhkz0iu.png)

5. Still receiveing 500 ERROR?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jbzxm7xcqeni7ql94y7.png)

Then you will need to investigate the Azure Logs

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1v6ayupl0a7roch7ua15.png)




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