Runtime Environment Variables on Vercel

Get Help and Help Others
1

I’m trying to gain access to environment variables at runtime on Vercel. With NextJS, Vercel doesn’t expose these by default, you have to prepend NEXT_PUBLIC_ to have your variable available client-side.

Is anyone aware of an undocumented way to do this?

2

Posting solution here for others to find. Chris and I worked on this together today. There were two issues to address:

  1. How to make Env Vars included in Web build:
    Here’s the documentation for adding variables – Redwood Environment Variables. There are three different options for Web. You only need to choose one. (And the last option only works for local dev.)
  2. Adding Env Vars required for Auth0 (or other Auth providers):
    Chris is using Auth0 in his project. The problem is that he used the first option to add Env Vars to Web, prefix with REDWOOD_ENV_. However, the Env Vars for Auth0 in the Redwood Docs need to be used exactly as given, so the prefix won’t work. So he needed to use the option for "Whitelisting environment variables in redwood.toml.
3

If curious - when I implemented a netlify-plugin-redwoodjs-env-validator Netlify Build Plugin, I discuss the particulars of env config – and whitelisting … and defaults.

4

We should definitely link to your plugin in the Environment Variables doc.

And I’m wondering if that same RW doc should just straight up recommend whitelisting and mention the others as options for those who understand implications.

5

I should work to get it published on Netlify. Easier to use and install … right now you have to inline the package in your project.