What are Environment Variables

These variables will make it possible for your app to behave differently based on the environment they are run in.

How does this work with Next.js?

Next.js has built in support for environment variables.

With this, you can do the following:

• Use .env.local to load environment variables.

• Use NEXT_PUBLIC as a prefix to expose environment variables to the browser.

Loading Environment Variables

The built-in support for loading environment variables makes it possible to load them from .env.local in to process.env.

Example:

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

The above loads:

• process.env.DB_HOST

• process.env.DB_USER

• process.env.DB_PASS

What is loaded in to the Node.js environment will automatically allow you to use them when fetching data methods with Next.js and API routes.

Using it with getStaticProps:

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
    })
  // ...
}

Exposing Environment Variables to the Browser

As we know, environment variables are not exposed in the browser by default since they are only available in the Node.js environment.

You can, however, expose a variable to the browser when the variable is prefixed with NEXT_PUBLIC_.

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijklmnop

The above variable is loaded in to the Node.js environment automatically.

This means it can be used anywhere inside your code thanks to the pubic prefix.

This happens at build time, so the environment variables need to be set when the project is built.

Default Environment Variables

Usually, you will only need and use one .env.local file.

But, sometimes you might want to add defaults for development or production.

This is why you can set different defaults in different files

1. .env sets defaults in all environments.

2. .env.development sets defaults in the development environment

   • Run using next dev.

3. .env.production sets defaults in the production environment

   • Run using next start.

But, .env.local will override all the defaults that are set.

Environment Variables on Vercel

You can configure your environment variables on Vercel in the Project Settings. This is where you should configure all environment variables. You can also download them on to your local device afterwards.

You can also configure Development Environment Variables by pulling them into .env.local for usage on your local machine. This can be done with the command vercel env pull .env.local.

Remember to add a .vercelignore that includes files that should not be uploaded, they are usually the same as the files included inside of the .gitignore file.

Test Environment Variables

There is a third environment available, which is the test environment. You can set defaults for this environment in the .env.test file for the testing environment, it is just not as common as the other two.

This is a useful environment for running tests on certain tools that need to set specific environment vars that are only for testing purposes. These test default values will be loaded when the NODE_ENV is set to test.

The only big difference between test and the other two, development and production, is that with test, .env.local will not be loaded since you expect tests to produce the same results for everyone.