All 5 Environment Variables & Configuration Management questions
More in Environment Variables & Configuration Management
How do you add environment variables to a Next.js project? How do you manage different environment variable values for development, staging, and production environments? How would you validate that all required environment variables are present and correctly formatted before your app starts? What security risks are associated with environment variables, and how do you avoid them?
Advertisement
Back to results for “Security”
Next.js › Environment Variables & Configuration Management

What is the difference between a regular environment variable and one prefixed with NEXT_PUBLIC in Next.js?

Beginner

Answer

A regular environment variable is only available on the server and stays hidden from the browser, while one prefixed with NEXT_PUBLIC gets included in the JavaScript bundle sent to the browser, making it accessible from client components, so you should never put secrets behind that prefix.
# .env.local
DATABASE_URL=secret-connection-string
NEXT_PUBLIC_API_URL=https://api.example.com
Real-world example A weather app exposes its public API base URL using the NEXT_PUBLIC prefix so client components can build request URLs, while keeping its actual API secret key as a regular, server only environment variable.

Common follow-ups: What happens if you accidentally put a secret behind the NEXT_PUBLIC prefix?;Can you change a NEXT_PUBLIC variable after the app has already been built?

Security Best Practices in Next.js;Client Components & Hydration
All 5 Environment Variables & Configuration Management questions