NextJS returning environment variables as undefined in pages

Question

I am trying to get my environment variables in one of my pages, but it is always returning undefined. I have no issues with accessing the variables in api folder but in pages/page.tsx it doesn't return the variables.

I access my variables using

const SECRET = process.env.SECRET from my .env file.

How can I fix this issue?

peter · Accepted Answer · 2021-05-05 19:42:09Z

2

I believe the preferred way to implement what you're trying to do is to use env variables on the server side within getServerSideProps()/getStaticProps() methods. This should work as expected without any tricks.

But if you want to access env variables on the client you have to prefix your variable with NEXT_PUBLIC_

Please refer to official docs:

By default all environment variables loaded through .env.local are only available in the Node.js environment, meaning they won't be exposed to the browser.

In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_. For example:

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

edited May 5, 2021 at 19:42

answered May 5, 2021 at 18:43

peter

5932 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ashes999 Over a year ago

This will be exposed to users. if I want to load it in my pages I need to put them in env.local?

peter Over a year ago

@ashes999 Using .env file should work as well. I've also updated answer with more information

Collectives™ on Stack Overflow

NextJS returning environment variables as undefined in pages

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related