Deployment succeeded but Website report "There was an unexpected error in the request processing"

[rebeccapeltz]

Describe the bug repository: https://github.com/rebeccapeltz/nextjs-azure-test deployment: https://gray-grass-005eb5b10.3.azurestaticapps.net/

I modified the yml to remove nextjs/caches per another open issue. This allowed the build and deployment to complete.

 app_build_command: 'npm run build'
 api_build_command: 'rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache'

There is a warning that I don't know how to interpret: Failed to remove `http.https://github.com/.extraheader' from the git config

A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. I used a sample blog starter app from Next.js
2. Go to deployed app
3. View Error
4. Go to yml used for build. If I don't remove the cache during build the build is rejected due to size. It's a very small application.

Expected behavior The app should load with the URL provided by Azure.

Device info (if applicable):

• OS: [e.g. iOS] iOS
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22] 113.0.5672.92

Additional context I want to be able to deploy Next.js 13 apps to Azure and this is a common way to try it out.

[rebeccapeltz]

I'm able to deploy the project to Vercel: https://nextjs-azure-test-omega.vercel.app/

[rebeccapeltz]

My problem seems related to exporting the build output. I'm using Next.js v13. I added a next.config.js to do the export. Image optimization won't take place but the images are really small in this sample.

const nextConfig = {
    output: 'export',
    images: {
        unoptimized: true,
      },
  };

I've updated my code repo with this. It runs fine locally with this command npx serve@latest out. I'm not sure how to add that to the Azure workflow.

[rebeccapeltz]

I've specified "out" and "/out" as the location of the exported files, but neither seems work. https://github.com/rebeccapeltz/nextjs-azure-test/blob/main/.github/workflows/azure-static-web-apps-gray-grass-005eb5b10.yml

[rebeccapeltz]

Still getting a 502 error.

[rebeccapeltz]

Got it working with this next.config.js. You have to turn off image there image optimization for export.

const nextConfig = {
  images: {
    unoptimized: true,
  },
  trailingSlash: true,
  output: "export",
};

[thomasgauvin]

@rebeccapeltz thank you for this write up. Was the trailingSlash: true parameter required for this project as well? It seems to be the difference between https://github.com/Azure/static-web-apps/issues/1167#issuecomment-1552157248 and https://github.com/Azure/static-web-apps/issues/1167#issuecomment-1550442495

[rebeccapeltz]

I got the trailing slash from one of the articles from Microsoft. It wasn't the final solution but I think the Microsoft used it. You could try leaving it off. This section in the xaml is important too: https://github.com/rebeccapeltz/nextjs-azure-test/blob/main/.github/workflows/azure-static-web-apps-gray-grass-005eb5b10.yml

 app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
          app_build_command: 'npm run build'
          is_static_export: true