env
Since the release of Next.js 9.4 we now have a more intuitive and ergonomic experience for adding environment variables. Give it a try!
Examples
With env
Good to know: environment variables specified in this way will always be included in the JavaScript bundle, prefixing the environment variable name with NEXT_PUBLIC_ only has an effect when specifying them through the environment or .env files.
To add environment variables to the JavaScript bundle, open next.config.js and add the env config:
next.config.js module.exports = {
  env: {
    customKey: 'my-value',
  },
}
Now you can access process.env.customKey in your code. For example:
 function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}
 
export default Page