Environment variables in production in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are environment variables in Next.js used for?

Environment variables store configuration values like API keys or URLs outside the code. This keeps sensitive info safe and lets you change settings without changing code.

beginner

How do you name environment variables in Next.js to make them available in the browser?

You prefix them with NEXT_PUBLIC_. For example, NEXT_PUBLIC_API_URL will be accessible in client-side code.

intermediate

Where should you store environment variables for production in a Next.js app?

Store them in a .env.production file or set them directly in your hosting platform's environment settings (like Vercel dashboard).

beginner

Why should you never commit sensitive environment variables to your public code repository?

Because anyone can see your secrets like API keys or passwords. This risks security and misuse. Use environment files ignored by git or platform settings instead.

advanced

How does Next.js handle environment variables at build time versus runtime in production?

Next.js replaces environment variables at build time. So, you must rebuild your app if you change variables. For runtime changes, use platform features or serverless functions.

Which prefix makes an environment variable accessible in the browser in Next.js?

A NEXT_PUBLIC_

B PUBLIC_

C NEXT_

D CLIENT_

Only variables starting with NEXT_PUBLIC_ are exposed to client-side code.

Where should you store production environment variables for a Next.js app?

A .env.local only

B .env.production or hosting platform settings

C Inside your React components

D In the public folder

Production variables go in .env.production or your hosting platform's environment settings.

What happens if you change environment variables after building a Next.js app?

A Next.js ignores environment variables

B Changes apply immediately without rebuild

C Variables update only on client side

D You must rebuild the app to apply changes

Next.js replaces env variables at build time, so rebuild is needed to update them.

Why should sensitive environment variables not be committed to git?

A They expose secrets and risk security

B They slow down the app

C They cause syntax errors

D They are ignored by Next.js

Committing secrets risks exposing keys and passwords publicly.

How do you access an environment variable named NEXT_PUBLIC_API_URL in Next.js client code?

A import from env file

B window.NEXT_PUBLIC_API_URL

C process.env.NEXT_PUBLIC_API_URL

D It is not accessible in client code

Client code accesses public env variables via process.env with the NEXT_PUBLIC_ prefix.

Explain how environment variables work in Next.js production and why they are important.

Think about how to keep secrets safe and how Next.js uses these variables when building.

Describe the steps to safely add and use a new API key as an environment variable in a Next.js production app.

Consider naming, storage, security, usage, and deployment.