Environment Variables

Environment variables in next.js can be defined in .env files.

Next.js provides the following hierarchy based on NODE_ENV:

.env.$(NODE_ENV).local
.env.local (Not checked when NODE_ENV is test.)
.env.$(NODE_ENV)
.env

info

The NODE_ENV variable only allows the values production, development and test.

The recommended way to setup environment variables in Elevate Web is to use

• .env.production: Used for production builds
• .env.development: Used for dev work
• .env.test: Used when tests are run

Those files should be added in source control. If you need to override the values temporary for local work, you can create your own .env.local file

warning

Files ending with .local should NOT be committed to source control and should be used only for local development.

Usage of environment variables

In javascript/typescript you can access the environment variable through the global variable process.env.

const my_var = process.env.MY_VAR;

Next.js can expand variables at compile time if used in the format process.env.MY_VAR.

This feature can be useful to remove blocks of code when expression is resolved at compile time.

if (process.env.MY_VAR === 'value') {
  // ...
}

If the value of process.env.MY_VAR is not equal to the string 'value'. The code will be optimized by removing the block of code.

This behavior can be prevented by access the value dynamically

const { MY_VAR } = process.env;
// or
const key = 'MY_VAR'
const my_var = process.env[key];

Using environment variables in the Client

Next.js limits the environment variables exposed client components. To access an environment variable from the client the variable needs to be prefixed with NEXT_PUBLIC_.

Available environment variables

Elevate Web implements the following environment variables

Variable	Description
DETAIL_IMAGE_QUALITY	Value for DetailImage component
BASE_URL	Url used by the application
appIdGidEasterEggActive	Fallback for feature flag. Enable easter egg in appIdGid
debugOverlayVisible	Fallback for feature flag. Enables debug overlay

note

Variables that work as a fallback for feature flags need to be named equally to the feature flag.

Adding strongly types environment variables

New environment variables can have type information by declaring them in environment-variables.d.ts. Additional information can be added as jsdoc comments.