I"m using nextjs 11.1 and I have 2 files env.development and .env.production. Below are the contents they have.

.env.development
NEXT_PUBLIC_API_ENDPOINT=http://localhost:3000/api/

And

.env.production
NEXT_PUBLIC_API_ENDPOINT=https://production.com/api/

Inside my index.tsx I am trying to access these variables but .env is empty.

const Home = () => {
    console.log('process.env: ', process.env); // this returns empty object {}.

  return (
    <>
        HOME
    </>
  )
}

export default Home;

Where am I making mistake and how can I access these variables?