Setting Up Environment Variables in NextJS

There are several approaches to set up Environment Variables in Next.js:

Using Environment Variables (`process.env`):

NextJS supports reading environment variables using `process.env` which allows you to define different values for different environments.

• Approach: Define environment-specific variables directly in the host environment (e.g., local machine, staging server, production server) or through tools like `.env` files.

const apiUrl = process.env.NEXT_PUBLIC_API_URL;

`.env` Files for Environment-Specific Configuration:

Use different `.env` files for each environment (development, staging, production) to store environment-specific configuration.

• Approach: Create `.env.development`, `.env.staging`,`.env.production` files to define environment-specific variables.

// .env.development
API_URL=http://localhost:3000/api

// .env.production
API_URL=https://api.example.com

Conditional Logic Based on Environment:

Use conditional logic to determine environment-specific behavior or configurations.

• Approach: Check the current environment (process.env.NODE_ENV) and conditionally set variables or configurations.

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'http://localhost:3000/api';

Configuration Modules or Files:

Create separate configuration modules or files (`config.js`, `config.json`) for different environments and import the appropriate configuration based on the environment.

• Approach: Define environment-specific configurations in separate files and import the correct configuration module.

const config = {
  development: {
    apiUrl: 'http://localhost:3000/api',
  },
  production: {
    apiUrl: 'https://api.example.com',
  },
};

module.exports = config[process.env.NODE_ENV];

Using NextJS `publicRuntimeConfig` and `serverRuntimeConfig`

Leverage NextJS specific runtime configuration options to manage environment-specific variables.

• Approach: Use `publicRuntimeConfig` for variables that are exposed to the client-side and `serverRuntimeConfig` for variables that are only accessible on the server-side.

module.exports = {
  publicRuntimeConfig: {
    apiUrl: process.env.API_URL,
  },
};

Environment variables in NextJS are fundamental settings or values that can change based on the application’s deployment environment. They are crucial for separating sensitive information, such as API keys, database credentials, or configuration details, from the application codebase.

In a NextJS project, managing environment variables is essential for handling sensitive information and configuring applications across different deployment environments.