Configuration: Next.js: how to show something in development and hide in production

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.

I wanted to display some information on the website only if it was in development, on my local machine, and not in the deployed website.

Here’s how I did it:

const isDev = process.env.NODE_ENV === 'development'

{isDev && (
  <p>local only</p>
)}

0:	Introduction
1:	Absolute imports in Next.js
2:	How to change a Next.js app port
3:	Next.js, adding features just to development mode
4:	▶︎ Next.js: how to show something in development and hide in production
5:	Adding a wrapper component to your Next.js app