Next.js SSR app on Azure Static Web Apps throws Server Error

Question

Next.js SSR app on Azure Static Web Apps throws Server Error

Jihoo Byeon 25

I depolyed a simple Next.js SSR app to Azure Static Web Apps via Azure Pipelines. It deployed with no error, but app throws "Server Error”.

스크린샷 2023-12-02 오후 10.19.59

I didn’t installed other packages via yarn and using default Azure pipeline YAML file. The only thing which is not basic on my app is Yarn; I’m using ver 4.0.2 - so I had to use node:18. I don't use app router. I use good-ol' pages router. I tried everything I can do and nothing worked.

This is my app: https://jolly-flower-0b2849210.4.azurestaticapps.net

2 answers

Your answer

Answer 1

ajkuma 28,036 Microsoft Employee Moderator

Apologies for the delayed response from over the weekend.

Based on the issue description, I understand you mentioned that you didn't install other packages via yarn and are using the default Azure pipeline YAML file. Also, no, app router.

You may try the following steps to isolate the issue:

1. You may always leverage Azure Static Web Apps diagnostics from Azure Portal> Navigate to your App Service app in the Azure Portal.

In the left navigation, click on Diagnose and solve problems - Review and run - “Configuration and Management”

-Azure Static Web Apps diagnostics overview

2. Kindly your app_location and output_location in the Azure pipeline YAML file are correctly set. The app_location should point to the root of your Next.js app, and the output_location should point to the .next folder after the build.

-Configuration overview

Review the Build and Deployment Logs to fetch more info.

You may define a fallback rule by adding a navigationFallback section.
Use staticwebapp.config.json as described in this article to configure routing and other settings for your static web app.

-Build configuration for Azure Static Web Apps

Kindly let us know, I'll follow-up with you further.

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-12-04T13:05:21.94+00:00
Adding more:

If you haven’t tried, in order to enable the standalone feature, add the following additional property to your next.config.js:

Configure your Next.js app for deployment to Static Web Apps

module.exports = { output: "standalone", }

Just to highlight, Azure Static Web Apps' build engine is powered by Oryx, which builds your app's frontend and API.

When the app is built, Oryx detects the build steps and executes them automatically. For example, for using Node.js, it installs packages using npm or Yarn. Then, it runs the build or build:azure script provided in your app's package.json file.

You may set skip_app_build to true. To learn more, see Build configuration.

The skip_app_build command is currently only supported for the frontend app. The API app must be built by the Azure Static Web Apps GitHub Actions or Azure Pipelines task.

AzureStaticWebApp@0 - Deploy Azure Static Web App v0 task

Kindly let us know, I'll follow-up with you further.

Jihoo Byeon 25

@ajkuma, I already added output: "standalone" to next.config.js, and I can't use skip_app_build: true since my app is an API app.

I also tried adding navigationFallback at staticwebapp.config.json but no luck. my app_location is "/" and I both tried output_folder to "" and ".next", but returns same "Server Error".

And Azure Static Web Apps diagnostics is not helping me - it gives nothing informative about error. User's image

User's image

The only thing which seems to be useful is telling HTTP error code: 502_0, but I already found that in Edge browser console.

User's image

I'm attaching my package.json and Azure pipelines YAML file, which only things I can tell to you.

// package.json

{
  "name": "vmseries",
  "version": "1.0.0",
  "private": true,
  "engines": {
    "node": "^18.12.0"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.0.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^18",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "typescript": "^5"
  },
  "packageManager": "yarn@4.0.2"
}

# Azure pipelines YAML file
name: Azure Static Web Apps CI/CD
pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main
jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-jolly-flower-0b2849210-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_JOLLY_FLOWER_0B2849210)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

EDIT: I also tried downgrade node to 16, yarn to 3 and next to 13, but that did not worked either.

Answer 2

Jihoo Byeon 25

I found that downgrading to yarn classic (version 1.x) works.
@ajkuma, please tell whom responsible to official docs to codify on Azure SWA docs that Static web apps DOES NOT SUPPORT yarn berry.

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-12-05T14:15:00.8466667+00:00

Glad to know that you have sorted out the issue. Thanks for the follow-up and update.
I'll relay the feedback internally to our content author and product engineering team.

If you wish, you may always share your feedback on respective Azure doc: Supported languages and runtimes in Azure Static Web Apps ( Feedback > This page)

Share via

Next.js SSR app on Azure Static Web Apps throws Server Error

2 answers

Your answer