Next.js how to show something in development and hide in production
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>
)}
→ Get my Next.js (pages router) Handbook
I wrote 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - the 2025 edition, starting on February 4th, is now open for signups!