[{"data":1,"prerenderedAt":409},["ShallowReactive",2],{"blog-how-to/vercel-env-vars":3},{"id":4,"title":5,"body":6,"category":390,"date":391,"dateModified":391,"description":392,"draft":393,"extension":394,"faq":395,"featured":393,"headerVariant":396,"image":395,"keywords":395,"meta":397,"navigation":398,"ogDescription":399,"ogTitle":395,"path":400,"readTime":395,"schemaOrg":401,"schemaType":402,"seo":403,"sitemap":404,"stem":405,"tags":406,"twitterCard":407,"__hash__":408},"blog/blog/how-to/vercel-env-vars.md","How to Set Up Vercel Environment Variables",{"type":7,"value":8,"toc":368},"minimark",[9,13,17,21,27,32,52,71,108,174,194,198,201,205,211,218,222,228,232,238,242,248,252,256,262,266,269,291,295,301,331,349],[10,11],"category-badge",{"category":12},"How-To Guide",[14,15,5],"h1",{"id":16},"how-to-set-up-vercel-environment-variables",[18,19,20],"p",{},"Securely configure secrets for your Vercel deployments",[22,23,24],"tldr",{},[18,25,26],{},"TL;DR:\nGo to Project Settings → Environment Variables in your Vercel dashboard. Add your key-value pairs and select which environments (Production, Preview, Development) should have access. Redeploy to apply changes. Use the Vercel CLI to sync variables locally.",[28,29,31],"h2",{"id":30},"step-by-step-setup","Step-by-Step Setup",[33,34,36,41],"step",{"number":35},"1",[37,38,40],"h3",{"id":39},"open-your-vercel-project","Open your Vercel project",[18,42,43,44,51],{},"Go to ",[45,46,50],"a",{"href":47,"rel":48},"https://vercel.com/dashboard",[49],"nofollow","vercel.com/dashboard"," and select your project. You need to be the project owner or have the right permissions to manage environment variables.",[33,53,55,59],{"number":54},"2",[37,56,58],{"id":57},"navigate-to-environment-variables","Navigate to Environment Variables",[18,60,61,62,66,67,70],{},"Click on ",[63,64,65],"strong",{},"Settings"," in the top navigation, then select ",[63,68,69],{},"Environment Variables"," from the left sidebar.",[33,72,74,78,81],{"number":73},"3",[37,75,77],{"id":76},"add-a-new-variable","Add a new variable",[18,79,80],{},"Enter your variable:",[82,83,84,96,102],"ul",{},[85,86,87,90,91,95],"li",{},[63,88,89],{},"Key:"," The variable name (e.g., ",[92,93,94],"code",{},"STRIPE_SECRET_KEY",")",[85,97,98,101],{},[63,99,100],{},"Value:"," The secret value",[85,103,104,107],{},[63,105,106],{},"Environment:"," Select which environments need this variable",[33,109,111,115,118],{"number":110},"4",[37,112,114],{"id":113},"choose-target-environments","Choose target environments",[18,116,117],{},"Vercel has three environment types:",[119,120,121,137],"table",{},[122,123,124],"thead",{},[125,126,127,131,134],"tr",{},[128,129,130],"th",{},"Environment",[128,132,133],{},"When Used",[128,135,136],{},"Recommended For",[138,139,140,152,163],"tbody",{},[125,141,142,146,149],{},[143,144,145],"td",{},"Production",[143,147,148],{},"Your main domain",[143,150,151],{},"Live API keys",[125,153,154,157,160],{},[143,155,156],{},"Preview",[143,158,159],{},"PR preview deployments",[143,161,162],{},"Test API keys",[125,164,165,168,171],{},[143,166,167],{},"Development",[143,169,170],{},"vercel dev locally",[143,172,173],{},"Local dev keys",[33,175,177,181,184],{"number":176},"5",[37,178,180],{"id":179},"redeploy-your-application","Redeploy your application",[18,182,183],{},"Environment variables only take effect after a new deployment:",[185,186,191],"pre",{"className":187,"code":189,"language":190},[188],"language-text","# Via CLI\nvercel --prod\n\n# Or push a commit to trigger auto-deploy\ngit commit --allow-empty -m \"Apply env vars\"\ngit push\n","text",[92,192,189],{"__ignoreMap":193},"",[28,195,197],{"id":196},"using-the-vercel-cli","Using the Vercel CLI",[18,199,200],{},"The Vercel CLI offers powerful tools for managing environment variables:",[37,202,204],{"id":203},"pull-variables-for-local-development","Pull variables for local development",[185,206,209],{"className":207,"code":208,"language":190},[188],"# Pull all environment variables to .env.local\nvercel env pull .env.local\n",[92,210,208],{"__ignoreMap":193},[18,212,213,214,217],{},"This creates a ",[92,215,216],{},".env.local"," file with all your Development environment variables.",[37,219,221],{"id":220},"add-variables-via-cli","Add variables via CLI",[185,223,226],{"className":224,"code":225,"language":190},[188],"# Add a variable (interactive prompts for value and environments)\nvercel env add STRIPE_SECRET_KEY\n\n# Add with value directly\necho \"sk_test_xxxxx\" | vercel env add STRIPE_SECRET_KEY production\n",[92,227,225],{"__ignoreMap":193},[37,229,231],{"id":230},"list-all-variables","List all variables",[185,233,236],{"className":234,"code":235,"language":190},[188],"vercel env ls\n",[92,237,235],{"__ignoreMap":193},[37,239,241],{"id":240},"remove-a-variable","Remove a variable",[185,243,246],{"className":244,"code":245,"language":190},[188],"vercel env rm VARIABLE_NAME\n",[92,247,245],{"__ignoreMap":193},[28,249,251],{"id":250},"best-practices","Best Practices",[37,253,255],{"id":254},"use-different-keys-for-different-environments","Use different keys for different environments",[185,257,260],{"className":258,"code":259,"language":190},[188],"# Production (live keys)\nSTRIPE_SECRET_KEY=sk_live_xxxxx  → Production only\n\n# Preview/Development (test keys)\nSTRIPE_SECRET_KEY=sk_test_xxxxx  → Preview + Development\n",[92,261,259],{"__ignoreMap":193},[37,263,265],{"id":264},"sensitive-vs-non-sensitive","Sensitive vs Non-Sensitive",[18,267,268],{},"Vercel marks variables as \"Sensitive\" by default, which hides the value after saving. You can toggle this when adding a variable.",[270,271,272,275,285],"warning-box",{},[18,273,274],{},"Never expose secret keys to the browser",[18,276,277,278,281,282,284],{},"In Next.js, only variables prefixed with ",[92,279,280],{},"NEXT_PUBLIC_"," are available in browser code. Never prefix secret keys with ",[92,283,280],{},".",[185,286,289],{"className":287,"code":288,"language":190},[188],"# WRONG - Exposed to browser\nNEXT_PUBLIC_STRIPE_SECRET=sk_live_xxxxx\n\n# CORRECT - Server-side only\nSTRIPE_SECRET_KEY=sk_live_xxxxx\n\n# CORRECT - Safe for browser (publishable key)\nNEXT_PUBLIC_STRIPE_PUBLISHABLE=pk_live_xxxxx\n",[92,290,288],{"__ignoreMap":193},[28,292,294],{"id":293},"common-variables-for-vercel-projects","Common Variables for Vercel Projects",[185,296,299],{"className":297,"code":298,"language":190},[188],"# Database\nDATABASE_URL=postgresql://...\nDIRECT_URL=postgresql://...  # For Prisma\n\n# Authentication\nNEXTAUTH_SECRET=random-32-char-string\nNEXTAUTH_URL=https://your-domain.com\n\n# Third-party services\nSTRIPE_SECRET_KEY=sk_live_xxxxx\nOPENAI_API_KEY=sk-xxxxx\nRESEND_API_KEY=re_xxxxx\n\n# Supabase\nNEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co\nNEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...\nSUPABASE_SERVICE_ROLE_KEY=eyJ...\n",[92,300,298],{"__ignoreMap":193},[302,303,304,315,321],"faq-section",{},[305,306,308],"faq-item",{"question":307},"Do I need to redeploy after changing environment variables?",[18,309,310,311,314],{},"Yes. Environment variables are baked into the deployment at build time. You must trigger a new deployment for changes to take effect. Use ",[92,312,313],{},"vercel --prod"," or push a commit.",[305,316,318],{"question":317},"Can team members see environment variable values?",[18,319,320],{},"Team members with the right permissions can view and edit variables. Use \"Sensitive\" marking to hide values after they're saved. Consider using Vercel's integration with secret managers for extra security.",[305,322,324],{"question":323},"How do I use environment variables in vercel.json?",[18,325,326,327,330],{},"You can reference environment variables in vercel.json using the ",[92,328,329],{},"$"," syntax, but only for specific fields like redirects. For security reasons, you cannot expose arbitrary secrets this way.",[18,332,333,336,340,341,340,345],{},[63,334,335],{},"Related guides:",[45,337,339],{"href":338},"/blog/how-to/environment-variables","Environment Variables Guide"," ·\n",[45,342,344],{"href":343},"/blog/how-to/netlify-env-vars","Netlify Environment Variables",[45,346,348],{"href":347},"/blog/how-to/hide-api-keys","How to Hide API Keys",[350,351,352,358,363],"related-articles",{},[353,354],"related-card",{"description":355,"href":356,"title":357},"Step-by-step guide to securing Firebase with authentication-based security rules. Protect your Firestore and Realtime Da","/blog/how-to/firebase-auth-rules","How to Write Firebase Auth Rules",[353,359],{"description":360,"href":361,"title":362},"Step-by-step guide to setting up Firebase Authentication securely. Configure providers, integrate security rules, verify","/blog/how-to/firebase-auth","How to Set Up Firebase Auth Securely",[353,364],{"description":365,"href":366,"title":367},"Complete guide to Firebase Firestore and Realtime Database security rules. Learn rule syntax, common patterns, testing, ","/blog/how-to/firebase-security-rules","How to Write Firebase Security Rules",{"title":193,"searchDepth":369,"depth":369,"links":370},2,[371,379,385,389],{"id":30,"depth":369,"text":31,"children":372},[373,375,376,377,378],{"id":39,"depth":374,"text":40},3,{"id":57,"depth":374,"text":58},{"id":76,"depth":374,"text":77},{"id":113,"depth":374,"text":114},{"id":179,"depth":374,"text":180},{"id":196,"depth":369,"text":197,"children":380},[381,382,383,384],{"id":203,"depth":374,"text":204},{"id":220,"depth":374,"text":221},{"id":230,"depth":374,"text":231},{"id":240,"depth":374,"text":241},{"id":250,"depth":369,"text":251,"children":386},[387,388],{"id":254,"depth":374,"text":255},{"id":264,"depth":374,"text":265},{"id":293,"depth":369,"text":294},"how-to","2026-01-27","Complete guide to configuring environment variables in Vercel. Set up secrets for production, preview, and development environments with proper security.",false,"md",null,"yellow",{},true,"Complete guide to Vercel environment variables configuration.","/blog/how-to/vercel-env-vars","[object Object]","HowTo",{"title":5,"description":392},{"loc":400},"blog/how-to/vercel-env-vars",[],"summary_large_image","57F3AahkXX1S41qDJ49foOEjTR5rmQx4cuAwMPom4KM",1775843927179]