500 Internal Server Error when deploying Next.js app with Clerk to Azure Web App

I'm deploying a Next.js application that uses Clerk for authentication to Azure Web App (Linux). The deployment completes successfully, but when I try to access the site in the browser, I get the following error:

GET https://azurexxxxxx.azurewebsites.net/ 500 (Internal Server Error)

The app works perfectly in local development.

I'm using the app directory (App Router) structure in Next.js.

The project is deployed through GitHub Actions.

I’m using Node.js 20 as the runtime.

I’ve checked the Azure App Service logs, but they don’t give much insight — just a generic 500 error.

github yml file:

name: Build and deploy Node.js app to Azure Web App - 
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read 
    steps:
      - uses: actions/checkout@v4
      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'
      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present
      - name: Zip artifact for deployment
        run: zip release.zip ./* .next -qr
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v4
        with:
          name: node-app
          path: release.zip
  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    permissions:
      id-token: write 
      contents: read 
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v4
        with:
          name: node-app
      - name: Unzip artifact for deployment
        run: unzip release.zip
      - name: Login to Azure
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZUREAPPSERVICE_CLIENTID }}
          tenant-id: ${{ secrets.AZUREAPPSERVICE_TENANTID }}
          subscription-id: ${{ secrets.AZUREAPPSERVICE_SUBSCRIPTIONID }}
      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v3
        with:
          app-name: 'appname'
          slot-name: 'Production'
          package: .

What could be causing the 500 Internal Server Error on Azure Web App when deploying a Next.js app using Clerk, and how can I debug this further?

GET https: //azurexxxxxx. azurewebsites. net/ 500 (Internal Server Error)

Even I got the same when I deployed Nextjs app with clerk auth to Azure Web App Linux using GitHub Actions. I checked the Kudu console using below URL and noticed that my .env file was not deployed to Azure.

https://<WebAppName>.scm.canadacentral-01.azurewebsites.net/newui/fileManager#

So, I configured the .env file variables in the App Settings -> Environment Variables section of the Azure Web App.

CLERK_SECRET_KEY:<secretValue>
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY : <ClertApiKeyValue>

Make sure to add start script to package.json file.

 "start": "node_modules/next/dist/bin/next start"

Azure Output: