Vercel Middleware running twice?
Unanswered
Whiteleg shrimp posted this in #help-forum
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.
I think the middleware is running twice.
35 Replies
Whiteleg shrimpOP
This is the code of my middleware if needed https://gist.github.com/achaconm2001/d6e7283b6bf6897423e08050535356ce
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
@Whiteleg shrimp solved?
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
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)
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)
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
This is for a normal route
This is the middleware code
do you call api routes inside your api routes? Or any external api routes? Maybe you can even share your api/hono/...
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
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
yea, I thought its something like:
Incoming request to /api/... -> middleware -> hono handler --- call route ---> middleware -> get api route
Incoming request to /api/... -> middleware -> hono handler --- call route ---> middleware -> get api route
2x middleware with one request
@Whiteleg shrimp solved?
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)
// ...
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)
yea, then it's like we talked about here ( https://nextjs-forum.com/post/1317733447485362227#message-1318512299572461670 ) buggy for now.
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