---
description: Learn to add and access environment variables in your Next.js application at build time.
---
# Environment Variables
> Since the release of [Next.js 9.4](https://nextjs.org/blog/next-9-4) we now have a more intuitive and ergonomic experience for [adding environment variables](/docs/basic-features/environment-variables.md). Give it a try!
Examples
To add environment variables to the JavaScript bundle, open `next.config.js` and add the `env` config:
```js
module.exports = {
env: {
customKey: 'my-value',
},
}
```
Now you can access `process.env.customKey` in your code. For example:
```jsx
function Page() {
return The value of customKey is: {process.env.customKey}
}
export default Page
```
Next.js will replace `process.env.customKey` with `'my-value'` at build time. Trying to destructure `process.env` variables won't work due to the nature of webpack [DefinePlugin](https://webpack.js.org/plugins/define-plugin/).
For example, the following line:
```jsx
return The value of customKey is: {process.env.customKey}
```
Will end up being:
```jsx
return The value of customKey is: {'my-value'}
```
## Related