From 9c0a588e1487db916a7bda3c2e674719f2adfc44 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Thu, 13 Mar 2025 17:52:33 +0100 Subject: [PATCH 1/5] [cloudflare] add howto env vars --- pages/cloudflare/howtos/_meta.json | 3 ++- pages/cloudflare/howtos/env-vars.mdx | 35 ++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 pages/cloudflare/howtos/env-vars.mdx diff --git a/pages/cloudflare/howtos/_meta.json b/pages/cloudflare/howtos/_meta.json index 5bc5e65..2dae0f9 100644 --- a/pages/cloudflare/howtos/_meta.json +++ b/pages/cloudflare/howtos/_meta.json @@ -1,5 +1,6 @@ { "NextAuth": "NextAuth", "stripeAPI": "Stripe API", - "dev": "Development workflow" + "dev": "Development workflow", + "env-vars": "Enviroment Variables" } diff --git a/pages/cloudflare/howtos/env-vars.mdx b/pages/cloudflare/howtos/env-vars.mdx new file mode 100644 index 0000000..14808f6 --- /dev/null +++ b/pages/cloudflare/howtos/env-vars.mdx @@ -0,0 +1,35 @@ +## Environment variables + +This entry describe the most sensible way to handle your environment variables which works well both during local development and once your application is deployed to Cloudflare Workers. + +On the Cloudflare platform, your environment variables can be stored in either ["Enviroment variables"](https://developers.cloudflare.com/workers/configuration/environment-variables/) or ["Secrets"](https://developers.cloudflare.com/workers/configuration/secrets/). The difference being that Secrets are write only and can not be read back from either the dashboard or the CLI. + +### Local development + +While there are multiple ways to set environment variables for local development on the Cloudflare platform (adding them to to your [wrangler configuration](https://developers.cloudflare.com/workers/configuration/secrets/) or to a [.dev.vars](https://developers.cloudflare.com/workers/configuration/secrets/) file) that does not play well with the recommended development workflow as they would not be available while using `next dev`. + +What you should do instead is to use the Next.js [`.env` files](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables) instead. By doing so the environment variables will be available on `process.env` both while running `next dev` and when running you app locally on a Worker with `wrangler dev`. + +Next.js `.env` files are environment specific. That is a `.env.development` will take precedence over a `.env` file when you use the "development" environment. See the Next.js site for a detailed explanation of the [loading order](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables). + +You should use the `NEXTJS_ENV` environment variable to select the environment to use when running your app locally on a worker, that's how you would select the "development" environment: + +```plain +# .dev.vars +NEXTJS_ENV=development +``` + +The "production" environment is used by default when `NEXTJS_ENV` is not explicitely set. + +### Production + +`.env` and `dev.vars` are local files that should not be added to source control. You should instead use the cloudflare dashboard to set you environment variables for production. + +Next.js has [2 kinds](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser) of environment variables: + +- non-`NEXT_PUBLIC_` variables which are only available on the server +- `NEXT_PUBLIC_` variables on the other hand are available to the browser + +Those are called runtime environment variables (non-`NEXT_PUBLIC_`) and buildtime environment variables (`NEXT_PUBLIC_`) on the Cloudflare paltform. + +You can set the runtime environment variables (non-`NEXT_PUBLIC_`) by following those [instructions](https://developers.cloudflare.com/workers/configuration/environment-variables/#add-environment-variables-via-the-dashboard). The build time environment variables (`NEXT_PUBLIC_`) should be set in the [Builds Configuration](https://developers.cloudflare.com/workers/ci-cd/builds/configuration/) so that their value can be inlined by the Workers Builds. From f1f117b3e3b679c6e19988b100da5b341588d355 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 14 Mar 2025 07:42:51 +0100 Subject: [PATCH 2/5] Update pages/cloudflare/howtos/env-vars.mdx Co-authored-by: James Anderson --- pages/cloudflare/howtos/env-vars.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/env-vars.mdx b/pages/cloudflare/howtos/env-vars.mdx index 14808f6..4b633e6 100644 --- a/pages/cloudflare/howtos/env-vars.mdx +++ b/pages/cloudflare/howtos/env-vars.mdx @@ -2,7 +2,7 @@ This entry describe the most sensible way to handle your environment variables which works well both during local development and once your application is deployed to Cloudflare Workers. -On the Cloudflare platform, your environment variables can be stored in either ["Enviroment variables"](https://developers.cloudflare.com/workers/configuration/environment-variables/) or ["Secrets"](https://developers.cloudflare.com/workers/configuration/secrets/). The difference being that Secrets are write only and can not be read back from either the dashboard or the CLI. +On the Cloudflare platform, your environment variables can be stored in either ["Enviroment variables"](https://developers.cloudflare.com/workers/configuration/environment-variables/) or ["Secrets"](https://developers.cloudflare.com/workers/configuration/secrets/). The difference being that Secrets can not be read back from either the dashboard or the CLI after being created. ### Local development From 54fb2277e380371d50bc3f813f43b83498e6ddcc Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 14 Mar 2025 07:42:59 +0100 Subject: [PATCH 3/5] Update pages/cloudflare/howtos/env-vars.mdx Co-authored-by: James Anderson --- pages/cloudflare/howtos/env-vars.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/env-vars.mdx b/pages/cloudflare/howtos/env-vars.mdx index 4b633e6..bcbba73 100644 --- a/pages/cloudflare/howtos/env-vars.mdx +++ b/pages/cloudflare/howtos/env-vars.mdx @@ -8,7 +8,7 @@ On the Cloudflare platform, your environment variables can be stored in either [ While there are multiple ways to set environment variables for local development on the Cloudflare platform (adding them to to your [wrangler configuration](https://developers.cloudflare.com/workers/configuration/secrets/) or to a [.dev.vars](https://developers.cloudflare.com/workers/configuration/secrets/) file) that does not play well with the recommended development workflow as they would not be available while using `next dev`. -What you should do instead is to use the Next.js [`.env` files](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables) instead. By doing so the environment variables will be available on `process.env` both while running `next dev` and when running you app locally on a Worker with `wrangler dev`. +What you should do instead is to use the Next.js [`.env` files](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables). By doing so the environment variables will be available on `process.env` both while running `next dev` and when running your app locally on a Worker with `wrangler dev`. Next.js `.env` files are environment specific. That is a `.env.development` will take precedence over a `.env` file when you use the "development" environment. See the Next.js site for a detailed explanation of the [loading order](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables). From cb82510bc559308d849e652fdd99765498d42a3d Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 14 Mar 2025 07:43:05 +0100 Subject: [PATCH 4/5] Update pages/cloudflare/howtos/env-vars.mdx Co-authored-by: James Anderson --- pages/cloudflare/howtos/env-vars.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/env-vars.mdx b/pages/cloudflare/howtos/env-vars.mdx index bcbba73..8b5b7e7 100644 --- a/pages/cloudflare/howtos/env-vars.mdx +++ b/pages/cloudflare/howtos/env-vars.mdx @@ -19,7 +19,7 @@ You should use the `NEXTJS_ENV` environment variable to select the environment t NEXTJS_ENV=development ``` -The "production" environment is used by default when `NEXTJS_ENV` is not explicitely set. +The "production" environment is used by default when `NEXTJS_ENV` is not explicitly set. ### Production From dbbe65819de6e861943866a3fb369214fcd92866 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Fri, 14 Mar 2025 07:43:12 +0100 Subject: [PATCH 5/5] Update pages/cloudflare/howtos/env-vars.mdx Co-authored-by: James Anderson --- pages/cloudflare/howtos/env-vars.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/howtos/env-vars.mdx b/pages/cloudflare/howtos/env-vars.mdx index 8b5b7e7..f838382 100644 --- a/pages/cloudflare/howtos/env-vars.mdx +++ b/pages/cloudflare/howtos/env-vars.mdx @@ -23,7 +23,7 @@ The "production" environment is used by default when `NEXTJS_ENV` is not explici ### Production -`.env` and `dev.vars` are local files that should not be added to source control. You should instead use the cloudflare dashboard to set you environment variables for production. +`.env` and `.dev.vars` are local files that should not be added to source control. You should instead use the cloudflare dashboard to set your environment variables for production. Next.js has [2 kinds](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser) of environment variables: