Clerk middleware is taking too long to load resulting in NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Question

I am making a web page where I have to used clerk for authentication and login but the middleware is taking too long to load and thus the app is not getting deployed properly.

This is the middleware.ts code:

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
    publicRoutes: ['/', '/api/webhook/clerk', "/api/uploadthing"],
    ignoredRoutes: ['/api/webhook/clerk']
});

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

How can I resolve this issue? Please help!

Answer 1

I am a DevX Engineer at Clerk, maybe I can be of assistance here. My first suggestion would be to remove the API routes from public especially the one you duplicated in ignoreRoutes the reason being publicRoutes allows the Auth Object to be accessible on those routes while ignoreRoutes allows the Middleware to skip that running on that route, having it in both is probably the cause of the Middleware running slow.

Here is an example if you don't need the Auth Object in your API, if you do put it in publicRoutes instead, hope that helps :)

import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({
    publicRoutes: ['/'],
    ignoredRoutes: ['/api(.*)']
});

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