👋
Welcome to my blog!

Show component in development and not in production

Show and hide component based on environment in React or Next.js

Show component in development and not in production
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 🙏

Join My Exclusive Newsletter Community

Step into a world where creativity intersects with technology. By subscribing, you'll get a front-row seat to my latest musings, full-stack development resources, and exclusive previews of future posts. Each email is a crafted experience that includes:

  • In-depth looks at my covert projects and musings to ignite your imagination.
  • Handpicked frontend development resources and current explorations, aimed at expanding your developer toolkit.
  • A monthly infusion of inspiration with my personal selection of quotes, books, and music.

Embrace the confluence of words and wonder, curated thoughtfully and sent straight to your inbox.

No fluff. Just the highest caliber of ideas.