NEXT_PUBLIC vs Server Env Variable in Next.js: Key Differences and Usage

In Next.js, NEXT_PUBLIC environment variables are exposed to the browser and can be accessed in client-side code, while server environment variables without the prefix are only available on the server side. Use NEXT_PUBLIC for variables that need to be public and server env variables for sensitive data that must stay private.

Quick Comparison

This table summarizes the main differences between NEXT_PUBLIC environment variables and server-only environment variables in Next.js.

Aspect	NEXT_PUBLIC Variables	Server Environment Variables
Visibility	Exposed to client and server	Only available on server
Use Case	Public config, API URLs for frontend	Secrets, API keys, database credentials
Security	Not secure, visible in browser	Secure, hidden from client
Prefix Requirement	Must start with NEXT_PUBLIC_	No prefix needed
Access Location	Accessible in process.env on client and server	Accessible only in server-side code

Key Differences

NEXT_PUBLIC environment variables in Next.js are designed to be embedded into the client-side JavaScript bundle. This means any variable prefixed with NEXT_PUBLIC_ is exposed to the browser and can be read by anyone using the app. Because of this, they should only contain non-sensitive information like public API endpoints or feature flags.

On the other hand, server environment variables without the NEXT_PUBLIC_ prefix are only accessible on the server side. These variables are never sent to the browser, making them safe for storing secrets such as API keys, database passwords, or tokens. They can be accessed in server-side functions like API routes, getServerSideProps, or getStaticProps.

Using the correct type of environment variable is crucial for security and functionality. Exposing secrets via NEXT_PUBLIC variables risks leaking sensitive data, while trying to access server-only variables on the client will result in undefined.

Code Comparison

Here is an example showing how to use a NEXT_PUBLIC environment variable in a Next.js component to display a public API URL on the client side.

javascript

export default function PublicEnvExample() {
  return (
    <div>
      <p>Public API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  )
}

// .env.local
// NEXT_PUBLIC_API_URL=https://api.example.com

Output

Public API URL: https://api.example.com

Server Environment Variable Equivalent

This example shows how to use a server-only environment variable inside getServerSideProps to keep a secret API key hidden from the client.

javascript

export async function getServerSideProps() {
  const secretKey = process.env.SECRET_API_KEY
  // Use secretKey securely on server
  return {
    props: {
      message: `Secret key length is ${secretKey.length}`
    }
  }
}

export default function ServerEnvExample({ message }) {
  return <p>{message}</p>
}

// .env.local
// SECRET_API_KEY=supersecret123

Output

Secret key length is 13

When to Use Which

Choose NEXT_PUBLIC environment variables when you need to share configuration or URLs with the client-side code, such as public API endpoints or feature flags. These variables are safe only if they contain non-sensitive data.

Choose server environment variables without the NEXT_PUBLIC prefix when storing sensitive information like API keys, database credentials, or tokens that must never be exposed to the browser. Use them only in server-side code to keep your secrets safe.

Key Takeaways

Use NEXT_PUBLIC_ prefix for environment variables that must be accessible in client-side code.

Server environment variables without the prefix are private and only available on the server.

Never expose sensitive data using NEXT_PUBLIC variables as they are visible in the browser.

Access server-only variables in server-side functions like getServerSideProps or API routes.

Choose the variable type based on whether the data should be public or kept secret.