Environment Variables in Next.js

What You’ll Learn 📚

• What environment variables are and why they’re important
• How to set up and use environment variables in Next.js
• Common pitfalls and how to avoid them
• Practical examples to solidify your understanding

Introduction to Environment Variables

Environment variables are like secret notes you pass to your application. They store configuration settings that your app needs to function properly, like API keys or database URLs. This way, you can keep sensitive information out of your codebase. In Next.js, environment variables are easy to use and incredibly powerful!

Key Terminology

• Environment Variables: Special variables used to configure applications without hardcoding sensitive information.
• Process Environment: The environment in which a process runs, containing all the environment variables.
• dotenv: A module that loads environment variables from a .env file into process.env.

Getting Started with a Simple Example

npx create-next-app my-next-app

cd my-next-app

touch .env.local

NEXT_PUBLIC_API_URL=https://api.example.com

import React from 'react';

const HomePage = () => {
  return (
    

      
Welcome to My App
      
API URL: {process.env.NEXT_PUBLIC_API_URL}
    
  );
};

export default HomePage;

Lightbulb Moment: Environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser, making them accessible in your React components!

Progressively Complex Examples

Example 1: Using Multiple Environment Variables

Add more variables to your .env.local:

NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_API_KEY=1234567890abcdef

Access them in your component:

import React from 'react';

const HomePage = () => {
  return (
    

      
Welcome to My App
      
API URL: {process.env.NEXT_PUBLIC_API_URL}
      
API Key: {process.env.NEXT_PUBLIC_API_KEY}
    
  );
};

export default HomePage;

Example 2: Using Environment Variables in Server-Side Code

Environment variables without the NEXT_PUBLIC_ prefix are only accessible on the server side. Let’s use one in a getServerSideProps function:

export async function getServerSideProps() {
  const apiUrl = process.env.API_URL;
  // Fetch data from the API
  const res = await fetch(apiUrl);
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

const ServerSidePage = ({ data }) => {
  return (
    

      
Server-Side Rendered Data
      
{JSON.stringify(data, null, 2)}

  );

};
export default ServerSidePage;

Expected Output:
Server-Side Rendered Data: [JSON data from your API]

Note: Ensure your API_URL is set in your .env.local file without the NEXT_PUBLIC_ prefix for server-side use.
Common Questions and Answers

Q: Why use environment variables?
A: They help keep sensitive information secure and allow easy configuration changes without altering the codebase.
Q: What’s the difference between NEXT_PUBLIC_ and non-prefixed variables?
A: NEXT_PUBLIC_ variables are accessible in both client and server-side code, while non-prefixed variables are server-side only.
Q: Can I use environment variables in CSS?
A: No, environment variables are not directly accessible in CSS files.
Q: How do I troubleshoot missing environment variables?
A: Ensure your .env.local file is correctly named and located at the project root. Restart your development server after changes.

Troubleshooting Common Issues
Warning: Always restart your development server after modifying the .env.local file to ensure changes take effect.
If your environment variables aren’t working, check the following:

Ensure your .env.local file is at the root of your project.
Verify variable names are correctly prefixed with NEXT_PUBLIC_ if needed.
Restart the development server after changes.

Practice Exercises
Try creating a new environment variable and use it in both client-side and server-side code. Experiment with different prefixes and observe the behavior.
For more information, check out the Next.js Environment Variables Documentation.