Azure Static Web Apps now supports server-side rendering for Next.js applications🥳

[Reshmi-Sriram]

UPDATE: Next.js SSR support in Static Web Apps is now officially in Public Preview! 🥳🥳
Please do give it a shot and let us know what you like and what more would you like to see!
To learn more about the feature, check out the following tech blog: https://aka.ms/swa-nextjs-ssr-blog

Azure Static Web Apps now supports Server-Side Rendering (SSR) for Next.js applications. You will now have an option to opt for either pre-rendering, server-side rendering, or incremental static regeneration during runtime for your Next.js apps. Enabling SSR would enhance the overall performance of the app.

How do I create an SSR-supported Next.js app?

Once the changes roll out, every new Static Web App created by you using the Next.js build preset will by default create an SSR-supported Next.js application.

How do I continue using my Static Next.js app?

In case you prefer to continue with your statically-exported Next.js app, follow the steps below:

1. Set a new flag in your environment variable IS_STATIC_EXPORT to true in your YAML file as follows:

For GitHub workflow -

   with: 
       azure_static_web_apps_api_token: ${{secrets.AZURE_STATIC_WEB_APPS_TOKEN}} 
       repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 
       action: "upload" 
       app_location: "/" # App source code path 
       api_location: "" # Api source code path - optional 
       output_location: "out" # Built app content directory - optional 
   env: # Add environment variables here 
       is_static_export: true 

For Azure Pipelines-

- task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: ${{secrets.AZURE_STATIC_WEB_APPS_TOKEN}} 
   ###### 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: "out" # Built app content directory - optional
      is_static_export: true
   ###### End of Repository/Build Configurations ######

2. Re-run the build as per the required app and build configurations.

To learn more about SWA and Next.js, visit this link

[Slakkan]

Hi Reshmi, this sounds awesome. Do you have an estimate on when this feature will be available?

[Slakkan]

@Reshmi-Sriram Any updates regarding this?

disclaimer: I am not part of the Azure team. This is my personal opinion.

Looking at how many tickets they have open related to this topic (#749 #804 #810 ) I don't think they will make it for this month either. the best thing we can do now is being patient and not put too much pressure on our fellow devs from Azure. When it comes out we will be notified for sure.

[JeroenvdBurg]

agreed that we need to be patient and let them do their work, but if the team communicates that we should hear from them within the month, I think it is best to give an update. People are also relying on this for making the decision to host next.js on SWA or Vercel.

[simongavelin]

I agree with you both. Our team actually decided to go with SWA instead of Vercel because of this coming feature. Our client already has their infrastructure in Azure, so we want to continue that way. Hopefully we will get an update soon 👍

[JeroenvdBurg]

It looks like the feature is live
https://techcommunity.microsoft.com/t5/apps-on-azure-blog/extending-next-js-support-in-azure-static-web-apps/ba-p/3627975?WT.mc_id=twitter-0000-azureadvocates

[thomasgauvin]

Thanks everyone for your patience, as @JeroenvdBurg mentioned, support for NextJS SSR is now available in public preview (this thread has been updated to reflect that)! We're actively seeking feedback to improve it, check out Reshmi's thread on that here: #966

Link to announcement: https://azure.microsoft.com/en-ca/updates/public-preview-support-for-hybrid-rendering-with-nextjs-apps/
Link to documentation: https://aka.ms/swanextjsssr

[Krucial92]

Sounds like a pretty awesome feature to add into Azure SWA, I feel like this is exactly what Azure needs to push a huge pool of developers into Azure and start getting them to use its infrastructure. Assuming this is comparable to what Vercel offers, I can see this taking off in the front-end space!

One question that comes to mind is given we are rendering this content on the server, how will this impact pricing given we're not serving static files? Assuming it uses Azure Functions under the hood, would we be paying for function invocations and storage costs related to those invocations, or does it work differently?

[Reshmi-Sriram]

As you can see in our official documentation as well, the Next.js SSR support in Static Web Apps comes with no impact on pricing :) We use Azure Functions for hosting them.

[ahajou]

Will you also support similar projects like Nuxt.js or Astro.build that have SSR ?

[Reshmi-Sriram]

@ahajou as of today we already support Universal Rendering in Nuxt.js in Static Web Apps. You can learn more on how to do it here :)
Astro we do not have in our pipeline yet, but would be interested to know if a lot of customers are considering the same!

[MPPlexor]

Any update on this?

[mnecker]

Would also be really interested in Astro support, we are using it more and more in our projects 🙂

[berik]

Hi @Reshmi-Sriram,
What version of nextjs will Azure support?

[samithaf]

@Reshmi-Sriram I saw this post just now, I wonder it's all ready to go? https://techcommunity.microsoft.com/t5/apps-on-azure-blog/extending-next-js-support-in-azure-static-web-apps/ba-p/3627975

[Reshmi-Sriram]

@samithaf - you heard it right! :) Let us know how you like it!

[Krucial92]

Out of curiosity I just did a simple test to see if this works and it does! At the top of the page there is "some data output" which is fetched via getServerSideProps: https://gray-tree-03318e50f.2.azurestaticapps.net

What an awesome low-cost solution for running SSR NextJS apps! Latency seems decent.. would be interested to get further detail on what's used under the hood and how this impacts pricing if any? cc @Reshmi-Sriram

[Krucial92]

Also wondering what's the deal with cold starts, does the app run off pre-warmed functions? And are zero downtime deployments supported out the box? Not asking for too much as this is already awesome as is :) however would appreciate some additional information here.

[samithaf]

Yep I did a test and it seems to be working. I am doing the test in a non enterprise level subscription and looks like response time for getServerSideProps goes from 200 ms to 7 seconds. ( I am just returning a simple JSON string ).

[skvark]

I'm also interested in the cold starts. I am trying to evaluate if I can start using SSR for some parts of my company website and how it would affect the site's performance SEO-wise. Additionally, users won't stay waiting forever for the data to appear.

[Reshmi-Sriram]

A little late to the party, but Next.js SSR support is now officially in Public Preview! 🥳🥳
Please do give it a shot and let us know what you like and what more would you like to see!
To learn more about the feature, check out the following tech blog: https://aka.ms/swa-nextjs-ssr-blog

[samithaf]

@Reshmi-Sriram Thank you for the update and yes I can confirm that API routes are working.
However sometimes even to return a static mock JSON from api routes take too long and sometimes it's fast. Is this related to cold start of Azure functions? Please note that I have observed this pattern even for subsequent calls and not just first api call.

[vivekjilla]

@samithaf thanks for trying out nextjs ssr. Would you perhaps be interested in sharing your patterns/observations with us so that we could explore it further? Could you also share your app details like name, url so that we can investigate this further?

[samithaf]

@vivekjilla thank you for getting back to me. I tried out the feature soon after it was out and noticed this problem. However, looks like I can't reproduce the issue anymore.

No doubt SWA is a fantastic offering! However following bottlenecks prevent us to use SWA in a very large web application.

• Ability to select the region for the deployment. (Due to legal requirements we need this feature)
• Instead of combining all the api's to a single Azure function keep them seperate

[Reshmi-Sriram]

@samithaf, unfortunately we do not support single region deployment in SWA as of today. For the API part, you do have the option to try out Bring your own backend (public preview), with which you could have an API Management as a backend.

[samithaf]

@Reshmi-Sriram sure. I will give a try.

[AndrewVos]

This is great if you want to deploy a sample app. I assume this was the acceptance criteria. For any normal app though:

The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.

Also the deploy speed is laughable compared providers like netlify.

10x longer deploy times, less features, and it doesn't even work.

[AndrewVos]

If you're locked into Microsoft then a container app is a good option

[Reshmi-Sriram]

@AndrewVos we now support standalone feature of Next.js.
Do try it out and let us know! (Discussion thread)

[AndrewVos]

Sorry but I’m not your QA

[valstu]

Don't know if this is related to SWA or Onyx or what but the builds timeout and we're getting errors. I wish the staticappsclient inside Azure/static-web-apps-deploy action would be open source so we could even debug this thing. More discussion here if you bump into same problem #949

[valstu]

@Reshmi-Sriram is there really a hard limit of 104857600 bytes? I mean like @AndrewVos mentioned that means you can pretty much just deploy the sample app ?

[georgibakken]

Thanks @vivekjilla. This I have tried, unfortunately the out folder does not contain an Index.html or similar at the root.

Im using something called https://tina.io with this starter

[vivekjilla]

@georgibakken I just gave it a try and looks like tina-starter doesn't work well with next export. And for regular site, the total app size is crossing the 100MB limit, mostly due to node_modules and the cache.

[georgibakken]

Thanks for trying it out @vivekjilla! Need to investigate further :)

[MikeTangoEcho]

Hi @vivekjilla @valstu , i recently went from SSG to SSR, because of i18n and stumbled on the 100mb limit. The solution of removing the .next/cache is not enough, because I use libs that weight +100mb in the node_modules which get copied in the api zip (mostly UIs @headlessui/react @heroicons/react).

When building with output: standalone in nextjs.config.js (https://nextjs.org/docs/advanced-features/output-file-tracing), i got a 900ko .next/static folder and 20mb .next/standalone folder. Is there a plan for nextjs integration to support this mode ? or how to handle it correctly ?

[Reshmi-Sriram]

Hi @MikeTangoEcho @valstu @samithaf @georgibakken @AndrewVos,
We now support standalone feature by Next.js to enhance the app size constraint. For more details check out the thread here. Do let us know if this helps! Thanks!

[FreakinWard]

Is there any way to set the platform node version when building the api? I'm needing the app and the api to build with node version 16, however only the app builds with node 16. Has anyone had similar issues?

I've attempted the following to resolve this without luck: see action runs

• set engines to node: >=16 wtihin package.json - source
• set apiRuntime: "node:16" within staticwebapp.config.json - source
• set FUNCTION_LANGUAGE_VERSION: 16 on the github action Azure/static-web-apps-deploy@latest - source

[vivekjilla]

Hi @FreakinWard Thanks for trying it out and providing feedback!

Can you please try setting engines with node: =16 within package.json.
For reference, source and action run

[alexrabin]

@vivekjilla Changing the engine settings worked for me thank you!

[FreakinWard]

Hi @FreakinWard Thanks for trying it out and providing feedback!

Can you please try setting engines with node: =16 within package.json. For reference, source and action run

Setting the engines to node: =16 did the trick! This is now working great, thanks @vivekjilla 🥳 💯

[DevDotJoel]

Hey guys, thanks for giving us this feature. Im a huge azure fan and its nice seeing suport for SSR next js apps.
I added my ssr next.js app to azure static web app but im having a problem with next auth.
I having 500 error everytime i try to get session. I have 2 enviroment files (development and production).
I noticed vercel as a specific place to put enviroment variables.
Do i need to do the same but on my yml file? For example:

• task: AzureStaticWebApp@0
  inputs:
  app_location: '/'
  api_location: ""
  output_location: '.next'
  azure_static_web_apps_api_token: $(deployment_token)
  env:
  NEXTAUTH_URL: https://teste.com
  NEXTAUTH_SECRET: test123

  im kinda stuck in this.

[samithaf]

@Reshmi-Sriram thank you! I also reached out to Microsoft Australia and we have a meeting with them early next week.

[DevDotJoel]

Hi @DevDotJoel In the code screenshot, I see an environment variable called SECRET but it doesn't seem to be provided in the application settings. Could that be the reason?

You can enable monitoring to see more logs on where this exception is coming from in your app, using app insights. Please follow this link on how to do it - https://learn.microsoft.com/en-us/azure/static-web-apps/monitor

Please try it out and see and reach out to me in case of further queries.

Even when i changed the result was the same. Does it support next auth?

[thomasgauvin]

@samithaf regarding your point about deploying to specific regions, are your restrictions preventing you from hosting your static content globally, or is this related to the location of your API & database regions?

To answer your question regarding AKS vs App Service, App Service is definitely a better option when coming from SWA. It focuses on productivity (with SSL, EasyAuth, etc.), allowing you to focus on building your app instead of tinkering with infrastructure and networking of a cluster.

[vivekjilla]

@DevDotJoel Yes, it supports next auth. Can you add some logs to your app and please let us know what errors you're seeing in app insights using https://learn.microsoft.com/en-us/azure/static-web-apps/monitor, so that we can debug this issue further if needed.

[mrussellg19]

Hi i am facing the same issue is there any solution to it ?

[richardwem]

This is an awesome feature. We want to host our NX-wrapped React/NextJS front-end on a Static Web App.

But we're getting stuck at deployment of it.
For me it's unclear which folder I need to deploy to my SWA and how to do that; the tutorials do not explain that. It works great if you just use GitHub, but we use DevOps for everything and we want to use pipelines.

If I understand it correctly: let's say there are 2 ways to deploy your NextJS app to a SWA: using export or by building a nodejs compatible 'server executable' (which is now supported in preview mode, where this thread is about).
When using export, you cannot use SSR (which we need).
When building, you can use SSR.

I assume that means we need to build it.
After building our app, we get 2 folders in the dist\apps\appname folder:

• .next
• exported

We could use a Devops pipeline to deploy the exported folder to an SWA and that seems to work.
Problem is: sometimes there is no exported folder! My assumption is that the exported folder is actually what the appname:export command also generates. And that what is in the exported folder, actually is NOT SSR compatible.
Is that right?

That probably means we need to deploy the .next folder to SWA.
But when I do that, the pipeline gives the following error:
Failed to find a default file in the app artifacts folder (dropApps/appname/.next). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.
That's true, the index.html is in .next/server/pages/ but that is for sure not the folder we want to upload.

So that makes me think the .next folder is also not the right one to deploy. But there is no other option.
If we shoud use the exported folder, why is it that it does not always generate that folder?

TLDR: how do I deploy my nextjs app in an Azure Pipeline, which folder is needed? I think the way to do that, should also be added to the tutorial.

[orkisz]

@RaphaelSilv Do you have a NX monorepo? Because .next folder in root of the project gives a clue this is not the case here (or I've misunderstood your question). My solution was for NX only

[RaphaelSilv]

Hey @orkisz, yes I think I do have a monorepo i.e. a repo only for the NX project. This is the folder structure of my project:

- azure-pipelines.yml
- build/
- next.config.js
- next-env.d.ts
- node_modules/
- package.json
- package-lock.json
- public/
- README.md
- src/
- tsconfig.json

[camila-akqa]

Hi @vivekjilla
I am having the same error, the structure of my project is very straight forward , the package.json file is on the root folder, the .next folder gets generated under the root folder as well , the folders inside the root look like this:

After reading this post, I added a buildAz task, so to create an empty node_modules under the generated .next folder after the build, but still getting the same error:

This is how the azure pipelines look

Any ideas will be really appreciated!

Thanks

[vivekjilla]

I added the summary of the discussion in this thread in another comment in case it helps others: #921 (reply in thread)

@camila-akqa , Can you please share your package.json contents, and the full logs of the action run, to get some more information on what could be going wrong here. Also please feel free to start a separate thread or a github issue, as it doesn't seem to be related to monorepo. Thanks!

[camila-akqa]

Hi @vivekjilla

Thanks a lot for your reply, I am attaching a zip file with the logs and and package.json.
logs_46.zip

I logged the issue #993.

Thanks again,
Camila

[superhp]

Is there any way to limit access to entire app only for AAD users in non-production environments? Previously, we could setup such rule in staticwebapp.config.json but it seems this configuration is not supported for hybrid Next.js case.

1. Are there any plans to support staticwebapps.config.json any soon again?
2. Are there any alternatives to limit access for AAD users?
3. If not, how are you limiting access to your non-production environments? Basic authentication in Global Setting seems to be too unsecure. VPN and Private Endpoint seems to be too complicated.

[superhp]

It seems there are even more issues there. We decided to temporarily use password protection since staticwebapp.config.json is not supported for now. The password protection worked until we configured custom Front Door. When you go to SWA through Front Door URL and have password protection, you are automatically redirected to original SWA URL to enter the password. After you enter it, you stay there. With staticwebapp.config.json it was possible to prevent this situation and stay on Front Door URL, and even restrict access to original SWA URL.
@Reshmi-Sriram It seems that staticwebapp.config.json support is really needed especially for dev/test environments as soon as possible. Are there any chances it could be fixed sooner than GA?

[Reshmi-Sriram]

@superhp thanks for bringing this to our notice. While the dev team works on providing support for staticwebapp.config.json as we speak, we do not have a timeline of how soon we can deliver it. However, thanks for highlighting the pain point and helping us prioritize this ask! Will get back if we have any temporary alternative to the same!
Thanks for the feedback and for your patience!

[superhp]

@Reshmi-Sriram, do you have any updates regarding staticwebapp.config.json support, especially the AD authentication part?

[Reshmi-Sriram]

Hey @superhp,
There's some work in progress, you should be hearing from us pretty soon!

[superhp]

Hi @Reshmi-Sriram ! Sorry for pinging you once again, but maybe you have some more specific updates about staticwebapp.config.json and authentification? It seems like we don't have too much time for waiting and need to take a decision to wait a bit longer or find a different solution.

[richardwem]

@vivekjilla I got a new problem with deployment to a Static Web App.

The Oryx builder did work great 2 days ago and I successfully deployed my app.

But when I do the same thing today, there seems to be a problem installing Cypress.

Cypress cannot write to the cache directory due to file permissions
So: ENOENT: Permission denied, mkdir '/root/.cache/Cypress'

How can I get Oryx to get permission to this?
Or, because Cypress is only needed for testing and not for the deployment itself, is it possible to tell Oryx in this step, it can skip Cypress installation?

[richardwem]

So the Cypress error (it's part of nextjs, even if you don't need it for the server it does download it for npm install) seems fixable:

appsvc.yaml:
pre-build: |
export CYPRESS_INSTALL_BINARY=0

That prevents cypress to get installed and throw errors. https://docs.cypress.io/guides/references/advanced-installation#Environment-variables
But that is not a clean solution to this problem.

Anyhow, after that, we still run into problems.
The exact same configuration from monday does not work anymore.

Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.

@vivekjilla
My 'hello world' like app (the artifact is 1.2MB) is now clearly >100mb before deploying. But I have no idea how I can debug that.
I think it wants to zip the installed node_modules folders too? The post-build command does not seem to have impact op what Oryx want to do with this.
Sidenote: why is the limit 100mb? It should at least be 250mb: https://learn.microsoft.com/en-us/azure/static-web-apps/quotas and were on a basic plan / 500mb.

I compared the pipeline output from monday (when it worked) to today.
Something that changed is that Oryx now wants to use NODE_DEFAULT_VERSION=16.
Can that be the problem? Can I override that?

[vivekjilla]

@richardwem

1. You can override the node version and set it to 14, by setting the engines property to node: =14 in package.json. More details at Azure Static Web Apps now supports server-side rendering for Next.js applications🥳 #921 (reply in thread)
2. To reduce the app size, see if removing the cache folder helps by changing the build script on package.json to something like
   "build": "next build && rm -rf ./.next/cache". More details: Max app size seems different than reported by Oryx #769 (comment)
3. For the 100MB limit, this is for NextJS Hybrid app, more details at https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs#unsupported-features-in-preview

[richardwem]

Thank you again @vivekjilla

We did not manage to get the content small enough with Node 16, even with removing the cache folder. So we forced Node 14 to get it working.

To fix all the problems in a simple way without changes in our repo, we added a postbuild command to package.json:

"postbuild": "rm -rf ./dist/apps/app-name/.next/cache && mkdir dist/apps/app-name/node_modules && rm -rf ./dist/apps/app-name-2/.next/cache && mkdir dist/apps/app-name-2/node_modules && ls -la dist/apps/",

[Reshmi-Sriram]

@richardwem , SWA now supports standalone feature in Next.js. For more details check out the thread here. Do let us know if this helps in your solution! Thanks!

[FreakinWard]

I'm having some troubles deploying our nextjs site from an Azure DevOps pipeline. This same site deployed successfully via github actions though.

I'm wondering, does the AzureStaticWebApp@0 task support the nextjs preview? Or is there something else I might have misconfigured?

The pipeline task:

- task: AzureStaticWebApp@0
  displayName: Azure Deploy
  inputs:
    azure_static_web_apps_api_token: $(apiKey)
    app_location: '/' # App source code path
    api_location: '' # Api source code path - optional
    output_location: ''  # does not work
#    output_location: '.next'  # also does not work

The error received:

App Directory Location: '/' was found.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 20221103.1

Build Operation ID: |pifaW1zNhZU=.5c46b46b_

Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.


---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx
No Api directory specified. Azure Functions will not be created.
Failed to find a default file in the app artifacts folder (/). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your deployment configuration file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.


For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
##[error]Error: The process '/usr/bin/bash' failed with exit code 1
Finishing: Azure Deploy

[FreakinWard]

I'm having some troubles deploying our nextjs site from an Azure DevOps pipeline. This same site deployed successfully via github actions though.

I'm wondering, does the AzureStaticWebApp@0 task support the nextjs preview? Or is there something else I might have misconfigured?

The pipeline task:

- task: AzureStaticWebApp@0
  displayName: Azure Deploy
  inputs:
    azure_static_web_apps_api_token: $(apiKey)
    app_location: '/' # App source code path
    api_location: '' # Api source code path - optional
    output_location: ''  # does not work
#    output_location: '.next'  # also does not work

🥳 So, this was an issue related to azure pipelines. Specifying the workingDirectory to point to the downloaded artifact resolved the issue. I've included the working code in case anyone else runs into the same issue.

- task: AzureStaticWebApp@0
  displayName: Azure Deploy
  inputs:
    workingDirectory: $(Pipeline.Workspace)/$(buildPackageName)
    azure_static_web_apps_api_token: $(apiKey)
    app_location: '/' # App source code path
    api_location: '' # Api source code path - optional
    output_location: '.next'

[georgibakken]

[vivekjilla]

Hi @georgibakken, can you please share few more details: github action logs, the static site endpoint where we can try this.

[georgibakken]

Hi @vivekjilla. Sorry for the late reply. I think I found the issue, seems to be a classic typo 🙈

[RaphaelSilv]

@vivekjilla would you kindly provide a summary of the discussion with @richardwem in a few bullet points and possibly a sample task?

I've been following the discussion above but it feels like I'm running in circles.

---

As of now, that's my task and build command (as per the discussions on this thread):

"build": "next build && rm -rf ./.next/cache/ && mkdir ./.next/node_modules",

  - deployment: 'DeployStaticwebapp'
    dependsOn: ['Build']
    environment: $(DevopsEnvironment)
    strategy:
      runOnce:
        deploy:
          steps:
          - checkout: 'self'
          - task: AzureStaticWebApp@0
            inputs:
              app_location: '/'
              output_location: '.next'
              azure_static_web_apps_api_token: $(deployment_token)

For some reason, Oryx seems to understand I have API artifacts, despite the fact I've not even mentioned it on the task, and thus throws this exception:

---End of Oryx build logs---
Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 16
Finished building function app with Oryx
Zipping Api Artifacts
Done Zipping Api Artifacts
The content server has rejected the request with: BadRequest
Reason: The size of the function content was too large. The limit for this Static Web App is 104857600 bytes.

Any clues on what might be happening?

[RaphaelSilv]

@vivekjilla we've noticed that our node_modules folder is over 300MB 😓 and we don't want to use the export alternative as it is important to our application to take advantage of ISR feat of Next.

We even considered using known methods to reduce the size of node_modules during npm install but that is not under our control.

Is there anything we can do on our end to get our app deployed? Any help is appreciated.

[RaphaelSilv]

@vivekjilla would you have any updates on this one?

[vivekjilla]

Hey @RaphaelSilv , unfortunately I can't think of a workaround if your node_modules are actually large.
We're working to improve this experience and provide more flexibility, but right now I don't see a way.
Apologies for the inconvenience. 😞

Will let you know if we see/ support a way to handle this. Thanks!

[Reshmi-Sriram]

Hey @RaphaelSilv, SWA next.js now supports standalone feature. For more details check out the thread here. Do let us know if this helps in your app size issue. Thanks!

[LuwkasLima]

I confirm the suggestion from @Reshmi-Sriram to use standalone feature to solve the above described issue works. I was having the exact same issue reported by @RaphaelSilv and the workaround proposed worked.

[superhp]

@Reshmi-Sriram, @vivekjilla could you please provide us with any kind of roadmap of Hybrid NextJs going to general availability and supporting main missing features such as mentioned in https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs#unsupported-features-in-preview? Some more transparency would help development teams a lot to plan technical decisions of their systems.

[Reshmi-Sriram]

Hi @superhp,
The team is constantly working on gathering inputs and improving the experience before we announce GA of this support. The focus is to ensure that the missing feature support is met with alongside other feature improvements. The timeline we are targeting is H12023.
Hope this helps!

[superhp]

Thank you. We are looking forward to these improvements :)

[HummingMind]

Hello, a few important questions:

1. Does this preview work with Next.js 13 (both: legacy pages and the new app rendering models)?
2. What's the pricing impact? Are there limits on numbers of executions or execution time?
3. SSG files are deployed to all of the edge locations in the CDN. Does SSR also happen in all locations (whichever edge location the user gets routed to)?
4. Is there a cold start delay / timeouts resulting in cold starts?

Thank you!

[erwinsmit]

I'm just using your question to address the cold start issues.

I'm currently experiencing cold starts using the hybrid Nextjs static web app. Primarily if the page is relying on one or more API Nextjs paths. It seems each API path needs to have its own instance warmed up. So these pages can be pretty slow at first.

Is this something that's on the roadmap? Because it's pretty essential to tackle this for well-performing Nextjs apps.

[Reshmi-Sriram]

Hello, a few important questions:

1. Does this preview work with Next.js 13 (both: legacy pages and the new app rendering models)?
2. What's the pricing impact? Are there limits on numbers of executions or execution time?
3. SSG files are deployed to all of the edge locations in the CDN. Does SSR also happen in all locations (whichever edge location the user gets routed to)?
4. Is there a cold start delay / timeouts resulting in cold starts?

Thank you!

Hey @HummingMind,

1. The current support should work fine with Next.js 13 legacy pages, but we haven't fully explored the new feature additions yet. Please do let us know if you're aware that some support you were looking out for is missing; we can work on scoping the same for GA.
2. There's no pricing impact and no limits in the execution attempts as of today
3. No, SSR as of today is specific to the region the user chooses while deploying their Static Web App. This is a similar experience to Managed APIs. We're working on some improvements for the same
4. Yes, there is a cold start impact in today's solution, as rightly pointed out by @erwinsmit as well. The team is aware and is working towards improving the performance.

[erwinsmit]

@Reshmi-Sriram
"Yes, there is a cold start impact in today's solution, as rightly pointed out by @erwinsmit as well. The team is aware and is working towards improving the performance."

That's great, is there any idea when this will be improved? A rough estimate would be great.

[erwinsmit]

Hi,

Besides the cold starts mentioned in the thread above, there is something else that I think is a bit of a blocker for many projects. The maximum size of 100mb is not enough. The Next.js dependency alone is already 100mb (before compression). I downloaded the zip directory from a deployed Hybrid Nextjs Static Web App and I noticed that most size is taken up by the Nextjs SWC stuff.

[vivekjilla]

Hi @erwinsmit We're working on improving these limits. But meanwhile for this particular scenario, if your app doesn't need some of these node_modules you can use this workaround by introducing api_build_command to delete those files and reduce the bundle size.
like api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'

For more details: #1034 (comment)

[erwinsmit]

@vivekjilla

Thanks for your reply and the fix for the max size (y)

[Reshmi-Sriram]

Hi @erwinsmit, Next.js in SWA now supports running standalone. For more information, check out the thread here. Let us know if this helps in your solution!

[thomasgauvin]

@erwinsmit we announced improved support for Next.js in our newest GitHub discussion #1428, with increased app sizes for Next.js sites, check it out for details and we look forward to hearing your feedback in that thread!

[camila-akqa]

Hi @vivekjilla

We are trying to use On-demand revalidation which is part of Incremental Static Regeneration feature and apparently supported by Azure Static Web App as per documentation

However this feature doesn't seem to be working on our case, is there any special configuration that need to be taken into account for this to happen?

We have built an api under /api/publish which revalidates the page based on the parameters passed to the API, this is working fine when tested locally using next build and next start, and doesn't seem to generate any error when executed on the deployed website in Azure Static Web App, however, the page doesn't get revalidated. Any ideas?

Regards,
Camila

[vivekjilla]

Yes , setting the revalidate time is supported.

[camila-akqa]

Thanks Vivek.

[vivekjilla]

Btw, we're also working on a few issues related to occasional serving stale cache content. 

[Reshmi-Sriram]

@camila-akqa kindly check the latest update for Next.js here. Do let us know if the issue still persists. Thanks!

[thomasgauvin]

We announced improved support for Next.js on Azure Static Web Apps: #1428

[Reshmi-Sriram]

Hey all,

Kindly checkout the latest updates in the discussion thread here
Happy Coding! ❤️

[jeremycastanza]

@Reshmi-Sriram - Do you know if there are any plans to update the associated Github action for SWA deployments for Next.js?

The following repo is running Node v16 in the underlying Docker image and looks to have gone stale, yet this may be a very useful tool for engineers who are wanting to deploy Next.js as a SWA.

https://github.com/Azure/static-web-apps-deploy

Thanks!

[Michaelkire]

Hey. I have been trying for the last couple of days to get this to build with a turborepo/next app using pnpm, but it seems impossible.

Steps to repro:
run "npx degit vercel/turbo/examples/basic swa-test", this will create a barebone turborep/nextjs combo using pnpm

Current pipeline:

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-blue-forest-023d65303-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_BLUE_FOREST_023D65303)
      app_location: "/apps/web" # App source code path
      #api_location: "" # Api source code path - optional
      #output_location: "" # Built app content directory - optional
      cwd: "$(System.DefaultWorkingDirectory)"
    env:
          PRE_BUILD_COMMAND: npm install -g pnpm
          CUSTOM_BUILD_COMMAND: pnpm install && pnpm run build
          RUN_BUILD_COMMAND: pnpm run build 

I've even tried to do it locally using this script in my main package.json:

"deploy": "docker run -it --rm --env-file ./.env.deploy -v $(pwd):/working_dir mcr.microsoft.com/appsvc/staticappsclient:stable ./bin/staticsites/StaticSitesClient upload"

With a .env.deploy:

INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN=<redacted>
DEPLOYMENT_PROVIDER=DevOps 
GITHUB_WORKSPACE=/working_dir
IS_PULL_REQUEST=false 
ENVIRONMENT_NAME=

PRE_BUILD_COMMAND=npm install -g pnpm && pnpm install
CUSTOM_BUILD_COMMAND=pnpm run build
RUN_BUILD_COMMAND=pnpm run build 
INPUT_VERBOSE=true
INPUT_BUILD_TIMEOUT_IN_MINUTES=30
DISABLE_JAVA_BUILD=true
DISABLE_RUBY_BUILD=true
DISABLE_HUGO_BUILD=true
DISABLE_GOLANG_BUILD=true
ENABLE_NODE_MONOREPO_BUILD=true

INPUT_APP_LOCATION=/
INPUT_API_LOCATION=
APP_ARTIFACT_LOCATION=apps/web/.next
PLATFORM_NAME=nodejs
OUTPUT_LOCATION=apps/web/.next

I've both tried setting app_location to be the turborepo root and to the apps/web, but no dice.

if root, then it gives me Failed to find a default file in the app artifacts folder (apps/web). Valid default files: index.html,Index.html.
if apps/web, then it seems to build properly for "app" and then tries to build for "function app", which fails with a

 ERR_PNPM_NO_MATCHING_VERSION_INSIDE_WORKSPACE  In : No matching version found for ui@* inside the workspace

This error happened while installing a direct dependency of /5dad9b14-c581-4cf3-850a-0dc2fd83435e-swa-oryx/app

As you can see I've even been digging down in the internals to see if I could fix it somehow with setting various settings.

Problem is that I need it to recognize that its a next app, so it can figure out how to convert the .next output to functional apps. This happens in try no 2, but then it cannot install dependencies. mcr.microsoft.com/appsvc/staticappsclient is closed source so I cannot see inside and see how it functions.

Full output:

mki@mki swa-test % pnpm run deploy

> @ deploy /swa-test
> docker run -it --rm --env-file ./.env.deploy -v $(pwd):/working_dir mcr.microsoft.com/appsvc/staticappsclient:latest ./bin/staticsites/StaticSitesClient upload

Unable to find image 'mcr.microsoft.com/appsvc/staticappsclient:latest' locally
latest: Pulling from appsvc/staticappsclient
6aefca2dc61d: Already exists 
967757d56527: Already exists 
c357e2c68cb3: Already exists 
c766e27afb21: Already exists 
d913781da675: Already exists 
54fa687f58b4: Already exists 
c939a09b5983: Already exists 
e198984d5536: Already exists 
21e57609d6b3: Already exists 
c1881f2146e9: Already exists 
4bd05412a8e0: Already exists 
8146c9dfd394: Already exists 
f0ffa7b9e9dc: Already exists 
1bdd8cf46ef0: Already exists 
5e87a75e163f: Pull complete 
689a0a2aee4d: Pull complete 
a832a9beb0e9: Pull complete 
b9fe78a2a685: Pull complete 
Digest: sha256:870e5b73cf8d832615253d71b5834563b581a3fdf1a3defc26ccdfa264b37235
Status: Downloaded newer image for mcr.microsoft.com/appsvc/staticappsclient:latest
WARNING: The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
DeploymentId: 31b3b828-0be0-473c-9c77-b9f9b4192ae3

App Directory Location: '/apps/web' was found.
Looking for event info
Could not get event info. Proceeding
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 20221103.1

Build Operation ID: |/zV4mM7P1hA=.8d6905b8_
Repository Commit : 71835d928583b179148cecd9a87b39dbbbdea602

Detecting platforms...
Platform 'hugo' has been disabled, so skipping detection for it.
Platform 'ruby' has been disabled, so skipping detection for it.
Platform 'golang' has been disabled, so skipping detection for it.
Platform 'java' has been disabled, so skipping detection for it.
Detected following platforms:
  nodejs: 16.19.0
Version '16.19.0' of platform 'nodejs' is not installed. Generating script to install it...
Detected the following frameworks: Typescript,Next.js


Source directory     : /working_dir/apps/web
Destination directory: /31b3b828-0be0-473c-9c77-b9f9b4192ae3-swa-oryx/app


Downloading and extracting 'nodejs' version '16.19.0' to '/opt/nodejs/16.19.0'...
Detected image debian flavor: bullseye.
Downloaded in 2 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: nodejs...
Done in 4 sec(s).

Executing pre-build command...

added 1 package, and audited 2 packages in 5s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
npm notice 
npm notice New major version of npm available! 8.19.3 -> 9.5.1
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.5.1>
npm notice Run `npm install -g npm@9.5.1` to update!
npm notice 
Scope: all 6 workspace projects
../..                                    | +284 ++++++++++++++++++++++++++++
../../node_modules/core-js-pure postinstall$ node -e "try{require('./postinstall')}catch(e){}"
../../node_modules/turbo postinstall$ node install.js
../../node_modules/core-js-pure postinstall: Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
../../node_modules/core-js-pure postinstall: The project needs your help! Please consider supporting of core-js:
../../node_modules/core-js-pure postinstall: > https://opencollective.com/core-js 
../../node_modules/core-js-pure postinstall: > https://patreon.com/zloirock 
../../node_modules/core-js-pure postinstall: > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz 
../../node_modules/core-js-pure postinstall: Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
../../node_modules/core-js-pure postinstall: Done
../../node_modules/turbo postinstall: Done

The integrity of 3027 files was checked. This might have caused installation to take longer.
Done in 13.6s
Finished executing pre-build command.
Removing existing manifest file
Creating directory for command manifest file if it does not exist
Creating a manifest file...
Node Build Command Manifest file created.

Using Node version:
v16.19.0

Using Npm version:
8.19.3

Running 'pnpm run build'...


> web@1.0.0 build /working_dir/apps/web
> next build

info  - Linting and checking validity of types...
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/3)
info  - Generating static pages (3/3)
info  - Finalizing page optimization...

Route (pages)                              Size     First Load JS
┌ ○ / (733 ms)                             298 B          73.7 kB
└ ○ /404                                   181 B          73.6 kB
+ First Load JS shared by all              73.4 kB
  ├ chunks/framework-243a035bd446de52.js   45.4 kB
  ├ chunks/main-d309b8651496a8ed.js        27.1 kB
  ├ chunks/pages/_app-03f04c30f397e7c8.js  196 B
  └ chunks/webpack-4e7214a60fad8e88.js     712 B

○  (Static)  automatically rendered as static HTML (uses no initial props)

Preparing output...

Copying files to destination directory '/31b3b828-0be0-473c-9c77-b9f9b4192ae3-swa-oryx/app'...
Done in 0 sec(s).

Removing existing manifest file
Creating a manifest file...
Manifest file created.
Copying .ostype to manifest output directory.

Done in 75 sec(s).


---End of Oryx build logs---
Finished building app with Oryx
Repackaged Next.js app to deploy on the backend function.
Starting to build function app with Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65dde152b749fea395f4d1242ea9350942258, ReleaseTagName: 20221103.1

Build Operation ID: |sAP4De53o9c=.64740722_

Detecting platforms...
Platform 'hugo' has been disabled, so skipping detection for it.
Platform 'ruby' has been disabled, so skipping detection for it.
Platform 'golang' has been disabled, so skipping detection for it.
Platform 'java' has been disabled, so skipping detection for it.
Detected following platforms:
  nodejs: 16.19.0
Detected the following frameworks: Next.js


Source directory     : /31b3b828-0be0-473c-9c77-b9f9b4192ae3-swa-oryx/app
Destination directory: /31b3b828-0be0-473c-9c77-b9f9b4192ae3-swa-oryx/api

Executing pre-build command...

changed 1 package, and audited 2 packages in 3s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 ERR_PNPM_NO_MATCHING_VERSION_INSIDE_WORKSPACE  In : No matching version found for ui@* inside the workspace

This error happened while installing a direct dependency of /31b3b828-0be0-473c-9c77-b9f9b4192ae3-swa-oryx/app


---End of Oryx build logs---
Oryx has failed to build the solution.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
 ELIFECYCLE  Command failed with exit code 1.
 ```

[Michaelkire]

Alright. A small update.

After lots of googling and trying things I found the following.

Adding a .npmrc file in the web project with the following code:

auto-install-peers = true
node-linker=hoisted

Having this will make the build/deploy run correctly. (ref: https://stackoverflow.com/questions/64922302/how-to-exclude-package-from-being-installed-via-symlink-in-pnpm)

However Website is giving me 5xx errors when I load it. Trying to figure out what happens.

[vivekjilla]

Hi @Michaelkire Apologies for the delay here. For repro, is it possible to share a sample repo with the code and dependency structure so that it is easy to dive into investigating the issue.

Meanwhile, 5xx could be due to missing configurations or dependencies. You can enable application insights to get more logs from the server and see what's missing.

Here's an issue #1059 where the 502 was coming because a runtime dependency was part of devDependencies.

Btw, can you please share your app details like name and url to look more into this. Thanks!

[Michaelkire]

Hi @Michaelkire Apologies for the delay here. I will try to repro this on my side.

Meanwhile, 5xx could be due to missing configurations or dependencies. You can enable application insights to get more logs from the server and see what's missing.

Here's an issue #1059 where the 502 was coming because a runtime dependency was part of devDependencies.

Hey @vivekjilla

I finally was able to enable Application Insights after trying to basically remove everything from the package.json and deploy again.

The errors Im getting is the following:
Error: Cannot find module './.next/required-server-files.json'

• /home/site/wwwroot/next_function.js
• at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1021:15)
• at Function.mod._resolveFilename (/home/site/wwwroot/node_modules/next/dist/build/webpack/require-hook.js:23:32)
• ...
• at Function.Module._load (node:internal/modules/cjs/loader:904:12) {
• code: 'MODULE_NOT_FOUND',
• requireStack: [ '/home/site/wwwroot/next_function.js' ]
• }

But Im also getting a different error just before it, if this is of any help:

• Error while assigning execute permission.

[Michaelkire]

After a talk with the team, we found a solution!

For anyone who's using turborepo with PNPM the following 3 things need to be done:
next.config.js should have the following:

const path = require('path');
module.exports = {
  output: 'standalone'
};

This will make sure that your built package is runnable alone without any node_modules needed from outside the folder.

root .npmrc file:

auto-install-peers=true
node-linker=hoisted

This will make sure that your node_modules gets "hoisted" up to your built package.

Then finally the pipeline yml:

trigger:
  branches:
    include:
      - master

variables:
  azure_static_web_apps_api_token: '' #your deploy token
  base_app_location: '/apps/web' # Modify this value to match the path to your application code

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: '$(base_app_location)'
          api_location: ''
          output_location: ''
          azure_static_web_apps_api_token: $(azure_static_web_apps_api_token)
          sku: 'Free'
        env:
          PRE_BUILD_COMMAND: 'npm install -g pnpm && pnpm install'
          CUSTOM_BUILD_COMMAND: 'pnpm -w run build && cp -r ./.next/standalone$(base_app_location)/. ./.next/standalone  && rm -rf ./.next/standalone/apps'
          RUN_BUILD_COMMAND: 'pnpm -w run build && cp -r ./.next/standalone$(base_app_location)/. ./.next/standalone  && rm -rf ./.next/standalone/apps'
          DISABLE_RUBY_BUILD: true
          DISABLE_HUGO_BUILD: true
          DISABLE_JAVA_BUILD: true
          DISABLE_GOLANG_BUILD: true
        displayName: 'Deploy to Azure Static Web Apps'

The pre build and build commands will install and run pnpm install, and then build and repackage the standalone folder for deploy, since they expect the .next folder to be directly in the standalone folder instead of in a subfolder (apps/web).

[vivekjilla]

Thanks for the quick sync up and also sharing the update here, Michael! One additional thing we had to do for your project setup is to use the outputFileTracingRoot in the next.config.js, for node_modules to be added correctly inside the standalone folder.

We will improve our logic to avoid this workaround of copying subfolders to standalone folder as part of custom build command.

Here's a sample working repo for reference.

[lucasoz]

Is there some news about the support of new next js 13 with app directory? I was trying to deploy an app with app directory but I'm getting some routing errors. Issue

Thanks.

[jinyu-loopmind]

Is there some news about the support of new next js 13 with app directory? I was trying to deploy an app with app directory but I'm getting some routing errors. Issue

Thanks.

+1, I have seen the same error! It would be really awesome if the new App Router is supported.

[thomasgauvin]

Hey @lucasoz @jinyu-loopmind ! Support for Next.js 13 & 14, along with app router has been announced, refer to the newest GitHub discussion for details: #1428

[sohocine]

Can't wait for this to become GA and be renamed to Azure Function Apps! 😎 I've always thought that Static Web Apps is a limiting brand name...

[IanIsFluent]

I'd love to use this with Azure DevOps to deploy an artifact - but the tutorial only mentions connecting a repo.

Has anyone got this to work?

[Michaelkire]

I've done this in my setup. If you prebuild and point to the right folder, the devops build/deploy function for SWA will actually skip build (because it finds the ".next/standalone" folder and just do deployment.

Although I haven't been able to get it working with anything above next 13.4.4 with latest canary.
If I upgrade to next 14, Middleware stops working

[IanIsFluent]

Oh thats really interesting. What is the right folder? Would you mind sharing your yaml? And clearly middleware works (on that old NextJS version)?

Do you have to deploy from a certain branch to get it to go into the production environment?

Can you set the production branch in devops to match whichever one you're on, maybe?

[bmd-syd]

I've got a CI/CD setup that builds and pushes to Azure Artifact (from a feature branch and/or main), and deploys to Static Web App using the pre-packaged artifact. I'm also using named environments to deploy to either a preview environment or production.

If that is the type of the thing you're after happy to share more detail. But I may also me misinterpreting the requirement.

[IanIsFluent]

Yes that was what I was interested in - deploying an artifact to preview/prod. As far as I understood it - skip build was not supported for SSR/hybrid NextJS apps?

Also the 'main branch' approach for production in SWAs suggested to me that I wouldn't be able to push to the production 'environment' inside the SWA unless my build was running on the main branch?

[bmd-syd]

Understood and have updated my comment - we don't build during the CI step. Instead, we push the code to Azure Artifact as a Universal Package. When we're ready to deploy, I download it and have the AzureStaticWebApp@0 do the job of building. I went with that approach for the reason you mentioned above, but also depending on where I am deploying to it gives the option to build with different configuration.

It is the deployment_environment field on the AzureStaticWebApp@0 task that I am using to deploy to either a named environment or production.

[bmd-syd]

@Reshmi-Sriram, is there a publicly available roadmap that would show when hybrid web app support would reach General Availability?

[thomasgauvin]

We're still working on improving our support for Next.js versions 13 and above, and newer Next.js features. We have a milestone that we'll be sharing within the next 4 weeks, and we'll continue to iterate until we have something we are confident in GA'ing and ready to be used for production purposes.

[ImmeoRPA]

@thomasgauvin.
There has suddenly been a change when we deploy our next js hybrid web app.
In build and deploy of an azure static web app deleveloped in next js i suddenly get this message in the log:
Web App Runtime Information. OS: linux, node version: 18
Instead of what i formerly got:
Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 18

After this we get a status 500 from our application

[thomasgauvin]

@ImmeoRPA thanks for the feedback, we'll be looking into this, there are certain Next.js deployments that are encountering some issues. Here are my asks so we can get to the bottom of this:

1. Can you open a support issue so we can have a channel to share more information beyond this public channel?
2. Can you deploy your site to West US 2 and share your default host name? (we have more thorough logs in that region)
3. Can you specify the Next.js version and whether it's standalone or not. If it is standalone, can you verify if manually adding the static files to the standalone output fixes it: https://github.com/thomasgauvin/nextjs-hybrid-starter-test/pull/1/files, in package.json:

{ ...
  "scripts": {
    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
    }
  }
    ```

[ImmeoRPA]

@thomasgauvin I have created a support request: 2403080050000686
I have tried adding what you propose and the next js version we have is 13.4.11. We have also tried with 13.4.16

[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