Variables defined in `.env` files that do not begin with `NEXT_PUBLIC_` are not available in Middleware deployed to Vercel
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/flamboyant-cray-pwlc82
To Reproduce
- next dev
- observe that the middleware logs value as defined in
.env - Deploy to Vercel
- observe that the middleware logs
undefinedinstead of the value defined in.env
Current vs. Expected behavior
Current
Variables defined in .env files that do not begin with NEXT_PUBLIC_ are not available in Middleware deployed to Vercel.
BUT, all variables defined in Vercel are available in Middleware. This inconsistency is very confusing.
.env files offer more functionality, e.g. MY_PATH="https://${VERCEL_URL}/some/path", so it would be great if it just worked.
I have tried this workaround: https://github.com/vercel/next.js/discussions/39705#discussioncomment-4621291 but it extremely limited since some dependencies access variables using other syntax like process.env[name].
Expected
Consistent behaviour. If all environment variables defined in Vercel are made available to middleware, so too should all environment variables defined in .env files.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 20.6.0: Tue Feb 22 21:10:42 PST 2022; root:xnu-7195.141.26~1/RELEASE_ARM64_T8101
Available memory (MB): 8192
Available CPU cores: 8
Binaries:
Node: 20.10.0
npm: 10.2.3
Yarn: N/A
pnpm: 8.15.4
Relevant Packages:
next: 14.2.4 // Latest available version is detected (14.2.4).
eslint-config-next: 14.2.4
react: 18.3.1
react-dom: 18.3.1
typescript: 5.5.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Developer Experience, Middleware, Runtime, Webpack
Which stage(s) are affected? (Select all that apply)
Vercel (Deployed)
Additional context
This issue is related to Vercel deployment, see the discussion here https://github.com/vercel/next.js/discussions/39705
Generally, when you load environment variables from .env* files, all the Non-NEXT-PUBLIC variables are only available in the Node.js runtime and not in the Edge runtime. This remains true when deployed on vercel too. However when you configure variables through Vercel's project settings, all environment variables are made available to the edge runtime regardless of their prefix. This explains the inconsistency that you have been experiencing.
Good to know: When deploying your Next.js application to Vercel , your environment variables in .env* files will not be made available to Edge Runtime, unless their name are prefixed with NEXT_PUBLIC_. We strongly recommend managing your environment variables in Project Settings instead, from where all environment variables are available.
You can refer to these links to the NextJS documentation:
Ok, but why?
It doesn't make sense as it is now. You can't make the case that it is about security, because then it would also apply to non-NEXT_PUBLIC variables defined inside Vercel as well.
It is an inconsistency that makes it impossible to set new environment variables that depend on the VERCEL_ system environment variables, such as MY_ENV="https://${VERCEL_URL}"
It isn't always possible to do this in code--some libs only read environment variables (which is also a poor choice, but not the point here).
Any update on this? Need this for our production app.
Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!