Next.js Discord

Discord Forum

Vercel Middleware running twice?

Unanswered
Whiteleg shrimp posted this in #help-forum
Open in Discord
Avatar
Whiteleg shrimpOP
I'm not sure if this is the right place to ask specifically about Vercel, if not, feel free to delete it.
I think the middleware is running twice.
Image

35 Replies

Avatar
Whiteleg shrimpOP
Avatar
sometimes it happens, that it runs "twice" because there are multiple resources that will be requested. For example: the page.tsx will be requested and in the same moment the "icon.png" will also be request. It looks like the middleware run twice however it just run once for the page.tsx and once for the icon.png
Btw. you github gist is not available
Image
Avatar
@Whiteleg shrimp solved?
Avatar
Whiteleg shrimpOP
No, the middleware doesn't run on "icon.png" because is excluded from the matcher...
Unless there's a bug on NextJS or Vercel, also this only happends in API routes
Even if "icon.png" is matched, this should run isolated as 2 different requests my understanding so I don't get your comment
Avatar
that was just an example so you can understand what can happen in the background.

I think vercel combines the request, because maybe the requests are made in the same moment and the route stays the same. Iirc it's also a pretty new feature. And we all know the thing with new features: they can be confusing and maybe even buggy.

If I would be you, I would have an eye on this and check if that happens more often. If thata happens more often I would add debug messages to my middleware (what esp. was requested). Then while following the logs I can see, what was really requested and then know, that everything is right (or not)
Avatar
Whiteleg shrimpOP
Vercel batching requests will actually be a really good feature, but I'm also certain this is not the case because the middleware running twice only happends on /api routes
This is for an api route
Image
This is for a normal route
Image
This is the middleware code
Image
Avatar
do you call api routes inside your api routes? Or any external api routes? Maybe you can even share your api/hono/...
Avatar
Whiteleg shrimpOP
do you call api routes inside your api routes?
We don't
Or any external api routes?
We actually call serveral api routes from Upstash (using their REST client) and Neon (using raw HTTP)
Maybe you can even share your api/hono/...
Our API is really huge, something more specific you want to see?
import type { NextRequest } from "next/server"
import { NextResponse } from "next/server"

import { getMainHttpDatabase } from "@/databases/main/connector"

export const GET = async (request: NextRequest): Promise<Response> => {
  const code = request.headers.get("X-Code")
  if (!code) {
    return new Response("Missing code", { status: 400 })
  }

  if (code !== env.EXCHANGE_RATES_INTERNAL_KEY) {
    return new Response("Invalid code", { status: 401 })
  }

  const connection = getMainHttpDatabase()
  const exchangeRates = await connection.query.mainCurrencyExchangeRatesTable.findMany({
    columns: {
      rate: true,
      date: true,
    },
    with: {
      sourceCurrency: {
        columns: {
          code: true,
        },
      },
      targetCurrency: {
        columns: {
          code: true,
        },
      },
    },
  })

  return NextResponse.json(exchangeRates)
}
This one is actually small and have the same issue
Image
Avatar
correct me if I am wrong as I never used hono. It should like that, right?
Image
Avatar
Whiteleg shrimpOP
yep, except that we don't use the edge runtime
but it is not a hono issue because this api route also has the middleware twice and it is a raw nextjs api route
Avatar
yea, I thought its something like:

Incoming request to /api/... -> middleware -> hono handler --- call route ---> middleware -> get api route
2x middleware with one request
Avatar
@Whiteleg shrimp solved?
Avatar
Whiteleg shrimpOP
nope
i did what you told me of adding console.logs and I confirmed that the middleware is running twice
export async function middleware(request: NextRequest, _event: NextFetchEvent) {
  if (!request.nextUrl.pathname.startsWith("/api")) {
    return getResponse(request, request.nextUrl.pathname, request.nextUrl.searchParams)
  }

  console.log("request.nextUrl.pathname", request.nextUrl.pathname)
  // ...
Image
Also, this only happends on Vercel
Only one console.log when running in prod mode locally
So I'm almost sure that this is a Vercel bug (I may be wrong xd)
Avatar
yea, then it's like we talked about here ( https://nextjs-forum.com/post/1317733447485362227#message-1318512299572461670 ) buggy for now.
Avatar
Whiteleg shrimpOP
well, now I just can wait, thanks for your help 😄
I will be tracking the issue meanwhile, if you want I can keep you informed