Elaborate on environmental variables?

[mondaychen]

Thanks for the stack! Love it.

I have some questions regarding the environmental variables.

• I see the setup script create .dev.vars for you. Why is it not .env file that many other next.js project use?
• How do I set them up for production?
• I'm also confused by this:

  there's no environment variables. want to use database? just env.DB. Want a Key-value instance? env.KV. want a queue? env.Queue.

Does that mean we should use different files for different env vars? Like OpenAI key should be in a file called env.AI?

[yashpurplesectors]

we spent some time last week on this topic. Cloudflare workers don't use process.env, rather it picks the vars you add in [vars] section of wrangler.toml or .dev.vars and uses them as constants. Cloudflare workers pick these vars on every run (or execution.

so, using them as process.env.xxx is not possible.

what we did in our project is

1. add the file which Dhrayva created

   
   declare global {
   namespace NodeJS {
       interface ProcessEnv extends CloudflareEnv {}
   }
   }

export type {};

2. added a line in cloudflare.ts

process.env = env // this is the env picked from vars

3. use process.env everywhere as expected.

[jivjen]

I have the .dev.vars created but on printing the variables using process.env.variable_name I don't see the value being picked.

[vijaynandwani]

I have the .dev.vars created but on printing the variables using process.env.variable_name I don't see the value being picked.

Try adding export const runtime = 'edge' to your file where you are reading the variable. That should fix it

[guidovizoso]

Hi there! As a Cloudflare newbie (trying to look for other alternatives than Vercel), I'm being puzzled by the same thing. I read everywhere about how it's not possible to use CF env vars on Next's dev mode and how export const runtime = 'edge' is required but here and here the code is not using either Cloudflare's dev mode, edge runtime or anything and just works calling process.env. Anyone knows how is that achieved?

[vijaynandwani]

@guidovizoso These files are invoked from other route pages which have export const runtime = 'edge'. The db file for example is imported here and here. The second file doesn't have edge runtime, because it is not used directly but in other API routes like this one which has edge runtime. Similarly the auth methods are imported in this page which have edge runtime.

If you remove edge runtime from all these files, you would not be able to read those env variables

[guidovizoso]

@vijaynandwani Thanks for the insight! I'm still getting used to the CF way of using Next, that's super helpful

[mondaychen]

I've been working on my project based on this stack for a while. Now I think I can answer my original questions:

1. Like people shared above, .dev.vars is a Cloudflare / wrangler convention and will be picked up on files running on "edge runtime". For other use cases, you can write variables in .env and NextJS will pick it up.
2. You can add env vars for prod and preview on Cloudflare dashboard: Workers & Pages -> [select your site] -> Settings
3. This is referring to "Bindings", which is a set of Workers runtime API that's also available via Pages Functions. Because they are all first-party Cloudflare services, you don't need to set up extra env vars for them.