Deploying Nextjs app to Azure Static Web App fails on build

Question

Deploying Nextjs app to Azure Static Web App fails on build

Enes Salih 1

Hi,

I've been following the guidelines to deploy NextJS application on azure as Static Web App, but unfortunately getting build failed on the build with "The app build failed to produce artifact folder: 'out'. Please ensure this property is configured correctly in your workflow file." error. We've tried the solutions on blogs and already asked questions, but we are not concluded for the solutions. The NextJS Apps does not have an .html page, some said that is the reason but I should not be needing to change the NextJS to SPA app.

158469-azure.txt

SnehaAgrawal-MSFT 22,721 Reputation points Moderator

2021-12-20T12:29:40.56+00:00

Thanks for asking question! Could you please confirm folder configuration as mentioned in the document that location of the build output directory relative to the app_location.

To highlight on this:

app_location is the root location of the source code to be deployed. This setting will typically be / or the location of the JavaScript and HTML for your project.
output_location is the name of the folder created by any build process from a bundler such as webpack. This folder both needs to be created by the build process, and a subdirectory under the app_location
api_location is the root location of your Azure Functions application hosted by Azure Static Web Apps. This points to the root folder of all Azure Functions for your project, typically api.

Let us know.
Enes Salih 1 Reputation point

2021-12-20T13:42:37.157+00:00

Thanks for replying, yes actually I followed the guideline about the paths and tried the possibilities according the folder structure.

I have no Front-End expertise, but as far as I made the some search the application is not able to do the exporting due to a library named 'i18n' which is preventing the export command thus output_location can't get the 'executables'.
I tried for different solutions and workarounds but no result. After that I tried to deploy the app as an App Service but that went even worse since I wasn't able to find suitable guide on how to deploy nextjs app as an app service.

Sorry for not being able to share the repo since its a private one. But I would love to hear some ideas. @SnehaAgrawal.

3 answers

Your answer

SnehaAgrawal-MSFT 22,721 Reputation points Moderator

2021-12-20T12:29:40.56+00:00

Thanks for asking question! Could you please confirm folder configuration as mentioned in the document that location of the build output directory relative to the app_location.

To highlight on this:

app_location is the root location of the source code to be deployed. This setting will typically be / or the location of the JavaScript and HTML for your project.
output_location is the name of the folder created by any build process from a bundler such as webpack. This folder both needs to be created by the build process, and a subdirectory under the app_location
api_location is the root location of your Azure Functions application hosted by Azure Static Web Apps. This points to the root folder of all Azure Functions for your project, typically api.

Let us know.
Enes Salih 1 Reputation point

2021-12-20T13:42:37.157+00:00

Thanks for replying, yes actually I followed the guideline about the paths and tried the possibilities according the folder structure.

I have no Front-End expertise, but as far as I made the some search the application is not able to do the exporting due to a library named 'i18n' which is preventing the export command thus output_location can't get the 'executables'.
I tried for different solutions and workarounds but no result. After that I tried to deploy the app as an App Service but that went even worse since I wasn't able to find suitable guide on how to deploy nextjs app as an app service.

Sorry for not being able to share the repo since its a private one. But I would love to hear some ideas. @SnehaAgrawal.

Answer 1

Oscar Garcia @ozkary 26

Nextjs has a configuration file next.config.js This file can be used to indicate what the output folder should be. You can also look at the output folder that is created after you do a npm build , typically .next This is the folder name that should be used for the output_location: `

output_location: ".next" #

const nextConfig = {
    // enable static export application, add output: 'export
    // output: 'export',
   
    // Optional: Change the output directory `out` -> `dist`
    distDir: '.next',
  }

0 comments

Answer 2

Jani Hyytiäinen 5

Turns out, the output_location is relative to app_location.

F.ex. if your output directory is src/out, you should have the following:

- task: AzureStaticWebApp@0
  inputs:
    app_location: 'src'
    app_build_command: 'npx next build'
    output_location: 'out'

Abrar Ajaz 0 Reputation points

2024-05-20T18:32:46.5066667+00:00

Thanks. It resolved my problem.

Answer 3

Solomon metta 11

I had the same issue. I eventually had to edit a portion of my package.json file from:
"build": "next build", to "build": "next build && next export",

Christian H 1 Reputation point

2022-08-30T14:15:23.887+00:00

This worked for me!
Pawel Gajewski | Wisetek 0 Reputation points

2023-07-14T09:14:54.09+00:00

Hi All, with the never next.js version I had this issue today, Didn't have to change package.json, I managed to fix it by going to next.config.js and in options added output: 'export' This created an output folder. I hope it helps.