Environment Variables और next.config
Environment variables क्यों?
Passwords, API keys और URLs आपके laptop और live server पर अलग होते हैं। इन्हें code में लिखना खतरनाक (GitHub पर पहुँच जाते हैं) और inflexible है। Environment variables इन्हें code से बाहर रखते हैं।
Hard-coded
- password: 'Str0ng#Pass'
- GitHub पर push
- हर जगह एक ही value
- Leak = hack
Environment variable
- password: process.env.DB_PASSWORD
- हर machine पर अलग रहता है
- हर environment में अलग
- बदलना आसान
.env files और उनका order
.env # defaults for all environments (can be committed if no secrets) .env.development # only for npm run dev .env.production # only for next build / next start .env.local # YOUR secrets – overrides the above – never commit .env.example # template for teammates (committed, fake values)
# .env.local DB_PASSWORD=Str0ng#Pass SESSION_SECRET=ZmJ4b3Y5c2VjcmV0LWtleS1jaGFuZ2UtbWUtMTIzNDU2 SITE_URL=https://edusite.in NEXT_PUBLIC_WHATSAPP=919000000000
Server-only variables
// lib/site.js (EduSite) — read on the server
export const site = {
name: 'EduSite',
url: process.env.SITE_URL || 'http://localhost:3000',
// …
}
// lib/db.js
password: process.env.DB_PASSWORD // undefined in the browser – safeNEXT_PUBLIC_ variables
सिर्फ़ NEXT_PUBLIC_ से शुरू होने वाले variables Client Components में मिलते हैं। Next.js उनकी value JavaScript bundle में copy कर देता है, इसलिए कोई भी उन्हें देख सकता है — वहाँ secrets कभी न रखें।
// components/WhatsAppButton.jsx — Client Component
'use client'
export default function WhatsAppButton() {
const number = process.env.NEXT_PUBLIC_WHATSAPP // replaced with "919000000000" at build
return (
<a href={`https://wa.me/${number}?text=Hi, I want course details`}
target="_blank" rel="noopener" className="btn">
💬 Chat on WhatsApp
</a>
)
}Build time vs runtime
| कहाँ use | Value कब पढ़ी जाती है | बदलने के बाद… |
|---|---|---|
| Client code में NEXT_PUBLIC_ | Build | Rebuild ज़रूरी |
| Static (○/●) pages | Build | Rebuild ज़रूरी |
| Dynamic (ƒ) pages, actions, APIs | हर request | Server restart |
इसीलिए EduSite का README कहता है: npm run build से पहले SITE_URL set करें — sitemap और canonical URLs static हैं।
next.config.mjs समझें
// next.config.mjs (EduSite)
/** @type {import('next').NextConfig} */
const nextConfig = {
// Simple permanent redirects (no code needed)
async redirects() {
return [{ source: '/home', destination: '/', permanent: true }]
},
images: {
qualities: [75, 90], // quality values the site uses
},
}
export default nextConfigconst nextConfig = {
reactStrictMode: true,
poweredByHeader: false, // hide "X-Powered-By: Next.js"
trailingSlash: false, // /about not /about/
output: 'standalone', // small server bundle for VPS/Docker
async rewrites() {
return [{ source: '/docs/:path*', destination: 'https://docs.example.com/:path*' }]
},
async headers() {
return [{
source: '/(.*)',
headers: [
{ key: 'X-Content-Type-Options', value: 'nosniff' },
{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
{ key: 'Permissions-Policy', value: 'camera=(), microphone=()' },
],
}]
},
}Config में security headers
ऊपर का headers() function हर response में सुरक्षा वाले HTTP headers जोड़ता है — सस्ता security और "best practices" score boost।
आम गलतियाँ
- Secret पर
NEXT_PUBLIC_prefix → पूरी दुनिया को दिख गया। - Hosting dashboard पर variables जोड़ना भूलना (Vercel → Settings → Environment Variables)।
- Quotes और spaces:
KEY = "value"→KEY=valueलिखें। - next.config edit करके dev restart न करना → config सिर्फ़ start पर पढ़ा जाता है।
सारांश
- Secrets
.env.localमें; template.env.exampleमें। - सिर्फ़
NEXT_PUBLIC_*browser तक पहुँचता है, build time पर inline। next.config.mjs: redirects, rewrites, headers, images, output।
NEXT_PUBLIC_WHATSAPP और floating WhatsApp button जोड़िए। तीनों security headers जोड़कर DevTools → Network → Response Headers में check कीजिए।
