Vercel Not Injecting Clerk Publishable Key at Build Time

Title:

Environment Variable NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY Not Injected at Build Time

Current vs. Expected Behavior

Current:
My Next.js (App Router) project fails to build on Vercel with the error:
Error: Missing NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
even though the environment variable is set in the Vercel dashboard for Production, Preview, and Development.

Expected:
The environment variable should be injected at build time, and the build should succeed (as it does locally).

Code, Configuration, and Steps to Reproduce

Relevant code (src/app/layout.tsx):

import { ClerkProvider } from '@clerk/nextjs';
// ...other imports...

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <html lang="sv" className="h-full">
        <body>
          {/* ... */}
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

Environment variable in Vercel dashboard:

Name: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
Value: (my actual Clerk publishable key)
Environment: Production, Preview, and Development (all checked)

Steps:

Push code to GitHub (triggers Vercel build).

Build fails with:

Error: Missing NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

Error: @clerk/clerk-react: Missing publishableKey.

Local build with vercel build and .env.local succeeds.

What I’ve tried:

Double-checked variable name and value (no typos, no extra spaces).
Set variable for all environments.
Cleared build cache and redeployed.
Removed and re-added the variable.
Used both direct and variable assignment in code.
Tested with a minimal build and confirmed the error is only when ClerkProvider is used.
Local build works perfectly with vercel env pull .env.local and vercel build.

Any help or insight would be greatly appreciated!
Thank you!

you might need to pass it yourself to the ClerkProvider component:

...      
        <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>    
                <body>{children}</body>    
          </ClerkProvider>

this is assuming it's inside a client component