Set public (browser) env vars without NEXT_PUBLIC prefix for other libraries

[nicholaschiang]

Describe the feature you'd like to request

I need to be able to set public (exposed in the browser) environment variables without the NEXT_PUBLIC prefix in order to set environment variables for other libraries.

For example, when debugging with react-draggable I want to be able to set that process.env.DRAGGABLE_DEBUG environment variable in the browser to see the library's logs:

export default function log(...args: any) {
  if (process.env.DRAGGABLE_DEBUG) console.log(...args);
}

Describe the solution you'd like

We should be able to override the default NEXT_PUBLIC public environment variable prefix in next.config.js like so:

module.exports = {
  publicEnvVars: ['DRAGGABLE_DEBUG'],
};

Or something similar to the above. Next.js should still by default expose variables with NEXT_PUBLIC but we should also be able to expose variables without needing NEXT_PUBLIC.

Describe alternatives you've considered

I could OFC compile the react-draggable library myself from source (and replace the process.env.DRAGGABLE_DEBUG variable during compilation) but that'd be far from ideal.

[lfre]

@nicholaschiang You can set this mapping using the env key in next.config.js. E.g:

const { DRAGGABLE_DEBUG } = process.env;

module.exports = {
    env : {
       DRAGGABLE_DEBUG
    }
}

Your process.env.DRAGGABLE_DEBUG will be replaced correctly.

The NEXT_PUBLIC is a shortcut to do this through naming convention. Source. Unfortunately, it looks like env reference has been removed from the docs. https://nextjs.org/docs/basic-features/environment-variables

If you want to change it at runtime and not build time: https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration.

Hope that helps!