Cloudflare Developers•6d ago

NextJS NEXT_PUBLIC vars on the client

NEXTPUBLIC* variables should be accessible on the client-side yet process.env isn't available and import { getRequestContext } from "@cloudflare/next-on-pages"; is only available on the server. How can I access these public variables on the client?

22 Replies

James•6d ago

use process.env like normal for inlined vars if they're not available, then they might not be being inlined properly

KennyOP•6d ago

for inlined vars? wym im setting the vars in wrangler.toml & process.env isn't available. I would have to do something like hardcode a .env which would be passed to cloudflare for deployment for something like this to work

James•6d ago

next.js will inline NEXT_PUBLIC_ vars at build-time if they are available and accessed with process.env https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser it is when using next-on-pages

KennyOP•6d ago

I'm using next-on-pages. I followed this guide: https://developers.cloudflare.com/pages/framework-guides/nextjs/

Cloudflare Docs

Next.js · Cloudflare Pages docs

React framework for building full-stack web applications.

James•6d ago

if you want it to be inlined, you need to use process.env

KennyOP•6d ago

I don't understand what you are saying create a file called process.env?

James•6d ago

https://nodejs.org/en/learn/command-line/how-to-read-environment-variables-from-nodejs

Node.js — How to read environment variables from Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

KennyOP•6d ago

you aren't being helpful, I know how to access process.env I have my variables located inside my wrangler.toml and on the client if I call process.env.{variable name} it's undefined it doesn't work many other people on here seem to have the same issue there's also no docs specifying that this will work, it only says to use import { getRequestContext } from "@cloudflare/next-on-pages"; I should also mention that I have tried including them in .dev.vars as well

James•6d ago

Next.js docs explicitly state that you need to use process.env.[variable] for it to bundle them at build time. Therefore, it would not bundle them if you are using getRequestContext. For non-bundled env vars, they will be accessible on both process.env and getRequestContext in your worker, as they are made available through AsyncLocalStorage on process.env. In next dev, you can use setupDevPlatform to setup Wrangler config stuff in the Next.js dev server VM module for the edge runtime, but this may not be a perfect experience due to HMR. If you want to use process.env, it would be simple for you to have a .env.local file for local development if you are having issues with setupDevPlatform.

KennyOP•6d ago

Okay if I understand this correctly, I need to create a .env file that is hardcoded in my app for these public environment variables and cannot use .dev.vars or wrangler directly in order to access process.env.[variable]. From what I saw, nextjs only inlines variables no if they are access with process.env but rather if they are included in a .env file at build-time.

James•6d ago

I'm afraid I don't know the internals of how Next.js decides which env vars can be inlined or not, but I would image any vars available on process.env would, so you shouldn't need to commit a .env file to pages ci

KennyOP•6d ago

They explain it here: https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

Configuring: Environment Variables | Next.js

Learn to add and access environment variables in your Next.js application.

KennyOP•6d ago

Next.js has built-in support for loading environment variables from .env* files into process.env.

If you need to load environment variables outside of the Next.js runtime, such as in a root config file for an ORM or test runner, you can use the @next/env package.

Do you think that using this package may be the solution?

James•6d ago

That just tells you that they auto-populate process.env with a .env file. Secrets in Pages CI should also be available on process.env during build-time.

KennyOP•6d ago

Hm, this is very strange that it wouldn't be available then bc these work fine in the server. just not the client

KennyOP•6d ago

I'm very confused as to why none of this is mentioned anywhere in the docs: https://github.com/cloudflare/next-on-pages/tree/main/internal-packages/next-dev

GitHub

next-on-pages/internal-packages/next-dev at main · cloudflare/next-...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

KennyOP•6d ago

& should accessing vars on process.env in the server also work?

name = "post-crawl-nextjs"
compatibility_date = "2025-02-28"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[vars]
BUN_VERSION = "1.2.0"
NODE_VERSION = "23.7.0"

[env.production.vars]
NODE_ENV = "production"
NEXT_PUBLIC_SUPABASE_URL = "https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "https://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

[env.development.vars]
NODE_ENV = "development"
NEXT_PUBLIC_SUPABASE_URL = "http://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "http://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

name = "post-crawl-nextjs"
compatibility_date = "2025-02-28"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[vars]
BUN_VERSION = "1.2.0"
NODE_VERSION = "23.7.0"

[env.production.vars]
NODE_ENV = "production"
NEXT_PUBLIC_SUPABASE_URL = "https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "https://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

[env.development.vars]
NODE_ENV = "development"
NEXT_PUBLIC_SUPABASE_URL = "http://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "http://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

  console.log('process.env.NEXT_PUBLIC_SUPABASE_URL', process.env.NEXT_PUBLIC_SUPABASE_URL)
  console.log('process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY', process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)

  console.log('process.env.NEXT_PUBLIC_SUPABASE_URL', process.env.NEXT_PUBLIC_SUPABASE_URL)
  console.log('process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY', process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)

Server side:

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

Client side:

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

I think i'm doing something wrong because when I type bun preview this shows up:

Your worker has access to the following bindings:
- Vars:
  - BUN_VERSION: "1.2.0"
  - NODE_VERSION: "23.7.0"

Your worker has access to the following bindings:
- Vars:
  - BUN_VERSION: "1.2.0"
  - NODE_VERSION: "23.7.0"

"preview": "bun run pages:build && wrangler pages dev", Quick update:

name = "post-crawl-nextjs"
compatibility_date = "2025-02-28"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[vars]
BUN_VERSION = "1.2.0"
NODE_VERSION = "23.7.0"
NODE_ENV = "development"
NEXT_PUBLIC_SUPABASE_URL = "http://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "http://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

[env.production.vars]
NODE_ENV = "production"
NEXT_PUBLIC_SUPABASE_URL = "https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "https://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

name = "post-crawl-nextjs"
compatibility_date = "2025-02-28"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = ".vercel/output/static"

[vars]
BUN_VERSION = "1.2.0"
NODE_VERSION = "23.7.0"
NODE_ENV = "development"
NEXT_PUBLIC_SUPABASE_URL = "http://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "http://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

[env.production.vars]
NODE_ENV = "production"
NEXT_PUBLIC_SUPABASE_URL = "https://..."
NEXT_PUBLIC_SUPABASE_ANON_KEY = "eyJhbGciOi..."
NEXT_PUBLIC_URL = "https://..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY = "pk_test..."

I got process.env.[variable] to work in the server by making these changes. However, client components still output this:

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

process.env.NEXT_PUBLIC_SUPABASE_URL undefined
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY undefined

James•6d ago

is this in a deployment or locally?

KennyOP•6d ago

local i tried preview and next dev To solve this for now I am just removing the vars from the wrangler.toml and creating a hardcoded env.production and env.development which will hold all of my public variables that need to be accessed by the client-side. If you can find a better solution please lmk

James•5d ago

Locally you will need a .env file if you want to use it that way, because they're not on process.env initially, they're only on it for code run inside the vm module next.js uses for edge runtime pages.

KennyOP•5d ago

well that makes [vars] in wrangler.toml virtually useless is this something that could be fixed?

James•5d ago

No it's a limitation from when+where the env vars are being injected

Gaming

Programming

NextJS NEXT_PUBLIC vars on the client

Did you find this page helpful?