process.env.MY_VAR returnerar undefined i klientkomponenter

Miljövariabler utan `NEXT_PUBLIC_`-prefix är bara tillgängliga på servern, aldrig i webbläsaren.

Förklaring

Next.js exponerar som standard inga miljövariabler till klientkod. Att skicka alla variabler till webbläsaren vore en säkerhetsrisk: API-nycklar, databasanslutningar och hemligheter skulle läcka ut.

Endast variabler med prefixet NEXT_PUBLIC_ bundlas in i klientkoden. Det är ett medvetet val som kräver att du explicit markerar vilka variabler som är säkra att exponera publikt.

I server-komponenter, Server Actions och Route Handlers är alla variabler tillgängliga via process.env utan prefix.

Vanliga orsaker

En klientkomponent ('use client') läser process.env.MY_VAR utan NEXT_PUBLIC_-prefix. Variabeln finns i .env.local men saknar prefixet.

Lösning

Lägg till NEXT_PUBLIC_-prefixet för variabler som ska vara tillgängliga på klienten:

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com
DB_PASSWORD=secret123  # exponeras aldrig på klienten
const apiUrl = process.env.NEXT_PUBLIC_API_URL; // fungerar
const password = process.env.DB_PASSWORD; // alltid undefined på klienten

Starta om dev-servern efter att .env-filer ändrats. Next.js läser dem bara vid uppstart.