The Clerk middleware is causing delays in loading, leading to a 504 Error on NextJS / Vercel with the message 'FUNCTION_INVOCATION_TIMEOUT'

I'm currently working on a web page where I need to utilize Clerk for authentication and login. However, I've encountered an issue with the middleware taking too long to load, causing deployment problems for the app.

Here is the code from middleware.ts:

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)(.*)"],
};

I'm seeking assistance in resolving this issue. Any help would be greatly appreciated!

typescriptnext.jsruntime-errormiddlewareclerk

Answer №1

As a DevX Engineer working at Clerk, I may have some insights to offer. One recommendation would be to avoid having API routes in the public directory, especially if they are duplicated in ignoreRoutes. The issue here is that having these routes in both publicRoutes and ignoreRoutes can lead to slow Middleware performance.

Consider this example: if your API does not require the Auth Object, it might be better to place it in publicRoutes instead. This adjustment could potentially optimize the Middleware's speed.


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

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There was a TypeError encountered while trying to read properties of undefined in Next.js version 13

I've encountered a problem in the title with my post API endpoint that I created in Next.js. The purpose of my endpoint is for form submission, where I gather inputs and send them to my email. Currently, my code successfully sends the email and I rec ...

javascriptreactjsnext.jsnodemailernext.js13

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

javascripthtmlangulartypescript

Next.js presents a challenge with micro frontend routing

In the process of developing a micro frontend framework, I have three Next.js projects - app1, app2, and base. The role of app1 and app2 is as remote applications while base serves as the host application. Configuration for app1 in next.config.js: const ...

javascriptwebpacknext.jsmicro-frontendwebpack-module-federation

Using Angular to access HTML content through the .ts file

Is there a way to retrieve the value of the input field [newUser] when clicking on the button and executing the action [onAddUser()] in the .ts file? <input type="text" ng-model="newUser" style="text-align:center"/> <button (cl ...

angulartypescript

Extending an interface in TypeScript does not permit the overriding of properties

While working with Typescript, I encountered an issue where I couldn't make a property not required when overwriting it. I have defined two interfaces: interface IField { label: string; model: string; placeholder? ...

typescripttyping

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Within a Svelte project that was scaffolded using Vite, I am attempting to create a Svelte store in Typescript. However, I am encountering difficulties when trying to import the Writable<T> interface as shown in the code snippet below: import { Writa ...

typescriptsveltevite

Creating a digital collection using Vue, Typescript, and Webpack

A short while back, I made the decision to transform my Vue project into a library in order to make it easier to reuse the components across different projects. Following some guidelines, I successfully converted the project into a library. However, when ...

typescriptwebpackvuejs2semantic-ui

Ways to conceal a component based on a specific condition?

In my Angular 8 application, I need to dynamically hide a component based on a specific condition. The condition I want to check is: "status === EcheqSubmissionStatus.EXPIRED" Initially, I attempted the following approach: EcheqProcessComponent templat ...

javascriptangulartypescript

"Experiencing an overload of active connections in Next.js with MongoDB

When working on development with MongoClient from the "mongodb" library in Next.js, it appears that a new active connection with mongodb is created every time I reload the page (even with hot-reloading on save). I am caching a client so that when multipl ...

mongodbnext.jscaching

Unable to locate module '@utils/prisma' or its associated type declarations.ts(2307)

If you encounter a comparable issue in your Next.js project where TypeScript cannot locate the module @utils/prisma or its related type declarations, there is a potential solution. Simply open your Visual Studio Code terminal and execute the command: npx ...

next.js

I am using multiple useState hooks, but only one of them is functioning properly

https://i.stack.imgur.com/qMSR1.png https://i.stack.imgur.com/Sucdt.png Within this block of code, I have defined three useState variables. The first one, boola, is functioning as expected. However, the functions func and func2 are not working correctly; ...

next.jshook

Issue: The current browser does not have the capability to support document.implementation.createHTMLDocument in Next.JS

Currently, I am working on a basic next.js application in which I am attempting to SSG render some editor.js formatted output data using the npm package called editorjs-react-renderer. Explanation of the Problem: In older versions of this plugin (2.7.3) w ...

reactjsnext.jseditorjs

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

javascriptnode.jsangulartypescript

Step-by-step guide for deploying an Angular 2 CLI app on GitHub

As a front-end engineer, I have limited experience with deployment. Currently, I am working on my pet project using angular-cli. What is the best way to deploy it on GitHub Pages? Are there any other straightforward methods for deployment? ...

angulartypescriptdeploymentangular-cli

After deploying my next.js app on cPanel, it suddenly displays a blank screen

I recently deployed my Next.js app on cPanel and encountered a blank screen issue, although it works perfectly fine when tested locally. Here's the detailed process I followed: 1. To begin with, I created a custom server.js file in the root directory ...

reactjsnext.jsdeploymentcpanel

How to fix an unresolved TypeScript import?

Within my node_modules directory, there is a package that contains the following import statement: import { x } from 'node_modules/@types/openfin/_v2/main'; Unfortunately, I am receiving an error message stating "cannot find module 'node_mo ...

angulartypescripttypesnode-modules

Next-Auth: Access Session in _app.js Directly Without Using getServerSideProps

When working with React.js and React-Auth, it's important to note that calling server-side functions such as getServerSideProps can prevent you from exporting your project using next export. Below is the content of my pages/_app.js, which I structured ...

javascriptnode.jsnext.jsnext-auth

Unable to access the values of the object within the form

I am encountering an issue where I cannot retrieve object values in the form for editing/updating. The specific error message is as follows: ERROR TypeError: Cannot read properties of undefined (reading 'productName') at UpdateProductComponen ...

angulartypescriptforms

Typescript best practice: limiting global variables per file

I found it very useful in jslint to require declaring all used globals at the beginning of a file using the following syntax: /*global console, document */ Is there a similar feature available in Typescript? I managed to disable the implicit availabilit ...

typescriptglobal

Having trouble displaying the correct data for the Title in NextJs Head? Any solutions available?

Hi there, I am currently utilizing the <Head/> Tag from an API in my NextJs project. All meta tags are functioning properly except for the title meta tag, which seems to be displaying the first H1 on the page instead. Here is the code snippet: ...

reactjsnext.jsseometadata