[{"data":1,"prerenderedAt":507},["ShallowReactive",2],{"blog-how-to/environment-variables":3},{"id":4,"title":5,"body":6,"category":487,"date":488,"dateModified":489,"description":490,"draft":491,"extension":492,"faq":493,"featured":491,"headerVariant":494,"image":493,"keywords":493,"meta":495,"navigation":496,"ogDescription":497,"ogTitle":493,"path":498,"readTime":493,"schemaOrg":499,"schemaType":500,"seo":501,"sitemap":502,"stem":503,"tags":504,"twitterCard":505,"__hash__":506},"blog/blog/how-to/environment-variables.md","How to Use Environment Variables - Complete Guide",{"type":7,"value":8,"toc":467},"minimark",[9,13,18,22,28,33,36,49,53,87,103,123,127,131,134,140,146,150,157,163,167,174,180,184,191,197,203,207,263,267,270,308,312,315,377,381,384,390,428,448],[10,11],"category-badge",{"category":12},"How-To Guide",[14,15,17],"h1",{"id":16},"how-to-use-environment-variables","How to Use Environment Variables",[19,20,21],"p",{},"Complete guide for any platform",[23,24,25],"tldr",{},[19,26,27],{},"TL;DR:\nStore secrets in\n.env.local\nfiles locally, access them via\nprocess.env.VARIABLE_NAME\nin your code, and configure them in your hosting platform's dashboard for production. Never commit .env files to git.",[29,30,32],"h2",{"id":31},"what-are-environment-variables","What Are Environment Variables?",[19,34,35],{},"Environment variables are key-value pairs stored outside your code that configure how your application runs. They let you:",[37,38,39,43,46],"ul",{},[40,41,42],"li",{},"Keep secrets (API keys, passwords) out of your codebase",[40,44,45],{},"Use different values for development, staging, and production",[40,47,48],{},"Change configuration without modifying code",[29,50,52],{"id":51},"basic-setup","Basic Setup",[54,55,57,62,70,80],"step",{"number":56},"1",[58,59,61],"h3",{"id":60},"create-your-env-file","Create your .env file",[19,63,64,65,69],{},"Create a file named ",[66,67,68],"code",{},".env.local"," in your project root:",[71,72,77],"pre",{"className":73,"code":75,"language":76},[74],"language-text","# .env.local\nDATABASE_URL=postgresql://localhost:5432/mydb\nSTRIPE_SECRET_KEY=sk_test_xxxxx\nOPENAI_API_KEY=sk-xxxxx\nNEXT_PUBLIC_API_URL=https://api.example.com\n","text",[66,78,75],{"__ignoreMap":79},"",[19,81,82,83,86],{},"The format is ",[66,84,85],{},"KEY=value"," with no spaces around the equals sign.",[54,88,90,94,97],{"number":89},"2",[58,91,93],{"id":92},"add-to-gitignore","Add to .gitignore",[19,95,96],{},"Make sure .env files are never committed:",[71,98,101],{"className":99,"code":100,"language":76},[74],"# .gitignore\n.env\n.env.local\n.env.*.local\n",[66,102,100],{"__ignoreMap":79},[54,104,106,110,117],{"number":105},"3",[58,107,109],{"id":108},"access-in-your-code","Access in your code",[19,111,112,113,116],{},"Use ",[66,114,115],{},"process.env"," to read values:",[71,118,121],{"className":119,"code":120,"language":76},[74],"// In Node.js / Next.js server-side code\nconst apiKey = process.env.STRIPE_SECRET_KEY;\n\n// Validate required variables\nif (!process.env.DATABASE_URL) {\n  throw new Error('DATABASE_URL is required');\n}\n",[66,122,120],{"__ignoreMap":79},[29,124,126],{"id":125},"framework-specific-guides","Framework-Specific Guides",[58,128,130],{"id":129},"nextjs","Next.js",[19,132,133],{},"Next.js has built-in support for .env files:",[71,135,138],{"className":136,"code":137,"language":76},[74],"# .env.local (for development)\nDATABASE_URL=postgresql://localhost/mydb\n\n# Variables prefixed with NEXT_PUBLIC_ are exposed to the browser\nNEXT_PUBLIC_API_URL=https://api.example.com\n\n# Variables WITHOUT the prefix stay server-side only\nSTRIPE_SECRET_KEY=sk_test_xxxxx\n",[66,139,137],{"__ignoreMap":79},[141,142,143],"warning-box",{},[19,144,145],{},"Important:\nOnly use\nNEXT_PUBLIC_\nfor values that are safe to expose publicly. Never prefix secret keys with\nNEXT_PUBLIC_\n.",[58,147,149],{"id":148},"vite-react-vue-svelte","Vite (React, Vue, Svelte)",[19,151,152,153,156],{},"Vite uses ",[66,154,155],{},"VITE_"," prefix for client-exposed variables:",[71,158,161],{"className":159,"code":160,"language":76},[74],"# .env.local\nVITE_API_URL=https://api.example.com\nVITE_APP_NAME=MyApp\n\n# Access in code\nconst apiUrl = import.meta.env.VITE_API_URL;\n",[66,162,160],{"__ignoreMap":79},[58,164,166],{"id":165},"create-react-app","Create React App",[19,168,169,170,173],{},"CRA uses ",[66,171,172],{},"REACT_APP_"," prefix:",[71,175,178],{"className":176,"code":177,"language":76},[74],"# .env.local\nREACT_APP_API_URL=https://api.example.com\n\n# Access in code\nconst apiUrl = process.env.REACT_APP_API_URL;\n",[66,179,177],{"__ignoreMap":79},[58,181,183],{"id":182},"nodejs-express-etc","Node.js (Express, etc.)",[19,185,186,187,190],{},"Use the ",[66,188,189],{},"dotenv"," package:",[71,192,195],{"className":193,"code":194,"language":76},[74],"npm install dotenv\n",[66,196,194],{"__ignoreMap":79},[71,198,201],{"className":199,"code":200,"language":76},[74],"// At the very top of your entry file (before other imports)\nimport 'dotenv/config';\n\n// Or the CommonJS way\nrequire('dotenv').config();\n\n// Now process.env has your variables\nconst dbUrl = process.env.DATABASE_URL;\n",[66,202,200],{"__ignoreMap":79},[29,204,206],{"id":205},"environment-variable-naming","Environment Variable Naming",[208,209,210,226],"table",{},[211,212,213],"thead",{},[214,215,216,220,223],"tr",{},[217,218,219],"th",{},"Convention",[217,221,222],{},"Example",[217,224,225],{},"Usage",[227,228,229,241,252],"tbody",{},[214,230,231,235,238],{},[232,233,234],"td",{},"SCREAMING_SNAKE_CASE",[232,236,237],{},"DATABASE_URL",[232,239,240],{},"Standard for env vars",[214,242,243,246,249],{},[232,244,245],{},"Service prefix",[232,247,248],{},"STRIPE_SECRET_KEY",[232,250,251],{},"Group by service",[214,253,254,257,260],{},[232,255,256],{},"Framework prefix",[232,258,259],{},"NEXT_PUBLIC_",[232,261,262],{},"Client exposure control",[29,264,266],{"id":265},"loading-order","Loading Order",[19,268,269],{},"Most frameworks load .env files in this order (later files override earlier):",[271,272,273,279,284,290,296,302],"ol",{},[40,274,275,278],{},[66,276,277],{},".env"," - Base defaults",[40,280,281,283],{},[66,282,68],{}," - Local overrides (gitignored)",[40,285,286,289],{},[66,287,288],{},".env.development"," - Development-specific",[40,291,292,295],{},[66,293,294],{},".env.development.local"," - Local dev overrides",[40,297,298,301],{},[66,299,300],{},".env.production"," - Production-specific",[40,303,304,307],{},[66,305,306],{},".env.production.local"," - Local prod overrides",[29,309,311],{"id":310},"production-configuration","Production Configuration",[19,313,314],{},"In production, don't deploy .env files. Configure variables in your hosting platform:",[208,316,317,327],{},[211,318,319],{},[214,320,321,324],{},[217,322,323],{},"Platform",[217,325,326],{},"Where to Configure",[227,328,329,337,345,353,361,369],{},[214,330,331,334],{},[232,332,333],{},"Vercel",[232,335,336],{},"Project Settings → Environment Variables",[214,338,339,342],{},[232,340,341],{},"Netlify",[232,343,344],{},"Site Settings → Environment Variables",[214,346,347,350],{},[232,348,349],{},"Railway",[232,351,352],{},"Project → Variables",[214,354,355,358],{},[232,356,357],{},"Render",[232,359,360],{},"Service → Environment",[214,362,363,366],{},[232,364,365],{},"Heroku",[232,367,368],{},"Settings → Config Vars",[214,370,371,374],{},[232,372,373],{},"AWS",[232,375,376],{},"Parameter Store or Secrets Manager",[29,378,380],{"id":379},"type-safety-with-typescript","Type Safety with TypeScript",[19,382,383],{},"Create a typed config to catch missing variables early:",[71,385,388],{"className":386,"code":387,"language":76},[74],"// lib/env.ts\nfunction getEnvVar(key: string): string {\n  const value = process.env[key];\n  if (!value) {\n    throw new Error(`Missing environment variable: ${key}`);\n  }\n  return value;\n}\n\nexport const env = {\n  DATABASE_URL: getEnvVar('DATABASE_URL'),\n  STRIPE_SECRET_KEY: getEnvVar('STRIPE_SECRET_KEY'),\n  // Optional variables\n  LOG_LEVEL: process.env.LOG_LEVEL || 'info',\n} as const;\n\n// Usage\nimport { env } from './lib/env';\nconst stripe = new Stripe(env.STRIPE_SECRET_KEY);\n",[66,389,387],{"__ignoreMap":79},[391,392,393,404,414],"faq-section",{},[394,395,397],"faq-item",{"question":396},"Do I need to restart my dev server after changing .env?",[19,398,399,400,403],{},"Yes, in most frameworks. Environment variables are loaded at startup. After changing .env.local, restart your development server with ",[66,401,402],{},"npm run dev",".",[394,405,407],{"question":406},"Can I use quotes in .env files?",[19,408,409,410,413],{},"You can, but it's not always necessary. Use quotes when your value contains spaces or special characters: ",[66,411,412],{},"MESSAGE=\"Hello World\"",". Without spaces, quotes are optional.",[394,415,417],{"question":416},"Why isn't my variable showing up in the browser?",[19,418,419,420,422,423,425,426,403],{},"Most frameworks only expose variables with specific prefixes to the browser for security. In Next.js, use ",[66,421,259],{},". In Vite, use ",[66,424,155],{},". In CRA, use ",[66,427,172],{},[19,429,430,434,439,440,439,444],{},[431,432,433],"strong",{},"Related guides:",[435,436,438],"a",{"href":437},"/blog/how-to/hide-api-keys","How to Hide API Keys"," ·\n",[435,441,443],{"href":442},"/blog/how-to/vercel-env-vars","Vercel Environment Variables",[435,445,447],{"href":446},"/blog/how-to/netlify-env-vars","Netlify Environment Variables",[449,450,451,457,462],"related-articles",{},[452,453],"related-card",{"description":454,"href":455,"title":456},"Step-by-step guide to adding security headers on Netlify. Configure via _headers file, netlify.toml, and Edge Functions.","/blog/how-to/netlify-headers","How to Configure Security Headers on Netlify",[452,458],{"description":459,"href":460,"title":461},"Complete guide to secure NextAuth.js setup. Configure providers, protect API routes, secure sessions with database adapt","/blog/how-to/nextauth-setup","How to Set Up NextAuth.js Securely",[452,463],{"description":464,"href":465,"title":466},"Step-by-step guide to implementing OAuth 2.0 securely. Use PKCE, validate tokens properly, and avoid common OAuth vulner","/blog/how-to/oauth-setup","How to Set Up OAuth Authentication Securely",{"title":79,"searchDepth":468,"depth":468,"links":469},2,[470,471,477,483,484,485,486],{"id":31,"depth":468,"text":32},{"id":51,"depth":468,"text":52,"children":472},[473,475,476],{"id":60,"depth":474,"text":61},3,{"id":92,"depth":474,"text":93},{"id":108,"depth":474,"text":109},{"id":125,"depth":468,"text":126,"children":478},[479,480,481,482],{"id":129,"depth":474,"text":130},{"id":148,"depth":474,"text":149},{"id":165,"depth":474,"text":166},{"id":182,"depth":474,"text":183},{"id":205,"depth":468,"text":206},{"id":265,"depth":468,"text":266},{"id":310,"depth":468,"text":311},{"id":379,"depth":468,"text":380},"how-to","2026-01-13","2026-01-26","Complete guide to environment variables for web apps. Learn how to set up .env files, access variables in code, and configure them across different platforms.",false,"md",null,"yellow",{},true,"Complete guide to environment variables for any platform.","/blog/how-to/environment-variables","[object Object]","HowTo",{"title":5,"description":490},{"loc":498},"blog/how-to/environment-variables",[],"summary_large_image","0uHGTCJQ5KKmvEGDJrgzJQRfp93BSMwlZ922y4lhlNA",1775843928389]