I’m setting up Clerk for my Next.js application, and I’m encountering issues with the publishable key. The error I found in the logs is as follows:

Aug 09 04:26:43.49 GET
— canva-clone-fabricjs.vercel.app / Error: @clerk/nextjs: Missing publishableKey. You can get your key at
https://dashboard.clerk.com/last-active?path=api-keys. at
(node_modules/@clerk/shared/dist/chunk-T5VTDOY6.mjs:155:0) at
(node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js:29:22)
at (node_modules/@clerk/nextjs/dist/esm/server/utils.js:143:0) at
(node_modules/@clerk/nextjs/dist/esm/server/clerkMiddleware.js:28:0)
at (src/middleware.ts:11:31) at (webpack/bootstrap:21:0) at
(../../src/client/components/static-generation-async-storage-instance.ts:5:2)
at (webpack/runtime/jsonp chunk loading:34:0)

Aug 09 04:26:43.45 GET
500 canva-clone-fabricjs.vercel.app / [GET] [middleware:
“src/middleware”] / reason=EDGE_FUNCTION_INVOCATION_FAILED,
status=500, user_error=true

My .env.local is at the root directory and it is already included the neccessary env var:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<my_publishable_key>
CLERK_SECRET_KEY=<my_secret_key>
CLERK_PUBLISHABLE_KEY=<my_publishable_key> # required by hono clerk auth

After some research, I have tried the following:

Set the ClerkProvider with the publishableKey:

<ClerkProvider afterSignOutUrl="/" publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>

Added the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY directly to Vercel’s environment variables:

Still the error don’t go away.