Next.config.js headers based on env (dev,preview,prod)
Answered
Polar bear posted this in #help-forum
Polar bearOP
Hello everyone,
I'm using next.config.js to set multiple security headers to my app. But i need to set different values (for csp) bases on env. For example in preview mode i want to allow my dev websocket url and in production the prod url.
So is there a way to know in which env i am in next.config.js, for now i'm using NODE_ENV but its not able to differentiate prod from preview since NODE_ENV is set to production for both.
I never managed to find doc or a solution about this particular problem, so i ask here.
(I'm using pages router for info.)
Thanks you 🙂
I'm using next.config.js to set multiple security headers to my app. But i need to set different values (for csp) bases on env. For example in preview mode i want to allow my dev websocket url and in production the prod url.
So is there a way to know in which env i am in next.config.js, for now i'm using NODE_ENV but its not able to differentiate prod from preview since NODE_ENV is set to production for both.
I never managed to find doc or a solution about this particular problem, so i ask here.
(I'm using pages router for info.)
Thanks you 🙂
Answered by joulev
It seems you’re hosting on vercel in that case use
NEXT_PUBLIC_VERCEL_ENV, see the [docs](https://vercel.com/docs/projects/environment-variables/system-environment-variables#framework-environment-variables)6 Replies
Environment Variable Load Order
Environment variables are looked up in the following places, in order, stopping once the variable is found.
process.env
.env.$(NODE_ENV).local
.env.local (Not checked when NODE_ENV is test.)
.env.$(NODE_ENV)
.env
For example, if NODE_ENV is development and you define a variable in both .env.development.local and .env, the value in .env.development.local will be used.
Good to know: The allowed values for NODE_ENV are production, development and test.
Environment variables are looked up in the following places, in order, stopping once the variable is found.
process.env
.env.$(NODE_ENV).local
.env.local (Not checked when NODE_ENV is test.)
.env.$(NODE_ENV)
.env
For example, if NODE_ENV is development and you define a variable in both .env.development.local and .env, the value in .env.development.local will be used.
Good to know: The allowed values for NODE_ENV are production, development and test.
@Polar bear Hello everyone,
I'm using next.config.js to set multiple security headers to my app. But i need to set different values (for csp) bases on env. For example in preview mode i want to allow my dev websocket url and in production the prod url.
So is there a way to know in which env i am in next.config.js, for now i'm using NODE_ENV but its not able to differentiate prod from preview since NODE_ENV is set to production for both.
I never managed to find doc or a solution about this particular problem, so i ask here.
(I'm using pages router for info.)
Thanks you 🙂
It seems you’re hosting on vercel in that case use
NEXT_PUBLIC_VERCEL_ENV, see the [docs](https://vercel.com/docs/projects/environment-variables/system-environment-variables#framework-environment-variables)Answer
Polar bearOP
Oh i dont know how i missed that doc page, thank you very much that's exactly what I needed
it's not the nextjs doc but the vercel doc
so yeah it makes sense that many dont know of that