In my Next.js app I've created a .env file with a variable named API_KEY.
Destructuring the value results in undefined, as shown here:
const { API_KEY } = process.env; // = undefined
const key = process.env.API_KEY; // = 'value'
Can someone please explain why process.env isn't populated with the correct value here?
From the docs:
Note: In order to keep server-only secrets safe, Next.js replaces
process.env.*with the correct values at build time. This means thatprocess.envis not a standard JavaScript object, so you’re not able to use object destructuring.
and for client-side React components
The value will be inlined into JavaScript sent to the browser because of the
NEXT_PUBLIC_prefix. This inlining occurs at build time, so your variousNEXT_PUBLIC_envs need to be set when the project is built.