Next.js app is getting 308 Permanent Redirect or 502 Bad Gateway

[omair-at-archetype]

Private app and boilerplate create-next app are getting a Permanent Redirect 308 which results in a 404 error or a 502 bad gateway error

Unable to access the Next.js app built on Azure SWA after a successful build. When trying to access the SWA via the browser, I am getting a Permanent Redirect 308 which then endlessly keeps redirecting the app to itself, resulting in a 404 or the application takes 40+seconds to load and then returns a 502 Bad Gateway.

• 308 Permanent Redirect prints the following text on the browser: "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."
• 502 Bad Gateway prints the following text on the browser: "There was an unexpected error in the request processing."

Additional context This issue started after a build broke on 12/4/2023 with an error from a peer dependency library called sharp (I believe this library is being used by nextjs). The error required us to update from Node 16 to Node 18. After the update the build was fixed but now the application started running into the permanent redirect 308 issue.

Note, that even after fixing the build the sharp issue simply turned into a warning instead of an error, since Azure SWA still runs on the Node 16 engine.

After scratching our heads trying to figure out the 308 issue, we reverted our code to the last stable release and continued to run into the Node 16 issue, so we updated to Node 18 with our reverted code and still ran into the 308 issue.

At this point it started to look like there is something different with Azure SWA build which is causing our Next app to run into this 308 issue which turns into a 404. Sometimes the app hangs and returns a 502.

Assuming this could be a Next13 and Azure SWA issue, I dropped the Next version to 12 and rebuilt the app. This also is resulting in a 308 issue.

In order to further test this theory, I initialized a brand new Next 13 app via create-next-app@next13 and deployed it to a brand new Azure SWA instance. Besides the api build command change to reduce the build size (rm -rf ./node_modules/@next/swc-* && rm -rf ./.next/cache) nothing was changed. This is also resulting in a 308 issue.

Wanted to reach out and create a bug here. Please let me know if you'd like more information. Would love a permanent fix or tips for a workaround. This is affecting our production application and any successful next build is resulting in a 502 or 308 issue so there is no clear path to release as we speak.

I will be further testing this theory by trying to host the application on a standard Azure server. Meanwhile please help!!

[omair-at-archetype]

[simonyangurgen]

We have the same issue, infinite 308 redirects, until we see the same message in the browser page - "The resource you are looking for has been removed, ...". The weird thing is that when we build and deploy a commit which doesn't include any dependency upgrades (package.json and package-lock.json are intact), everything works as expected, however when we upgrade any dependency, build and deploy seem to be successful (no any errors in the logs), but the app throws this infinite redirect issue. In both scenarios we see the following warning in the logs.

I don't think that upgrading node version will help, as I can see the same warning also in successful builds and deploys. Seems to be more of a caching issue of application dependencies.

[omair-at-archetype]

Update: I hosted the same applications on an Azure App Service / Web App instead of a SWA and these applications work as is!

[superfaz]

Did you try to force the node version with a staticwebapps.config.json file ?

{
  "platform": { "apiRuntime": "node:18" }
}

A second element is to update your package.json with the following entry:

  "engines": {
    "node": ">=18.17.0 <20.0.0"
  }

[WilliamWelsh]

Took me a LOT of debugging, but for me my issue was I had type: "module" in my package.json, which was added automatically when I bootstrapped the project using create-t3-app. I have the default yml file that Azure put in there, and my next.config.js is:

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  swcMinify: true,
  output: "standalone",
};

module.exports = config;

[agitnaeta]

Same here, im using nextjs 14

[vlad-yul]

I have same issue. I am using Next.js 14.0.4. On package.json I have specified the engine "engines": { "node": ">=18.17.0 <20.0.0"} but it still throws the infinite redirect.

[WilliamWelsh]

@vlad-yul @agitnaeta What I had to do was get the example Next app working on Azure, and slowly add stuff like dependencies until it broke. In my case it was type: "module"

[vlad-yul]

@WilliamWelsh I just did a test using a completely blank application npx create-next-app@latest, following this guide https://template.nextjs.guide/getting-started/installation, and the redirect issue remains.

Note: I had to add "engines": { "node": ">=18.17.0 <20.0.0"} to the package.json to have a successful build

[vlad-yul]

Just found what was the issue and a workaround to fix it. I had to rollback to the Next.js version 13.2.4. Without changing anything else, it worked!

On this issue https://github.com/Azure/static-web-apps/issues/1365 @thomasgauvin mentions that the support for newer versions of Next.js may have limitations.

My package.json: { "name": "appname", "version": "1.0.0", "private": true, "engines": { "node": ">=16.0.0 <=20.0.0" }, "scripts": { "dev": "next dev", "build": "next build && rm -rf ./.next/cache", "start": "next start", "lint": "next lint", "export": "next export" }, "dependencies": { "@react-aria/ssr": "^3.9.1", "axios": "^1.6.4", "bootstrap": "^5.3.2", "date-fns": "^3.1.0", "next": "13.2.4", "ramda": "^0.29.1", "react": "18.2.0", "react-animated-css": "^1.2.1", "react-bootstrap": "^2.9.2", "react-cookie-consent": "^9.0.0", "react-device-detect": "^2.2.3", "react-dom": "18.2.0", "react-helmet": "^6.1.0", "react-icons": "^4.12.0", "react-js-pagination": "^3.0.3", "react-markdown": "^9.0.1", "react-toastify": "^9.1.3", "rehype-sanitize": "^6.0.0", "sass": "^1.69.7" }, "devDependencies": { "eslint": "8.56.0", "eslint-config-next": "14.0.4", "serve": "^14.2.1" } }

[trishan9]

Is this issue resolved? If so then which method you used to solve it? @omair-at-archetype

[thomasgauvin]

Hey folks! Support for Next.js on Static Web Apps has been improved, with our latest improvements having rolled out across all regions over the past couple of weeks. This issue is now resolved, and I recommend checking out the announcement thread and sharing feedback there https://github.com/Azure/static-web-apps/discussions/1428