Next.js Discord

Discord Forum

Variable environment workflow

Unanswered
Guillaume630 posted this in #help-forum
Open in Discord
Avatar
Guillaume630OP
Hello there, I have different versions of my upcoming application (main and staging, mostly). My problem is that I need different environment variables that correspond to my application's version due to the version control workflow.

For example, if my Next app is in the staging environment, I require the staging environment variables from Supabase. The same goes for production and development environments.

Do you have any ideas on how to streamline the development process? Perhaps a VS Code plugin or a method that's quicker than copy-pasting?

8 Replies

Avatar
risky
env vars? https://nextjs.org/docs/app/building-your-application/configuring/environment-variables
Avatar
Somali
Vercel should be able to do this for you out of the box per domain / git branch
Avatar
risky
can you not use their config (and branch for staging?)
Image
ohh your not OP 😭
Avatar
Guillaume630OP
Oh it's okay on vercel, my question is about y VS code config / Next project, that i have different environnement, when i switch main branch to staging, i need to have the .env.local related to staging

ex in .env.local in the Next project:

main branch
NEXT_PUBLIC_SUPABASE_URL="main_url"

staging branch
NEXT_PUBLIC_SUPABASE_URL="staging_url"
Should I everytime copy / paste the environment variable or there is a workflow to manage this automaticaly ?
Avatar
Somali
Use VS Code workspace settings to load specific environment variables depending on the git branch you’re on @Guillaume630 

{
  "settings": {
    "terminal.integrated.env": {
      "NEXT_PUBLIC_API_URL": "${workspaceFolder}/.env.local" // Default for the "main" branch
    },
    "[development]": {
      "terminal.integrated.env": {
        "NEXT_PUBLIC_API_URL": "${workspaceFolder}/.env.local.development" // For the "development" branch
      }
    }
  }
}
You can use the .env.local file to store your main URL while the .env.local.development file has your staging URL.