Stages & secrets, using the best of both Next.js and Vercel vendor

Next.js doesn't come with a built-in stages configuration. It doesn't know about the concept of "stage".
But it does help you about handling ENV vars, and Vercel helps about handling secrets.
It's a bit complex to get it right though, and that's where NRN comes in, to help you configure this and keep it simple.

Secrets are securely stored on Vercel.

Our setup puts the best of Vercel and Next together, it works differently depending on the stage.

development: All your secrets and env vars are configured in the .env.build file.
When you're working locally, you're working on one project at a time.
Thus, all the config is located in a single file.
staging and development stages: Your env vars are configured in the vercel.*.json files, per customer and per stage.
Env vars are basically hardcoded in those files, while secrets are referenced there, but nobody can read their value.

Overall, we made it easy to use: Just hardcode your non-sensitive env vars in vercel.*.json and store your sensitive secrets on Vercel, that's it.

Beware about the "environment variables" term, which may mean something different whether you mean it locally, or on Vercel.

Before, only secrets existed, but since now@18 they've introduced the concept of environment variables.
It can be a bit hard to understand how the 2 should be used together.
Basically put, secrets are global and shared across all projects, while env vars are scoped by project.
There are other differences , though.

This new "environment variable" feature made things more complicated to comprehend, in our opinion.
Therefore, we recommend to use the term secrets for everything that's securely stored on Vercel, and the term environment variables for everything that's not securely stored (git tracked, readable from code files).

Built-in features

Stages & secrets, using the best of both Next.js and Vercel vendor