Invariant: Missing 'next-action' header

[erwanriou]

This issue is quite hard to reproduce in a sandbox or an implementation as it quite flaky. But within our current application that have around 30k users daily we get this type of errors around 40 time a day:

the error itself is:

Error: Failed to find Server Action "null". This request might be from an older or newer deployment. Original error: Invariant: Missing 'next-action' header.

That been say, there is an already previously closed discussion reporting it (#59105) with quite the amount of comments on it where the currently proposed fix didn't work for most of the cases.

I highly suspect that this issue had to do with how nextjs handle middleware and that sometime receive not correctly formated query that nextjs doesn't handle properly.

here is the extract of my current middleware were you can see i am indeed depending on the req.headers.get('host') and i suspect that it is the origin of the crash.

import { Domains } from "..."
import createMiddleware from "next-intl/middleware"

const intlMiddleware = createMiddleware({
  locales: Domains?.map(({ defaultLocale }) => defaultLocale),
  defaultLocale: "us",
  domains: Domains,
  localePrefix: "never",
  timeZone: "Europe/Madrid"
})

const middleware = req => {
  // GET DEFAULT LOCALE
  const host = req.headers.get("host")
  const { defaultLocale = "us" } = Domains.find(({ domain }) => domain === host)
  req.cookies.set("NEXT_LOCALE", defaultLocale)

  // APPLY TRANSLATION MIDDLEWARE
  return intlMiddleware(req)
}

export default middleware

export const config = {
  matcher: ["/", "/((?!api|_next|_vercel|.*\\..*).*)"]
}

my infra is the following just in case --> cloudflare CDN --> nginx load balancer --> kubernetes --> docker image of nodejs 20 --> nextjs

[justrealmilk]

I get the same thing from attempts to generate opengraph-images lol

[anisharaz]

I got the same issue in simple production environment, my setup is,

users -> cloudflare -> nginx proxy -> docker container running nextjs app

[erwanriou]

I start to wonder if this would have to do with clustered environment specifically.

[anisharaz]

or may be a reverse proxy could be reaseon. my nginx reverse proxy config is

server {
    listen 443 ssl;
    server_name domain_name;
    ssl_certificate path_to_key;
    ssl_certificate_key path_to_key;
    location / {
        proxy_pass http://11.0.0.16:3000$request_uri;
       add_header X-Served-By $host;
       proxy_set_header Host $host;
       proxy_set_header X-Forwarded-Scheme $scheme;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Real-IP $remote_addr;
    }
}

[AndonMitev]

I got the same in my server action

Error: Failed to find Server Action "null". This request might be from an older or newer deployment. Original error: Invariant: Missing 'next-action' header.
    at ry (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:1666)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:7035
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at rm (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:15:6350)
    at rq (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:18:1255)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:18:3935
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Object.wrap (/var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:13:16239)
    at /var/task/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:18:3825
    at AsyncLocalStorage.run (node:async_hooks:338:14)

And happens only on prod

I assume based on this line might be related with cookies something but i'm not sure: at AsyncLocalStorage.run

[JohnMarsden24]

Not getting this exact error but I am getting one mentioned in the previous thread:

Missing `origin` header from a forwarded Server Actions request.
⨯ Error: Connection closed.

Only happens in prod for me, running on AWS ECS, not using server actions and using Next version 14.0.3

[anisharaz]

my middleware looks like this with same problem (for more context)

i am using next-auth. the config for next auth is

import type { NextAuthConfig } from "next-auth";
export const authConfig = {
  pages: {
    signIn: "/",
  },
  trustHost: true,
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith("/dashboard");
      const isOnUserLogin = nextUrl.pathname.startsWith("/");
      const path = nextUrl.pathname == "/";
      const adminpath = nextUrl.pathname == "/admin";
      const isOnAdminLogin = nextUrl.pathname.startsWith("/admin");

      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false;
      } else if (isOnUserLogin && path) {
        if (isLoggedIn)
          return Response.redirect(new URL("/dashboard", nextUrl));
      } else if (isOnAdminLogin && adminpath) {
        if (isLoggedIn) return true;
        return false;
      } else if (isLoggedIn) {
        return true;
      }
      return false;
    },
  },
  providers: [],
  session: {
    maxAge: 7 * 24 * 60 * 60,
  },
} satisfies NextAuthConfig;

And my Middleware config is

import NextAuth from "next-auth";
import { authConfig } from "./auth.config";

export default NextAuth(authConfig).auth;

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|.*\\.png$).*)"],
};

[johnkdunyo]

I had a similar error.

I fixed it be deleting my node_modules and re-installing the packages.

[erwanriou]

Maybe i could have a potential solution if you had the same case as me.

I was until now using the axios library. I removed it and migrated all my queries to fetch and until now i didn't had this error yet. I will keep you updated.

i also added another header:

  async headers() {
    return [
      {
        source: "/:path*{/}?",
        headers: [{ key: "Access-Control-Allow-Origin", value: process.env.NEXT_PUBLIC_HOSTNAME }]
      },
      {
        source: "/:path*{/}?",
        headers: [{ key: "X-Accel-Buffering", value: "no" }]
      }
    ]
  },

as the x accel buffering that is used by nginx create conflict with the cached queries

[anisharaz]

thats strange because, i have not used fetch or axios anywhere in my project (only used server actions) although am getting the errors.

[erwanriou]

i thought it was fixed too... At the end the error is back again :/

[anisharaz]

And since @erwanriou have large traffic on daily basis, does this error effect the normal functioning of your app ? I wrote the app for another person, and he never complained about usability, and this error continues in the server log.

[erwanriou]

No it's doesn't affect the server CPU or scaling and i have way too much cache in front to see any single impact. It's just i don't like to have errors in my logs :p

[JohnMarsden24]

What type are your pages @erwanriou? Are you using headers or cookies anywhere to opt in to dynamic pages?

[erwanriou]

In my sitemap pages i am using the nextjs headers and also the middleware. But in the middleware i am using the req to get all what i need.

[JohnMarsden24]

I believe it was in the previous thread it said somewhere that the headers API uses the same function / path as a server action, which could be the cause? If I find the comment with more details I'll share a link

[shuding]

Hi! Can you all try the latest canary version? This issue should be fixed with #64315.

[erwanriou]

well now i guess u can go for the 14.2.2

[ninachaubal]

I updated to 14.2.2 to fix this issue, but we're still seeing this in our logs. We're deploying to ECS.

[arhamymr]

is this error cause server down (return 504 gateway timeout) ? or its just error log

[marco910]

@arhamymr It's just in the server logs

[Jubemi-Pajiah]

I'm currently on "next": "14.1.3", and still getting this issue. What's the latest & safest next js version I should update to? Most of my packages aren't compactible with the current latest version of next js.

[justrealmilk]

So what leads to these requests? Where are these 404s coming from

[Davane]

@justrealmilk I was just testing this locally and found that if you submit a form quickly before the page completes loading then this error will be logged on the server side.

To test you can try to:

1. Create a page with a form. (The isn't meant to be a server action type form but instead, a regular client-side form that has an onSubmit handle.
2. Reload your page and click the button to submit the form before all the JS and other stuff loads (you can try using the slower network settings in Chrome dev tools to delay the loading of the JS).
3. You should see the error in the console (hopefully).

My project is loading data server side and performing other tasks, so that contributes to the delays in the page loading.

[timmywil]

I don't use any server actions and get these errors all the time. They are seemingly random and without any further info about the requests in the error logs. Using next@14.2.4.