CODEWITHSUNDEEP
environment-variablesnext.jsvercel
cbdeveloper
cbdeveloper

Reputation: 31335

Using .env.local file. Getting process.env.NEXT_PUBLIC_VERCEL_ENV is undefined on client

I'm using Next.js with Vercel. This is my .env.local file:

# Created by Vercel CLI
VERCEL="1"
VERCEL_ENV="development"
VERCEL_URL=""
VERCEL_GIT_PROVIDER=""
VERCEL_GIT_REPO_SLUG=""
VERCEL_GIT_REPO_OWNER=""
VERCEL_GIT_REPO_ID=""
VERCEL_GIT_COMMIT_REF=""
VERCEL_GIT_COMMIT_SHA=""
VERCEL_GIT_COMMIT_MESSAGE=""
VERCEL_GIT_COMMIT_AUTHOR_LOGIN=""
VERCEL_GIT_COMMIT_AUTHOR_NAME=""

I have a component that is trying to access: process.env.NEXT_PUBLIC_VERCEL_ENV to make sure it is on development environment.

This is what I'm getting when running npm run dev.

Logs from the server:

enter image description here

The logs above make perfect sense. Since it's running on the local server to render the pages.

But when my client code tries to do the same, I'm getting:

enter image description here

This is how I'm trying to acess it:

console.log(`process.env.NEXT_PUBLIC_VERCEL_ENV: ${JSON.stringify(process.env.NEXT_PUBLIC_VERCEL_ENV)}`);
console.log(`process.env.VERCEL_ENV: ${JSON.stringify(process.env.VERCEL_ENV)}`);

On client, the VERCEL_ENV should be undefined, but NEXT_PUBLIC_VERCEL_ENV should be development, right?

What could be happening?

UPDATE

I even tried to add NEXT_PUBLIC_VERCEL_ENV="development" to the .env.local file. But so far, the result is the same.

Upvotes: 1

Views: 4146

Answers (2)

WebTarantul
WebTarantul

Reputation: 11

Make sure Automatically expose System Environment Variables is checked in your Project Settings.

System Environment Variables

More info in docs

Upvotes: 1

Dipankar Maikap
Dipankar Maikap

Reputation: 477

NEXT_PUBLIC_VERCEL_ENV="development"

You will have access to this everywhere (in the browser and Server).

VERCEL_ENV="development"

You only have access to this in the server, in the browser it will show undefined.

Please note after you add or make any changes in the .env.local file you have to restart your server otherwise it will show undefined if you console.log the variables.

Upvotes: 6

Related Questions