Next.js 13 SSR deployment shows 500 Internal Server error when accessed - not when run in local as standalone prod build

[colinscz]

Describe the bug

Hi guys,

When I want to deploy my Next.js SSR app the build fails due to a missing index.html. I went through the following resources but couldn't find something regarding the issue I face.

• https://github.com/Azure/static-web-apps/discussions/921
• https://github.com/Azure/static-web-apps/discussions/959
• https://github.com/Azure/static-web-apps/discussions/1066
• https://github.com/aaronpowell/hybrid-next-on-swa/blob/main/.github/workflows/azure-static-web-apps-blue-smoke-08b09b010.yml
• https://github.com/Azure/static-web-apps/issues/73

The production build goes through without errors and it seems the static pages and the dynamic page setup is done correctly. If I am not mistaken the index.html file would be required for the use case of Static Site Generation with next build && next export. In my case I only use next build since I want to go with Server Side Rendering.

• Azure Pipelines workflow YAML file:

  
  name: Dev CI-CD-$(year:yy)$(DayOfYear)$(rev:.r)

variables: isMain: $[eq(variables['Build.SourceBranch'], 'refs/heads/main')] isDevelop: $[eq(variables['Build.SourceBranch'], 'refs/heads/develop')]

pr: branches: include:

• develop trigger: branches: include:
• '*'

stages:

• stage: Build jobs:

  • job: build displayName: Build project steps:

    • task: Cache@2 displayName: 'Cache .next/cache' inputs: key: next | $(Agent.OS) | package-lock.json path: '$(System.DefaultWorkingDirectory)/.next/cache'

    • task: NodeTool@0 inputs: versionSpec: '16.x' displayName: 'Install Node.js'

    • script: | npm install npm run build displayName: Build nextJs App

    • publish: $(Build.SourcesDirectory)/.next artifact: nextApp displayName: Publish nextJs App Bundle

• stage: deploy_staging displayName: Deploy Staging jobs:

  • deployment: deploy displayName: Deploy and test environment: Staging variables:
    • group: Azure-Static-Web-Apps-xxxx-variable-group strategy: runOnce: deploy: steps:
      • download: none
      • checkout: none
      • download: current artifact: nextApp
      • task: AzureStaticWebApp@0 displayName: Deploy to staging environment inputs: workingDirectory: $(Pipeline.Workspace)/nextApp output_location: "/out" skip_app_build: true skip_api_build: true is_static_export: false verbose: true azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN) deployment_environment: staging

**Expected behavior**
The publish job should run through. Since I cannot find any other indication or property in the docs that I would have to set in order to make it work. If some additional configuration is required I would like to see it 
- reflected in the docs
- if possible post it in an example workflow targeting this use case

**Screenshots**
Output of the publish step:
![image](https://github.com/Azure/static-web-apps/assets/19342760/22019cd8-0298-4c1b-8121-222ac052ed2c)

Content of prod build folder:
![image](https://github.com/Azure/static-web-apps/assets/19342760/03c94289-7831-4373-9864-f6fe76e87ac4)

![image](https://github.com/Azure/static-web-apps/assets/19342760/26fff4b6-62c3-451d-b793-1169d0a43462)

**Additional context**
- Next.js with new app directory (Next.js: 13.4.12)
- Building from Azure DevOps
- frontend inspired by [Strapi boilerplate](https://github.com/strapi/nextjs-corporate-starter/tree/main/frontend) 
- SSR needed because of internationalization requirements
- Using npm

[colinscz]

Update, I partially resolved this by creating a new static web app and using the YAML created out of the box instead of my configuration.

Instead of

  - stage: deploy_staging
    displayName: Deploy Staging
    jobs:
      - deployment: deploy
        displayName: Deploy and test
        environment: Staging
        variables:
          - group: Azure-Static-Web-Apps-xxxx-variable-group
        strategy:
          runOnce:
            deploy:
              steps:
                - download: none
                - checkout: none
                - download: current
                  artifact: nextApp
                - task: AzureStaticWebApp@0
                  displayName: Deploy to staging environment
                  inputs:
                    workingDirectory: $(Pipeline.Workspace)/nextApp
                    output_location: "/out"
                    skip_app_build: true
                    skip_api_build: true
                    is_static_export: false
                    verbose: true
                    azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)
                    deployment_environment: staging

that part of the pipeline now looks like this:

  - stage: deploy_staging
    displayName: Deploy Staging
    jobs:
      - deployment: deploy
        displayName: Deploy and test
        environment: Staging
        variables:
          - group: Azure-Static-Web-Apps-xxxx-variable-group
        strategy:
          runOnce:
            deploy:
              steps:
                - download: none
                - checkout: self
                  submodules: true
                - task: AzureStaticWebApp@0
                  displayName: Deploy to staging environment
                  inputs:
                    output_location: ""
                    verbose: true
                    azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN)
                    deployment_environment: staging

I got rid of the following props:

• skip_app_build
• skip_api_build
• is_static_export

After that I also had to add the standalone prop to next.config.js as described here: https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid#configure-your-nextjs-app-for-deployment-to-static-web-apps

Issues I am left with, which I guess aren't related to Azure SWA unless the app dir approach has something to do with it:

• Path "/" throws an error
• Pages return an error except the start page under /en & /de, my guess right now is that it could be related to the headless npm package I use which exists for "client" and "node.js" and I am using "client", everything else is kind of static but due to the internationalization I went for SSR. (https://github.com/adobe/aem-headless-client-js)

[colinscz]

Update: I executed the project successfully in prod mode in local after doing the manual step of copying over static and public folder to the standalone directory as per Next.js docs: https://nextjs.org/docs/app/api-reference/next-config-js/output#automatically-copying-traced-files

However when I deploy it to Azure and access the homepage/index available under the locale /en or /de I directly receive a 500 Internal Server error.

After syncing with some colleagues from our internal Azure unit I found out that with the current setup I am unable to attach logging to the created Azure Function as part of this blueprint (seems its not editable) nor see any application insights on the Azure portal itself....

[colinscz]

This issue is most likely the same as described in #1196

[AGI-CEO]

This issue is most likely the same as described in #1196

I'm having the same issue, did you figure it out? I'm trying to deploy my personal portfolio site on azure

[lincolnpires]

I was also able to deploy a new project under SWA for a couple weeks, but as soon as we started using Middleware, i18n, AuthX and calling an external API, things started to crash - when using standalone (the recommended way).
There are all the "manual" steps of copying things around into the standalone folder, still seems to not function properly.
I tried locally doing node server.js and it worked, still can't seem to run this nicely, especially in SWA.
Perhaps the way to go is with a container or so. 🤷🏾‍♂️

If you figure it out, please update here. I'll do same.

[thomasgauvin]

Hey folks! We released significant improvements to our Next.js support on Static Web Apps, check out the announcement in #1428. Closing this thread as it's resolved now!