Next.js Static Web App deploy from Azure DevOps pipelines

Question

I will do a few questions in the same body because they all share the same context.

I have a website that was using React.js and now we have made the migration to use Next.js, the reason for that is that we have a few "courses" pages and we want it to be found by google, to do so we need to implement the SSG ( Static Site Generation ), but those pages will be updated from times to times, it may be like 200 courses a day or none, so we are trying to use the ISR( Incremental Static Regeneration ) to pre-render the page, this way our static files will always be up to date, it is not clear yet how long will be the revalidate prop though, but doesn't really matter.

We are using azure DevOps for everything, so no GitHub Actions for now (this tutorial is for GitHub Repos).

With this in mind, it is clear that we have a Hybrid request (with the prop "is_static_export" unset), you guys have a tutorial that sadly didn't work for me.

1 - I have a .yaml with the following job

  - job: Deploy  
    displayName: "Dev Deploy"  
    steps:  
    - task: AzureStaticWebApp@0  
      inputs:  
        app_location: '/'  
        azure_static_web_apps_api_token: $(deployment_token)

this Job is not working and it is returning this message:

Failed to find a default file in the app artifacts folder (.next). Valid default files: index.html,Index.html.

Tried a few fixes but none of them did the trick.

2 - The second problem

My first attempt was to use the out folder as part of the deployment, so I had the following .yaml job

  - job: Deploy  
    displayName: "Dev Deploy"  
    steps:  
    - task: AzureStaticWebApp@0  
      inputs:  
        app_location: '/'  
        api_location: ''  
        output_location: 'out'  
        azure_static_web_apps_api_token: $(deployment_token)

This deployment is actually working fine, but it is a static deployment based on the export method command line "build": "next build && next export", as the documentation says it is only static stuff.

In this scenario, I didn't manage to read environment variables from the Static Web App, which doesn't work as I need to touch some external endpoints and use secrets, is it possible to do that? how does it work? does the Static Web App using the 'out' folder reads the env vars in any way?

Sorry about the long question, I am kinda stuck here.

Answer

@Lucas Levandoski , Following-up on this-

Please try changing the output_location to dist\apps\app-name\.next -try this along with the empty node_modules folder in dist\apps\app-name.

As discussed in this GitHub thread: https://github.com/Azure/static-web-apps/discussions/921#discussioncomment-4045378 (by our Azure Static WebApps PG, it's a bug and our team is working on the fix)

2.Yes, that’s the expected behavior. Our product team is working on the fix for issue 1, but there is no ETA to share currently.

In case, the issue 1 still persist, could you please share the following info, directly on the GitHub discussion: https://github.com/Azure/static-web-apps/discussions/921#discussioncomment-4045378
App folder structure, the complete GitHub Action run logs, and your workflow.yml file.

Apologies for any inconvenience with this. We appreciate your patience and collaboration.

Next.js Static Web App deploy from Azure DevOps pipelines

1 answer