<h1 id="welcome">Welcome! 👋🏻</h1>
<p>Querés mostrar algo solo en un entorno de desarrollo (ej: cuando estás trabajando de manera local) y ocultarlo cuando esto vaya a producción?</p>
<p>Perfecto, seguí leyendo! 🤓</p>
<p>3...</p>
<p>2...</p>
<p>1...</p>
<p>Se viene el trucazoooo</p>
<p>↓↓↓</p>
<h1 id="how-to">✍🏻 How to</h1>
<h2 id="1-estamos-en-desarrollo">1. Estamos en desarrollo? 🤔</h2>
<p>Creamos una constante llamada <code>isDev</code> la cual tendrá un valor <code>booleano</code> (<code>true</code> o <code>false</code>) **</p>
<pre><code><span class="hljs-keyword">const</span> isDev = process.env.NODE_ENV === <span class="hljs-string">'development'</span>
</code></pre><h3 id="ejemplo">Ejemplo:</h3>
<p><code>isDev</code> será <code>false</code> ❌  cuando -&gt; Estamos en producción (ya que el entorno <strong>no</strong> será <em>development</em>)</p>
<p><code>isDev</code> será <code>true</code> ✅  cuando -&gt; Estamos en desarrollo (ya que el entorno <strong>sí</strong> será <em>development</em>)</p>
<h2 id="2-un-condicional-por-aqui">2. Un condicional por aquí.. (❓)</h2>
<p>Utilizamos el valor de esa variable para renderizar lo que deseamos! </p>
<p>(O para 'no' renderizar lo que deseamos 😝)</p>
<pre><code>{isDev &amp;&amp; (
  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Esto se va a ver solo cuando estemos en desarrollo! 🤙🏻 <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
)}
</code></pre><p>That's all!</p>


# Welcome! 👋🏻

Querés mostrar algo solo en un entorno de desarrollo (ej: cuando estás trabajando de manera local) y ocultarlo cuando esto vaya a producción?

Perfecto, seguí leyendo! 🤓

3...

2...

1...

Se viene el trucazoooo

↓↓↓

# ✍🏻 How to

## 1. Estamos en desarrollo? 🤔

Creamos una constante llamada `isDev` la cual tendrá un valor `booleano` (`true` o `false`) **


```
const isDev = process.env.NODE_ENV === 'development'
``` 
### Ejemplo:

`isDev` será `false` ❌  cuando -> Estamos en producción (ya que el entorno **no** será *development*)

`isDev` será `true` ✅  cuando -> Estamos en desarrollo (ya que el entorno **sí** será *development*)


## 2. Un condicional por aquí.. (❓)

Utilizamos el valor de esa variable para renderizar lo que deseamos! 

(O para 'no' renderizar lo que deseamos 😝)


```
{isDev && (
  <p>Esto se va a ver solo cuando estemos en desarrollo! 🤙🏻 </p>
)}
``` 

That's all!

Querés mostrar algo solo en un entorno de desarrollo (ej: cuando estás trabajando de manera local) y ocultarlo cuando esto vaya a producción? Vení !

Nahuel Krowicki

Nahuel Krowicki

Next.js: Cómo mostrar algo en desarrollo y ocultarlo en producción

Trucazo

Welcome! 👋🏻

✍🏻 How to

1. Estamos en desarrollo? 🤔

Ejemplo:

2. Un condicional por aquí.. (❓)