Note: You are viewing the new Next.js documentation. The old docs are still available here.

Environment Variables


To add environment variables to the JavaScript bundle, open next.config.js and add the env config:

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

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.

For example, the following line:

return <h1>The value of customKey is: {process.env.customKey}</h1>

Will end up being:

return <h1>The value of customKey is: {'my-value'}</h1>

Related permalink