500 error code when entering a route directly in the browser

[lucasoz]

Hi! I'm deploying my next js 13 app with app directory in azure static web apps.
When I enter to / route the app is working correctly, also when I click on a link to a /route/... for example.
When entering a route /route/... directly in the browser I am getting a next js 500 error, when I search for failures in application insights I found the following. It's happening with all the routes after index /

Message: Path doesn't exist!
Exception type: System.InvalidOperationException
Failed method: Mono.Unix.UnixFileSystemInfo.AssertValid

To Reproduce
Steps to reproduce the behavior:

1. Deploy
2. Go to '/...' route
3. See 500 error

trigger:
  - develop

jobs:
  - job: build_and_deploy_job
    displayName: 'Build and Deploy Job'
    pool:
      vmImage: ubuntu-latest
    steps:
      - checkout: self
        submodules: true
      - task: AzureStaticWebApp@0
        inputs:
          app_location: '/'
          api_location: ''
          output_location: ''
          azure_static_web_apps_api_token: $(DEPLOYMENT_TOKEN)
        env:
          PRE_BUILD_COMMAND: npm install -g pnpm && pnpm install
          CUSTOM_BUILD_COMMAND: pnpm run build
          VERBOSE: true
          SITE_NAME: $(SITE_NAME)
          NEXT_PUBLIC_BACKEND_URL: $(NEXT_PUBLIC_BACKEND_URL)
          NEXT_PUBLIC_GOOGLE_CLIENT_ID: $(NEXT_PUBLIC_GOOGLE_CLIENT_ID)
        displayName: 'Deploy to Azure Static Web Apps'

Additional context

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

I have tried adding the staticwebapp.config.json with json above but it didn't work

[jinyu-loopmind]

+1, same issue here.

To clarify, in my case, I get 500 error whenever calling external API to get data and render server component in NextJS.

[andrem0]

+1 same here

@lucasoz @jinyu-loopmind did you find any workarounds?

@Reshmi-Sriram any suggestions from your end?

[lucasoz]

@andrem0 I didn't. I am waiting for support. But for now I'm trying to deploy the project in a virtual machine. Tons of work but it works for me now.

[jxx123]

+1 same here

@lucasoz @jinyu-loopmind did you find any workarounds?

@Reshmi-Sriram any suggestions from your end?

I switched back to pages router, and so far so good.

[Reshmi-Sriram]

Adding @thomasgauvin to help bring some insights.

[thomasgauvin]

SWA doesn't fully support NextJS 13 (app directory & RSCs) today, we're working on this and you can expect an update in the next couple of months.

[hohoaisan]

@jxx123 Can I know your current next version? Currently I've been working with NextJS 13 and pages directory but any api calls to database or any external API given 500 error, the message is "Path doesn't exist!"

[andrem0]

@thomasgauvin any updates on this matter?

[thomasgauvin]

We're still working on this and testing Next 13 & RSC support at the moment, updates to come

[Maki-Grz]

Nous travaillons toujours sur cela et testons la prise en charge Next 13 & RSC en ce moment, les mises à jour à venir

Hey, any news about the SWA compatibility with Next.js latest version ? In my case it's juste a for generateStaticParams() pages. And i cannot set up the logs on the Azure SWA side (i don't understand or it's not yet compatible). Have a great day !

See an exemple here (Next.js 13.4.19) Projects page with slug

[thomasgauvin]

Update, we are still working on NextJS and new features needed for full support, stay tuned

[HeyRistaa]

On nextjs 13.5.2 standalone, SWA actually works great, at least for third-party API calls and SSR pages. :)

[rbourdon]

On nextjs 13.5.2 standalone, SWA actually works great, at least for third-party API calls and SSR pages. :)

Middleware broken though :( Size limit is also much too small.

[HeyRistaa]

On nextjs 13.5.2 standalone, SWA actually works great, at least for third-party API calls and SSR pages. :)

Middleware broken though :( Size limit is also much too small.

Yep, I assume that's actually something that Azure SWA will take care of 🙂