Gestionarea variabilelor de mediu (.env.local și NEXT_PUBLIC_) în Next.js

DB_PASSWORD=secret_server
NEXT_PUBLIC_API_URL=https://api.dexblog.ro

Ce face Gestionarea variabilelor de mediu (.env.local și NEXT_PUBLIC_)

Next.js oferă suport nativ pentru fișiere `.env`, `.env.local`, `.env.development` și `.env.production` fără a necesita pachetul `dotenv`.

Variabilele definite simplu (ex: `DB_PASSWORD=secret`) sunt accesibile EXCLUSIV pe server (Server Components, Route Handlers, Server Actions) și nu ajung niciodată în browserul utilizatorului.

Pentru a expune o variabilă către codul de client din browser, aceasta trebuie obligatoriu prefixată cu NEXT_PUBLIC_ (ex: `NEXT_PUBLIC_SITE_NAME=Dexblog`).

Exemple

Exemplul 1: Definirea variabilelor în fișierul .env.local

Separă cheile secrete de server de adresele publice.

# Variabilă privată de server:
STRIPE_SECRET_KEY=sk_live_99218273645

# Variabilă publică disponibilă și în componentele Client React:
NEXT_PUBLIC_ANALYTICS_ID=G-DEXBLOG2026

Ieșire în terminal

Next.js va injecta NEXT_PUBLIC_ANALYTICS_ID la compilare în bundle-ul client.

Greșeli frecvente

• Adăugarea prefixului ‘NEXT_PUBLIC_’ la chei secrete API, parole de baze de date sau token-uri private, expunându-le public tuturor utilizatorilor în codul sursă al paginii.

Comenzi înrudite

• next.config.js - Fișierul principal de configurare Next.js: Centralizează setările avansate ale compilatorului, modulelor externe, regulilor de redirecționare și mediului de rulare.
• create-next-app - Inițializarea unui proiect nou Next.js: Utilitarul oficial CLI pentru generarea unei aplicații Next.js configurată cu TypeScript, Tailwind CSS și App Router.