Generally you'll want to use build-time environment variables to provide your configuration. The reason for this is that runtime configuration adds rendering / initialization overhead and is incompatible with Automatic Static Optimization.
To add runtime configuration to your app open
next.config.js and add the
Place any server-only runtime config under
Anything accessible to both client and server-side code should be under
A page that relies on
getServerSidePropsor your application must have a Custom App with
getInitialPropsto opt-out of Automatic Static Optimization. Runtime configuration won't be available to any page (or component in a page) without being server-side rendered.
To get access to the runtime configs in your app use
next/config, like so: