Next.js Discord

Discord Forum

Configuring difference between production and development environments

Answered
rex1410 posted this in #help-forum
Open in Discord
rex1410OP
I have a frontend project using nextjs. I know in nextjs we can check if it is production or dev using NODE_ENV but can we also configure this differently? My frontend is using Firebase for the server side stuff, and I want a good way to check on frontend, whether to use the prod firebase project or the dev firebase project (I have 2 separate projects coz of prod and dev). So can I configure the NODE_ENV to return development whenever I run in localhost or through the deployment of my dev firebase project, and return production when deployed to my prod firebase project?
Answered by Eric Burel
Hi, what's doesn't work in your setup? First you may want to clarify a bit the difference between:
- local dev
- local build
- staging build
- production build
View full answer

18 Replies

rex1410OP
the thing is the different firebase project have their own deployment links as well. So the dev project has a dev link for testing in the team, and the prod project's link is what goes out to the users.

I want the dev link to also use the dev database and dev cloud functions only. is there a way to set this that the .env.development should also be used in the dev deployment so the team can test? Or will I have to run a function that checks this and then use the env vars?
Eric Burel
Hi, what's doesn't work in your setup? First you may want to clarify a bit the difference between:
- local dev
- local build
- staging build
- production build
Answer
Eric Burel
so ".env.development" is for local dev only
".env.production" is for the build
so if you want to deploy a version that works in a staging environment (= similar to production but just to share with your teammates), you need to change .env.production
it's common to write default values there (be careful not to put secret stuff), so your local build or staging build work out of the box
then in your production host you can set the environment values the way you want
I also suggest creating a centralized function like "serverConfig.ts" that reads all relevant "process.env" values and exports a typed object
instead of leaking "process.env" everywhere in the code which is not a good practice
rex1410OP
@Eric Burel thanks for the suggestion, the server config idea will sort my issue.

this is my setup:
one prod firebase project with hosting, firestore and cloud functions
one dev firebase project with hosting, firestore and cloud functions

I want dev to use the config that local dev uses, I will use serverConfig for this
rex1410OP
@Eric Burel one more doubt, regarding github actions, if I have environment variables for server and client side (these are the ones with NEXT_PUBLIC prefix, pls cmiiw), how exactly do I add them for auto-deployment through github actions?

In the normal way only? Like adding them to the env variables in secrets of my repository?
@Eric Burel github actions will be treated as a production environment so it will load ".env.production" + whatever env variables you set directly on github
rex1410OP
but to load .env.production, wouldn't that need that particular env file to be commited and pushed to github?
Eric Burel
yes in NExt it's meant to contains default public values
then you setup the private values directly in your host, depending on your context
to test the prod build on your local machine you can create an untracked ".env.production.local"
I personnaly don't like this solution much but I don't have a better alternative yet
@Eric Burel I personnaly don't like this solution much but I don't have a better alternative yet
rex1410OP
I understand, thanks for explaining it. I know how I need to config my project now 👍 🫡