Show component in development and not in production
Show and hide component based on environment in React or Next.js
Javascript
React
Next.js
Published At
5/13/2021
Reading Time
~ 1 min read
At times, there are need when we want to display some component/content in development environment and not in production, or vice-versa (yeah, chance of having vice-versa cases are very low).
We can do it the following way:
jsx
const inDev = process.env.NODE_ENV === 'development'
{
inDev && <div>I'm in dev</div>
}jsx
const inDev = process.env.NODE_ENV === 'development'
{
inDev && <div>I'm in dev</div>
}That's it. process.env.NODE_ENV provide us with the environment we are in. We can access it anywhere in the app. Even in some js logic where we need to know the environment, we can use it.
🙏
Do you have any questions, or simply wish to contact me privately? Don't hesitate to shoot me a DM on Twitter.
Have a wonderful day.
Abhishek 🙏