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 🙂

[SpBills]

Looking for updates on App dir! @thomasgauvin any update? Very important for us to have this :)

Also what will the support for server actions look like?

[Baffour]

Hi @ristaa presume this is still being worked on? Is there a reasonable workaround?

Trying to deploy my project whilst being new to static web apps, nextjs and yaml build pipelines so it's been an interesting challenge 😅

Edit: never mind, took the plunge and migrated to pages router like others

[HeyRistaa]

@Baffour We moved from away from SWA, tbh :D
But it's working a bit better with newest nextjs versions and azure SWA too

[Baffour]

@ristaa ah my bad you're not working on this, I meant to mention @thomasgauvin!

But yeah, actually issue is new stuff seems like it's ahead of Azure at the moment. Before I got this 500 I had build failures related to me using node 20 instead of 18, and when setting up a new next project they recommend using app router. I'm just working on a quick PoC project and just need it running outside my machine so don't have to be too concerned with maintainability of my code 😄

[thomasgauvin]

Hey folks! We rolled out significant improvements to our support for Next.js on Static Web Apps, including support for RSC/App Dir/Server Actions. Check out #1428 for the announcement thread, try it out and let us know how if goes in #1428.