Make environment variables customizable!

[AlmazHecker]

Goals

Flexibility

Background

Reason: For an application that has multiple environment modes, it is not possible to load environments for all of them.

For example:

I have an app with two modes: production and development. Both modes must be deployed with environments based on their respective modes.

Whenever I build a Next.js app, it loads the environment from the .env.production file.

Proposal

it would be cool if we could load envs like this:

"scripts": {
"dev": "next dev",
"build": "next build --env=.env.development",
"build:prod": "next build --env=.env.production*",
"build:staging": "next build --env=.env.staging*",
"start": "next start",
},

[leerob]

This should be solved with the App Router. We can safely read environment variables on the server during dynamic rendering. This allows you to use a singular Docker image that can be promoted through multiple environments with different values. So you could use whatever environment you want. Build once, run anywhere.

import { unstable_noStore as noStore } from 'next/cache';
 
export default function Component() {
  noStore(); // Opt-into dynamic rendering
  // This value will be evaluated at runtime
  const value = process.env.MY_VALUE
  ...
}

You can also opt into dynamic rendering in other ways, like using cookies or headers, but this is an example.