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

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

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>
)}

Lessons in this unit:

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