Vercel Not Injecting Clerk Publishable Key at Build Time

Help
1

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:

  1. Push code to GitHub (triggers Vercel build).
  2. Build fails with:
    Error: Missing NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
    or
    Error: @clerk/clerk-react: Missing publishableKey.
  3. 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!

3

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