Load different .env.* without re-build

Target

• Build once but able to load different .env file;
• The loaded .env values are available in the whole project;
• The .env values are accessible in both server and client side rendering.

Files & Folders

• Root files

  • .env.development for local development yarn dev
  • .env.test for staging yarn start
  • .env.production for production yarn start:prod

• src/util/getEnv.ts gets env values from server side

  • The values cover Nodejs env and those from specific .env.* file

• src/provider/env.tsx passing env context for client side rendering

Usage

Server Side

Use util function getEnv() directly

// see src/app/page.tsx
import getEnv from '@/util/getEnv';

const env = getEnv();

Client Side

Use context or window[namespace] passed from src/app/layout.tsx

// see src/app/client/page.tsx
import { useContext } from 'react';
import { EnvContext } from "../../provider/env";

const env = useContext(EnvContext);

// or
useEffect(() => {
    console.log('env from window', window[ENV_PREFIX]);
}, []);

Reference

Runtime Environment Variables