Vercel Clerk publishable key: use CLERK_PUBLISHABLE_KEY

Week 1 Day 3 | Clerk on Next.js Pages Router + vercel --prod

The problem

Day 3 tells you to add:

vercel env add NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

Vercel Clerk often provisions CLERK_PUBLISHABLE_KEY instead. The NEXT_PUBLIC_ name can be blocked or awkward to store as a production env var.

Clerk's browser SDK only auto-reads NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY. If that name is missing, clerk-js never loads. useAuth().isLoaded stays false, and the homepage CTAs never appear after vercel --prod.

The fix

Keep the Vercel env var as CLERK_PUBLISHABLE_KEY. Then expose it to the browser at build time. But it needs change in next.config.ts as:

import type { NextConfig } from "next";

const clerkPublishableKey =
  process.env.CLERK_PUBLISHABLE_KEY ||
  process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY ||
  '';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  env: {
    CLERK_PUBLISHABLE_KEY: clerkPublishableKey,
  },
};

export default nextConfig;

env in next.config.ts inlines the value into the client bundle. Next.js will not do that for a non-NEXT_PUBLIC_ var on its own. so change the _app.tsx:

2. pages/_app.tsx

import { ClerkProvider } from '@clerk/nextjs';
import type { AppProps } from 'next/app';
import '../styles/globals.css';

export default function MyApp({ Component, pageProps }: AppProps) {
  const publishableKey = process.env.CLERK_PUBLISHABLE_KEY;

  return (
  );
}

Note: DO NOT add "use client" to _app.tsx. That can make Clerk pick the App Router provider on Pages Router.

3. Vercel env vars

vercel env add CLERK_PUBLISHABLE_KEY
vercel env add CLERK_SECRET_KEY
vercel env add CLERK_JWKS_URL

Then rebuild:

vercel --prod

NEXT_PUBLIC_ values are baked in at build time. Changing the env var without a new deploy will not fix production.

How to tell it worked Production HTML still has Sign In / Get Started Free Browser console shows Clerk loaded with development keys (for pk_test_) After sign-in, the product CTA appears