Estoy usando nextjs 11.1 y tengo 2 archivos env.development y .env.production . A continuación se muestran los contenidos que tienen.

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

Y

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

Dentro de mi index.tsx estoy tratando de acceder a estas variables pero .env está vacío.

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

¿Dónde me estoy equivocando y cómo puedo acceder a estas variables?