Update: Enhanced Next.js Hybrid support in Static Web Apps

[Reshmi Sriram (Reshmi-Sriram)]

Hello all!

Static Web Apps recently enhanced the support for Next.js Hybrid rendering. It now has these additional feature supports:

• Support for standalone: Next.js supports Output File Tracing, which helps in compressing the app with just the required minimal dependencies and thus reducing the app size and enhancing the performance. Static Web Apps now supports this feature. This will create a folder at .next/standalone which can then be deployed on its own without installing node_modules. In order to enable this support, you need to add output:"standalone" in your next.config.js.
• Split deployment of static and dynamic content: Static Web Apps will now render the static content in the SWA infrastructure, separate from the dynamic content rendering happening in the managed backend. All the content stored in public and .next/static folders during build time will be now handled and cached separately.
• Bug fix - ISR Stale cache: the revalidation logic for ISR now has a bug fix to avoid serving build-time stale content for the pages.

NOTE: All these changes will reflect in your Next.js SSR apps only once you redeploy the app.

Kindly let us know how the enhanced experience is and drop more suggestions on things we should work towards for GA in the discussion thread here or the thread below!

Previous announcement thread: #921

Happy Coding!❤️

[cyberpunk6months]

Unfortunately, CORS on nextjs still doesn’t work, I need my function to support some device installed app’s API calls, in which the originators are local hosts. I have tried #588 (comment), and it still does not work. My app on Vercel would work though, so I don’t think that’s related to my server’s config.

[Reshmi Sriram (Reshmi-Sriram)]

Hey xiningli
We don't have an ETA at the moment for this fix, but the team is actively working on it and you should hear from us soon.
Apologies for the inconvenience!

[cyberpunk6months]

Reshmi Sriram (@Reshmi-Sriram) , so is there a workaround too add cors support in nextjs? staticwebapp.config.json is not working. And it seems to me that Azure is intercepting the OPTIONS method, just returning a date which is not a valid POST preflight

[Thomas Gauvin (thomasgauvin)]

We're working to add support for staticwebapp.config.json to NextJS apps, expect updates in the coming months.

[mkromp]

Are there any news to this topic? I need some security headers in my NextJS-static-web-app.

Unfortunatly staticwebapp.config.json doesn't work:
[WARNING] For Next.js apps, staticwebapp.config.json features are not fully supported yet!

And changes in the next.config.js are ignored (i've used this description: https://nextjs.org/docs/pages/api-reference/next-config-js/headers

But the MS-docu says, I should use the next.config.js (https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid):
Features such as custom headers and routing can be controlled using the next.config.js file

[ldrumm4]

I'm seeing this same issue - custom headers specified in next.config.js seem to be ignored when deploying to SWA.

Are there any updates or workarounds for setting custom headers?

[JeroenvdBurg]

Reshmi Sriram (@Reshmi-Sriram) We have tested the new features on our next.js application deploy and they work great!

• Standalone feature makes the deployment a lot smaller, only necessary node modules are published.
• ISR bugfix also works! So no more old page content (from build time) served anymore 🥳

One thing to take into account:
When deploying our app we ran into an internal server error which was caused by an environment setting missing. This is because with the standalone feature env.local files are not copied to your .next/standalone folder (this is as designed).

The application insights was however not very informative about why the internal server error occured (probably because the function itself was not started at all).
You can verify locally what is going wrong by running npm run build in the root folder and then node server.js in the .next/standalone folder. This gives you a more meaningfull (error) message.

[JeroenvdBurg]

nope, I have just found the solution. When checking the live metrics in app insights I found this trace : Error: Cannot find module 'next/dist/compiled/jest-worker'. This resulted in this issue > vercel/next.js#48173

I have reverted to next 13.2.4 and all the images are loaded correctly.

[Collin Barrett (collinbarrett)]

✅ confirmed. worked for me!

collinbarrett/FilterLists@ea6d661

[Kasper Andersson (KasperAndersson)]

Collin Barrett (@collinbarrett) JeroenvdBurg Are you guys still running 13.2.4 or have you upgraded to 13.4.1 - or newer? Thanks in advance

[Collin Barrett (collinbarrett)]

My app is pre-launch and not in a working state at the moment. I'll try to remember to update when I get it working again on either Next version hopefully soon-ish.

[JeroenvdBurg]

upgraded to 13.4.1 issue has been resolved. Works all good on standalone mode in SWA

[Collin Barrett (collinbarrett)]

Split deployment of static and dynamic content: Static Web Apps will now render the static content in the SWA infrastructure, separate from the dynamic content rendering happening in the managed backend. All the content stored in public and .next/static folders during build time will be now handled and cached separately.

How can I debug this? I am testing deploying as standalone to SWA, and an image fails to load with 500s. In AppInsights, I see errors like:

Path doesn't exist!

System.InvalidOperationException:
at Mono.Unix.UnixFileSystemInfo.AssertValid (Mono.Posix.NETStandard, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51)
at Microsoft.Azure.WebJobs.Script.Workers.Http.HttpWorkerProcess.AssignUserExecutePermissionsIfNotExists (Microsoft.Azure.WebJobs.Script, Version=4.16.0.0, Culture=neutral, PublicKeyToken=null: /src/azure-functions-host/src/WebJobs.Script/Workers/Http/HttpWorkerProcess.cs:75)

I suspect my .next/static contents are not making it to the SWA CDN. This is my sample code at the commit where I'm experiencing this. The Image that is failing to load on my Azure SWA is located here in the code and loads fine on my development machine.

[JeroenvdBurg]

Hi Colllin, yeah it looks like it could not find your image in the static content.
I'm not sure the mentioned appinsight error is related but it is pretty vague and this is something that is reported as a regular error message > #963

Is your favicon working ? if so you can maybe try to move your image to the public folder and redeploy?

Overall the debug possibilities for Static Webapps are not yet super great. Hope they will add some more diagnostics to the platform otherwise it will be a lot of guessing what is wrong. Reshmi Sriram (@Reshmi-Sriram)

[Collin Barrett (collinbarrett)]

Thanks for the quick reply!

My favicon is working from the public directory. I have also tried putting the image in question in that directory using the nextjs Image tag without success in SWA (it works fine on my local machine). I can get it to work if I use just a regular HTML img tag. But I was trying to take advantage of nextjs's image optimization using the Image tag, which I can't seem to get working in SWA.

/_next/image?url=%2Flogo_filterlists.png&w=384&q=75

[Collin Barrett (collinbarrett)]

✅ resolved. see here.

[notainc-devops]

We would like to move our Vercel deployments to Azure SWA, however I'm having issues with our Next.js app not seeing the environment variables. I've added them to the Configuration → Application Settings as well as in the workflows YAML:

       env:
          is_static_export: true
          ENV1: ${{ secrets.ENV1 }}
          ENV2: ${{ secrets.ENV2 }}
          ENV3: ${{ secrets.ENV3 }}

Any suggestions?

[Collin Barrett (collinbarrett)]

Is the failure to see the environment variables happening at build time (e.g., during Azure/static-web-apps-deploy@v1) and/or runtime?

[Vivek Jilla (vivekjilla)]

Also, is_static_export: true is meant for "static html export" feature of Nextjs and shouldn't be used for hybrid rendering features.

[Kyle (Kyyza)]

Collin Barrett (@collinbarrett) hi i'm seeing this happen at runtime, I try to access a variable in js by process.env.VARIABLE_KEY, but it's a null value - think it's this, unless you have a fix? #1261

[cyberpunk6months]

Is anyone also experiencing this for next js? I see that the staticwebapp.config.json is not working. And it seems to me that Azure is intercepting the OPTIONS method, just returning a date which is not a valid POST preflight

[Thomas Gauvin (thomasgauvin)]

Hi xiningli, currently the staticwebapp.config.json is not supported as documented in our hybrid NextJS docs: https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs-hybrid#unsupported-features-in-preview

[Thomas Gauvin (thomasgauvin)]

This has changed with our improved support for Next.js on Static Web Apps, refer to #1428 for most up to date information!

[Christian Brevik (cbrevik)]

Has there been any progress wrt. cold starts Reshmi Sriram (@Reshmi-Sriram)? We have a small API backend on our NextJS-site hosted on SWA, and the site consistently loads slow if we haven't had any visitors in a while. I've understood that this is because of the cold start on the function? Is there some way for us to use a different App Service plan or configure it in any way to avoid cold starts?

[JeroenvdBurg]

Hi Christian Brevik (@cbrevik)

At the moment it is not possible to deploy the function in an app service plan. It is only a managed function in a consumption plan. This means that when you are not using it it will spin down.

For now you can keep it alive with an availibility test, this will reduce the coldstarts to a minimum. For more info see > #959 (reply in thread)

[Thomas Gauvin (thomasgauvin)]

We're working on a suite of NextJS improvements which should rectify cold starts, and expect this to come out by end of summer.

[Thomas Gauvin (thomasgauvin)]

Our timeline has been pushed out because we had to invest in significant infrastructural improvements to support improve support for Next.js. We've been working on this throughout the past year, this is a high priority item, and we believe we are months away from support.

[Thomas Gauvin (thomasgauvin)]

Christian Brevik (@cbrevik) our newest improvements for Next.js support on Static Web Apps bring along major improvements to cold starts, announcement here: #1428

[Thomas Gauvin (thomasgauvin)]

Hey folks! We're continuing to work to improve our support for NextJS, and we're focusing on reducing cold starts and increasing app size limits. Just wanted to provide an update indicating that we are actively working on this. Stay tuned for more updates, we'll be updating you all in this thread/discussions regarding updates to NextJS

[Maged Helmy (magedhelmy1)]

Thank you Alex Rabin (@alexrabin)

[Aurimas Šimkus (superhp)]

Thanks Alex Rabin (@alexrabin). I'm very confused how SWA team is prioritizing the features. The hybrid support functionality has been barelly usable for a long time and there are many known critical issues such as staticwebapps.config.json support, cold starts, etc. But for some reasons the team is prioritizing totally new features such as direct DB integration or traffic manager which is increasing the stack of pending issues and is unclear if it was even asked for by any customers. Reshmi Sriram (@Reshmi-Sriram), Thomas Gauvin (@thomasgauvin), Matt Hernandez (@fiveisprime) we need more transparency about the priorities and the roadmap which where asked for many times by the community.

[Alex Rabin (alexrabin)]

Target date is by end of summer Alex Rabin (@alexrabin)

It's end of summer and there has been no communication by the SWA team about GA. Thomas Gauvin (@thomasgauvin) is there any news?

[Thomas Gauvin (thomasgauvin)]

Thanks for the feedback Aurimas Šimkus (@superhp) & all. We're definitely listening and registering the feedback that Next.js & hybrid-rendering needs some attention. We needed to invest in some significant infrastructure improvements, specifically to support Next.js given its complex hosting. We're still months away at this time, but this has been in development throughout the past year and is high priority for us.

[Thomas Gauvin (thomasgauvin)]

Thanks Alex Rabin (@alexrabin) Aurimas Šimkus (@superhp) Maged Helmy (@magedhelmy1) JeroenvdBurg, we've been hard at work for the past few months to improve our Next.js support and we are finally there! We just announced improved Next.js support on Azure Static Web Apps in this GitHub discussion, check it out and we look forward to hearing your feedback: #1428

[matbee (matbeedotcom)]

How do I get a turborepo monorepo w/ nextjs to work with this deployment? It's completely broken.

{
    "authorization": {
        "action": "Microsoft.Web/staticSites/builds/listFunctionAppSettings/action",
        "scope": "/subscriptions/b477caf2-b5f6-4564-80d2-fd3a913b734a/resourceGroups/client-portal/providers/Microsoft.Web/staticSites/client-portal/builds/default"
    },
    "caller": "xxx",
    "channels": "Operation",
    "claims": {
        "aud": "https://management.core.windows.net/",
        "iss": "https://sts.windows.net/76268b4f-fe2b-4fbc-94d6-edab94d5c24b/",
        "iat": "1683218124",
        "nbf": "1683218124",
        "exp": "1683222910",
        "http://schemas.microsoft.com/claims/authnclassreference": "1",
        "aio": "ATQAy/8TAAAAJ68dVP8FzNCa8c10dAJIP2Lr2un/1F3DcKLhLZMZlpg/pc3WJapBDYvNU/inaaXx",
        "http://schemas.microsoft.com/claims/authnmethodsreferences": "pwd,rsa",
        "appid": "aebc6443-996d-45c2-90f0-388ff96faa56",
        "appidacr": "0",
        "http://schemas.microsoft.com/2012/01/devicecontext/claims/identifier": "259ebed3-bbb7-4411-8093-086f7bcd23aa",
        "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/surname": "xxx",
        "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/givenname": "xxx",
        "groups": "240fc0b6-e4e4-4522-9395-182e0d9137d9",
        "ipaddr": "xxx",
        "name": "xxx",
        "http://schemas.microsoft.com/identity/claims/objectidentifier": "8631ae3c-3d57-4f47-a180-3e6f688407f2",
        "puid": "10032002989AD430",
        "rh": "0.AXwAT4smdiv-vE-U1u2rlNXCS0ZIf3kAutdPukPawfj2MBN8APc.",
        "http://schemas.microsoft.com/identity/claims/scope": "user_impersonation",
        "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier": "7hwZbiUI0_CZ_XlEliOnDEmryi2vunqLUJr5_-9q56U",
        "http://schemas.microsoft.com/identity/claims/tenantid": "76268b4f-fe2b-4fbc-94d6-edab94d5c24b",
        "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name": "xxx",
        "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/upn": "xxx",
        "uti": "Xpd7J25sm0ivVdrhAoqoAA",
        "ver": "1.0",
        "wids": "b79fbf4d-3ef9-4689-8143-76b194e85509",
        "xms_tcdt": "1621605550"
    },
    "correlationId": "c35e43b0-1a94-4e21-87f5-42e759fe8875",
    "description": "",
    "eventDataId": "f595524e-a6ac-4e89-a2b8-75d6daeff1b7",
    "eventName": {
        "value": "EndRequest",
        "localizedValue": "End request"
    },
    "category": {
        "value": "Administrative",
        "localizedValue": "Administrative"
    },
    "eventTimestamp": "2023-05-04T17:11:05.0540545Z",
    "id": "/subscriptions/b477caf2-b5f6-4564-80d2-fd3a913b734a/resourceGroups/client-portal/providers/Microsoft.Web/staticSites/client-portal/builds/default/events/f595524e-a6ac-4e89-a2b8-75d6daeff1b7/ticks/638188170650540545",
    "level": "Error",
    "operationId": "679f42fe-ebbc-4fde-b1f8-c0952a36ccb4",
    "operationName": {
        "value": "Microsoft.Web/staticSites/builds/listFunctionAppSettings/action",
        "localizedValue": "List Static Site Build Function App Settings"
    },
    "resourceGroupName": "client-portal",
    "resourceProviderName": {
        "value": "Microsoft.Web",
        "localizedValue": "Azure Web Sites"
    },
    "resourceType": {
        "value": "Microsoft.Web/staticSites/builds",
        "localizedValue": "Microsoft.Web/staticSites/builds"
    },
    "resourceId": "/subscriptions/b477caf2-b5f6-4564-80d2-fd3a913b734a/resourceGroups/client-portal/providers/Microsoft.Web/staticSites/client-portal/builds/default",
    "status": {
        "value": "Failed",
        "localizedValue": "Failed"
    },
    "subStatus": {
        "value": "BadRequest",
        "localizedValue": "Bad Request (HTTP Status Code: 400)"
    },
    "submissionTimestamp": "2023-05-04T17:12:52Z",
    "subscriptionId": "b477caf2-b5f6-4564-80d2-fd3a913b734a",
    "tenantId": "76268b4f-fe2b-4fbc-94d6-edab94d5c24b",
    "properties": {
        "statusCode": "BadRequest",
        "serviceRequestId": null,
        "statusMessage": "{\"Code\":\"BadRequest\",\"Message\":\"Operation not supported: A function must first be deployed to use this method.\",\"Target\":null,\"Details\":[{\"Message\":\"Operation not supported: A function must first be deployed to use this method.\"},{\"Code\":\"BadRequest\"},{\"ErrorEntity\":{\"ExtendedCode\":\"51024\",\"MessageTemplate\":\"Operation not supported: {0}\",\"Parameters\":[\"A function must first be deployed to use this method.\"],\"Code\":\"BadRequest\",\"Message\":\"Operation not supported: A function must first be deployed to use this method.\"}}],\"Innererror\":null}",
        "eventCategory": "Administrative",
        "entity": "/subscriptions/b477caf2-b5f6-4564-80d2-fd3a913b734a/resourceGroups/client-portal/providers/Microsoft.Web/staticSites/client-portal/builds/default",
        "message": "Microsoft.Web/staticSites/builds/listFunctionAppSettings/action",
        "hierarchy": "76268b4f-fe2b-4fbc-94d6-edab94d5c24b/b477caf2-b5f6-4564-80d2-fd3a913b734a"
    },
    "relatedEvents": []
}

[matbee (matbeedotcom)]

I'd appreciate better logging- this is the only information I get other than a red icon.
If I run node server.js on the standalone output, it works just fine. No indicators of what this system is doing and how.

[Mark Field (markfield)]

Hello,

Does this include support for the new app directory structure yet?

[Warren Hall (warrenhall)]

Any update on this?

[Colin S. (colinscz)]

I am currently working and actively deploying a project with the new app directory. Generally it seems to work and the deployment is successful. Currently facing one two issues with the dynamic part, although it looks like that might not be related to SWA.

[Spencer Bills (SpBills)]

Awesome! Cool that this is working. Colin S. (@colinscz) did you have to do anything special to get API routes to work?

[Thomas Gauvin (thomasgauvin)]

Next.js 13 (and up), React Server Components & app directory is not yet fully supported in hybrid-rendering mode, we're putting in infrastructural updates to support these in the coming months but it is too early to share a tentative ETA.

[Thomas Gauvin (thomasgauvin)]

We've rolled out improvements to our Next.js support which bring a handful of improvements, from support for Next.js 14 (& 13) along with app directory/React Server Components. We opened a new thread and are closing this one, please share your feedback and let's continue the discussion in the newest announcement: #1428

[HummingMind]

Can someone explain how NextJS support works in SWA exactly? Does it use Azure Functions? If so, do those only run in one region, so you lose the benefit of the static app being served from the closest CDN mirror?

Thank you.

[Thomas Gauvin (thomasgauvin)]

Hi HummingMind, when hosting NextJS for Static Web Apps, the static routes & assets are hosted on SWA's globally distributed delivery network, and the dynamic routes are hosted on serverless functions (Azure Functions) as intended

[HummingMind]

Hello Thomas Gauvin (@thomasgauvin),
I am assuming the Azure Functions run in one Azure region then? And if so, can you pick which region or regions?

Thank you!

[Thomas Gauvin (thomasgauvin)]

Yes, that is the region selection in our Portal create blades currently

[Gaurav Mantri (gmantri)]

Reshmi Sriram (@Reshmi-Sriram) - Are there any instructions on manually deploying a NextJS App in standalone mode? I have to use SWA CLI for deployment (can't use Github/Azure DevOps). The project was built successfully and I can see a "standalone" folder in the output directory. When I try to deploy the code from that directory, I get a message saying ✖ App artifact folder location .next is invalid. Could not detect this directory. Please verify your configuration reflects your repository structure.

[Vivek Jilla (vivekjilla)]

We're working on improving the swa_cli support further and adding the docs for it. Meanwhile, can you please share your build configuration used. Ideally, you can just set app_location as the root folder of your app where your package.json exists and keep the output_location as empty. We will detect the standalone folder and deploy from it.

[Gaurav Mantri (gmantri)]

Vivek Jilla (@vivekjilla) - Thanks for replying back. As I mentioned, I am not using automated deployment. For my particular scenario, I have to use SWA CLI. Thus I am not using any build configuration.

If it helps, here's my next.config.json file:

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  distDir: 'build',
  output: 'standalone',
  trailingSlash: true,
  images: { unoptimized: true },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

Please let me know if more information is needed from my side. Thanks for all your help regarding this. I really appreciate it.

[Vivek Jilla (vivekjilla)]

Ah okay. With swa cli, we don't yet support the distDir option of next.config.js. we're working on this.

Meanwhile, is it possible to remove that option, so that the default .next folder gets generated when you build the app.

Thanks!

[Vivek Jilla (vivekjilla)]

Just saw your query on separate discussion and replied with more details there #1171 . Hope it helps. Thanks.

[Koen van Gilst (vnglst)]

We're currently using SWA in hybrid mode for our Next.js website and we're very excited that this feature is coming to Azure.

However, we're running into some issues where sometimes the the .json files that contain the page props are empty. This results in blank pages when using client side navigation. In the AppInsights logs I see a large number of traces with the error Error: Cannot find module './.next/required-server-files.json'. This seems important, but I've not been able to isolate the issue. A next request to the same route works again.

We've been able to temporarily sidestep this by disabling client side navigation, but of course we're interested in a real fix. Here's some more background information on the website:

• we're using Next.JS in standalone mode
• our pages are content driven and are using ISR
• the pages where the issue occurs are heavy on the data fetching side (lots of queries)
• we're using next-i18next for localisation

I've tried deploying the website to Vercel, Netlify and starting the build locally and that all works fine.

Looking forward to any kind of help on this, many thanks in advance!

[Koen van Gilst (vnglst)]

For deployment we're using Azure pipelines:

      - task: AzureStaticWebApp@0
        displayName: "Deploy Static Web App"
        inputs:
          azure_static_web_apps_api_token: $(AppSettings--Website-ApiKey)
          app_build_command: "yarn build"
          api_location: ""
          deployment_environment: ${{ parameters.env }}

[Koen van Gilst (vnglst)]

Vivek Jilla (@vivekjilla) When the navigation issues occur I see the following exceptions in our logs: Path doesn't exist!

[Vivek Jilla (vivekjilla)]

Thanks for the details Koen van Gilst (@vnglst).
This empty response for the json requests is due to a bug in our code around HEAD vs GET requests for same endpoint (probably due to using middleware) and a fix for it is in progress and the issue should get resolved in few weeks. Apologies for the inconvenience!

The errors you see in app insights might be unrelated to this though.

[Koen van Gilst (vnglst)]

Thanks a lot for your help and answer Vivek Jilla (@vivekjilla). Looking forward to a fix for this,

[JarFrank]

Any updates? I'm still have the same issue
Path doesn't exist!

System.InvalidOperationException:
   at Mono.Unix.UnixFileSystemInfo.AssertValid (Mono.Posix.NETStandard, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51)
   at Microsoft.Azure.WebJobs.Script.Workers.Http.HttpWorkerProcess.AssignUserExecutePermissionsIfNotExists (Microsoft.Azure.WebJobs.Script, Version=4.21.0.0, Culture=neutral, PublicKeyToken=null: /src/azure-functions-host/src/WebJobs.Script/Workers/Http/HttpWorkerProcess.cs:75)

[Pierre Segalen (psegalen)]

Hi all, sorry if my question has been already asked but I can't find anything about this particular subject.
I have a NextJS app hosted in a Static Web App, its output is configured as "standalone" and most of my pages have getStaticProps and getStaticPaths.
I have configured ISR with a "revalidate" prop set to 600 for the getStaticProps and a "fallback" prop set to "blocking" for the getStaticPaths.
My goal is to pre-render every page at build time and have Next re-render each page if it's a new one or if its cache is more than 10 minutes old.
Everything works as intended excepted that when a page cache expires, the browser triggers a re-render which is blocking, some pages call an API which can call another API, the whole process can take up to 5 seconds, that means every 10 minutes there is a browser taking 5 seconds to get the page.
Problem: the NextJS ISR doc states that a request triggering a regeneration should not be blocked, it should get the cache version and trigger the regeneration in the background.
Did I miss something? Is there a piece of configuration to explicitly use in the Github Action YAML file?

[Pierre Segalen (psegalen)]

More information about this: when I run the standalone server locally, ISR is behaving like it should, an example: if I kill my local API, revalidation fails but I'm still getting the cached version of the page in my browser whereas in my Static Web App I get Next's 500 error when doing the same test which means when it's hosted in SWA it simply ignores how ISR should behave...
Is there a parameter I'm missing?

[Surya Challa (csprakash)]

We are eager to try nextjs deployed on swa. We could not get our application working. Appreciate any help on this

Error message in browser:

Backend call failure

Error messages in AppInsights:
1)
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
2)
Path doesn't exist!

Screenshots below.

2)

[RMS (rollsrobby)]

We have the same error when using the app router. I don't think swa is ready for it yet.
If you're still using the pages router you can ignore this comment.

[Surya Challa (csprakash)]

We are using pages router. It is under src folder, not sure if that creates any problems

[Airisu (hohoaisan)]

I'm using only pages directory on Next 13 too, no luck for the backend calls working.

[Airisu (hohoaisan)]

next@13.4.7 using pages route only
Any API call or server side calls to database or external API fails, with given 500 error code and Path doesn't exist! error message

[JarFrank]

anyone have a solution?

[Colin S. (colinscz)]

Hi Reshmi Sriram (@Reshmi-Sriram)

I am trying to deploy a Nextjs hybrid app with the following characteristics:

• App Dir
• TailwindCSS
• Nextjs 13.4.13
• Next-Intl
• output: standalone

I found this issue on the Next.js repository regarding standalone mode and the fact that neither the static nor the public folder are correctly copied to the standalone folder. vercel/next.js#50931
As of now it seems we cannot customize the build ourselves and skip or customize the static web app blueprint for Nextjs hybrid.

I was wondering if there is any action underneath that you are taking in order to add those two folders?
Otherwise the first thing that happens when trying to access the deployed app is a bunch of 404 errors that are thrown due to the required resources (css, static files etc.) not being there. I suspect this is also the reason why then the default error boundary kicks in and shows a 500 internal server error.

I added a corresponding Github issue where I explain the other steps I have taken: #1244

Hope I provided enough details otherwise don't hesitate to follow up

Cheers
Colin

[Maged Helmy (magedhelmy1)]

This whole thing is still broken :/

[Thomas Gauvin (thomasgauvin)]

Hi Colin S. (@colinscz) Maged Helmy (@magedhelmy1), we've rolled out improvements to our Next.js support which bring a handful of improvements, notably support for the App Directory, we look forward to hearing your feedback in the thread of the announcement: #1428

[Onuralp Taner (onuralp)]

I was able to get dynamic routing working on Static Web Apps by using the fallback rewrites technique.

Add a rewrite rule to send all routes to /index.html:

// next.config.js
trailingSlash: true,
reactStrictMode: true,
async rewrites() {
  return {
    fallback: [
      {
        source: '/:path*',
        destination: '/index.html' 
      }
    ]
  }
}

Next.js will take care of routing to the correct page on the client-side.

This allows routes like /blog/post-1 to be handled correctly.

The fallback rewrite is important because Static Web Apps requires returning index.html for unknown routes. Next.js can then handle routing on the client-side.

[Mark Ferdinan Aguilar (markaguilar)]

is it successful build ?

[Arnaud Touillet (Jacouille)]

I have an issue with SWA where the build logs says that the build was successfull but i keep getting 502 errors.

I have a NextJS monorepo setup with NX and here is the output generated with the standalone feature. The generated output is different from the standard NextJS output.

[sebastian-worcay]

Hello :)
Are there any updates on broken middleware starting from Next.js 13.4.13?
Please see also: #1266

Would be happy to get some feedback from the team if the issue is known and maybe if there is a plan to fix it? :)
Reshmi Sriram (@Reshmi-Sriram) Thomas Gauvin (@thomasgauvin)

[Thomas Gauvin (thomasgauvin)]

Update, at this time, hybrid Next.js support is still in preview and versions of Next 13 and above aren't fully supported with hybrid rendering. These can still be deployed statically. We're working on infrastructural changes to enable us to GA Next.js and support Next 13 in the coming months.

[Collin Barrett (collinbarrett)]

Is the list here the complete list of unsupported features? Or is there another list somewhere of what is known to be unsupported?

I am trying out Next.js v14 on SWA. It seems to work ok so far, but I am getting 404s against next/image calls where it works locally. SWA serves the image directly, but 404s via next/image. I'm curious if that's a known issue or something I'm doing wrong.

• 404 /_next/image?url=%2Flogo.png&w=640&q=75
• 200 /logo.png

[Thomas Gauvin (thomasgauvin)]

We've announced our improved support for Next.js in our newest GitHub discussion, check it out for details: #1428

[William (WilliamWelsh)]

In case anyone has my same issue: GitHub Action was successful, 502 error on prod, after a LOT of debugging, I just had to remove type: "module" from my package.json

[nnnax]

Hello all!

Static Web Apps recently enhanced the support for Next.js Hybrid rendering. It now has these additional feature supports:

• Support for standalone: Next.js supports Output File Tracing, which helps in compressing the app with just the required minimal dependencies and thus reducing the app size and enhancing the performance. Static Web Apps now supports this feature. This will create a folder at .next/standalone which can then be deployed on its own without installing node_modules. In order to enable this support, you need to add output:"standalone" in your next.config.js.
• Split deployment of static and dynamic content: Static Web Apps will now render the static content in the SWA infrastructure, separate from the dynamic content rendering happening in the managed backend. All the content stored in public and .next/static folders during build time will be now handled and cached separately.
• Bug fix - ISR Stale cache: the revalidation logic for ISR now has a bug fix to avoid serving build-time stale content for the pages.

NOTE: All these changes will reflect in your Next.js SSR apps only once you redeploy the app.

Kindly let us know how the enhanced experience is and drop more suggestions on things we should work towards for GA in the discussion thread here or the thread below!

Previous announcement thread: #921

Happy Coding!❤️

Hello Reshmi Sriram (@Reshmi-Sriram), do you have any news about features not included in preview.
I'm very interested about "On-demand revalidation" and it's not supported by SWA at the moment.
Many thanks

[Thomas Gauvin (thomasgauvin)]

We've rolled out improvements to our Next.js support which bring a handful of improvements, from support for Next.js 14 (& 13) along with app directory/React Server Components. I'll be closing this thread, please share your feedback and let's continue the discussion in the newest announcement: #1428

[SGrajdean (grajdeanserghei)]

Hi :)

Split deployment of static and dynamic content: Static Web Apps will now render the static content in the SWA infrastructure, separate from the dynamic content rendering happening in the managed backend. All the content stored in public and .next/static folders during build time will be now handled and cached separately.

If Azure Static Web Apps are capable of separate deployment of static and dynamic content, is it still required to update build command as described in documentation Deploy hybrid Next.js "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/" ?

I guess it is not anymore needed and we can benefit from the smaller standalone folder.

[Colin S. (colinscz)]

Hi SGrajdean (@grajdeanserghei)
I tried it out myself. No manual tasks like copying it over should be necessary. At least in my case it works now out of the box💪🥳. I assume this is the intention of supporting the standalone mode over Azure Static Webapps.

Thomas Gauvin (@thomasgauvin) can you confirm?

[SGrajdean (grajdeanserghei)]

Hi Colin S. (@colinscz)
Thanks for the confirmation, I also did not notice any difference between next build and "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/" in my apps. I guess it is a documentation issue, but wanted an official confirmation from the team to make sure there are no corner cases when "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/" is really needed. Let's see what they say :)

[Pierre Segalen (psegalen)]

Hi all,
I have a next app (SSG with getStaticPaths and getStaticProps with a 60s revalidation delay) in a premium SWA since june 2023 and it was perfect but since march 22nd it tends to go sideways:

• sometimes the whole app just stops functionning: asking for a page results in more than a minute of loading in the browser followed by a message stating "Backend call failure", it happened ~ twice a week since march 22nd, it never happened before, only way to get it functional again once it's there is a re-run of the latest Github Action;
• one of the pages display an article corresponding to a slug in the url, if I unpublish my article the page goes 404 which is intended but if I publish my article again, the app will never try to load the article and always go 404, it's like once the url of a page is 404 in the cache, it will never be available again, the only way to get the article online is by forcing a new deployment of the app with a re-run of the latest Github Action.

March 22nd is the date of the first deployment of ours after the improvements of march 7th so I guess it's the day my app switched to the new implementation, therefore I think that my configuration is not 100% compatible with the new implementation.
Do any of you guys have any pointer about what could be wrong?

[selimeneserdogan]

backend call failure error still continues. unfortunately it's at least 3 times a day. any solutions?

[Agente 001 (marcelo-smartup)]

It happened again