Env, build și deploy

Variabile de mediu sigure, next/image, next/font, build și Vercel.

Actualizat 8 octombrie 2026

Ce înseamnă „production”

Development (npm run dev) e optimizat pentru tine: reîncărcare instantă, mesaje de eroare detaliate. Production (npm run build + deploy) e optimizat pentru useri: cod minificat, pagini pre-generate, cache, CDN. Între ele apar diferențe — de aceea testezi build-ul înainte de deploy.

Variabilele de mediu

Variabilele de mediu sunt configurări care diferă între medii (local, preview, producție) și secrete care nu au ce căuta în cod: URL-ul bazei de date, chei API.

.env.local         → valori locale — NU intră în Git
.env               → valori implicite, fără secrete

Tip	Exemplu	Unde e disponibilă
fără prefix	`DATABASE_URL`	doar pe server — sigur pentru secrete
`NEXT_PUBLIC_`	`NEXT_PUBLIC_SITE_URL`	și în browser — inclusă în bundle la build

Nu pune niciodată un secret într-o variabilă NEXT_PUBLIC_ — oricine o poate citi din JS-ul paginii.

Protecție suplimentară: import 'server-only' în modulele care folosesc secrete (ca shared/api/db.ts din proiect) — build-ul crapă dacă ajung accidental pe client.

Optimizări incluse

Unealtă	Ce face	De ce
`next/image`	redimensionează, convertește în WebP/AVIF, lazy loading	imagini mai mici, fără CLS
`next/font`	descarcă fontul la build și îl servește de pe domeniul tău	fără request extern, fără „salt” de text
`next/dynamic`	încarcă o componentă doar când e nevoie	bundle inițial mai mic
Server Components	zero JS pentru UI ne-interactiv	pagină mai rapidă

<Image src={cover} alt="..." width={800} height={450} priority />   // priority = imaginea principală (LCP)

Build-ul

npm run build     # verifică tipuri, pre-randează, afișează tipul fiecărei rute
npm run start     # rulează build-ul local — verifică aici înainte de deploy

Legenda din output: ○ static, ◐ partial prerender, ƒ dinamic.

Deploy pe Vercel

Push pe GitHub.
vercel.com → Add New Project → importă repo-ul.
Adaugă variabilele de mediu (Settings → Environment Variables), separat pentru Production / Preview.
Fiecare push pe main = producție; fiecare PR = preview URL propriu — vezi Workflow.

Checklist înainte de producție

npm run build fără erori sau warning-uri
variabilele de mediu setate; nimic secret cu NEXT_PUBLIC_
metadata + metadataBase + sitemap
pagini not-found și error
Lighthouse: performance, accessibility, SEO
Server Actions și Route Handlers: auth + validare
imagini prin next/image, fonturi prin next/font

Pe scurt

Testează build + start local înainte de deploy.
Secrete fără prefix; NEXT_PUBLIC_ ajunge în browser.
Vercel: push → deploy; PR → preview.

Surse oficiale

Exerciții

#1Ajunge în browser?

Scrie isExposedToClient(name) — true doar pentru variabilele cu prefix NEXT_PUBLIC_.

⌘ Enter rulează

○NEXT_PUBLIC_SITE_URL → true
○DATABASE_URL → false

#2Env obligatorii

Scrie requireEnv(env, keys) care aruncă Error cu mesajul 'Missing env: A, B' (cheile lipsă sau goale, în ordine) sau returnează un obiect doar cu cheile cerute.