Next starter

Setting Up Environment Variables

Environment variables are key-value pairs that allow you to configure your Next.js application's behavior without hardcoding sensitive information or settings directly into your code. This approach enhances security and flexibility across different environments, such as development, staging, and production.

In this starter template, two example files are provided to help you set up your environment variables:

.env.example: Contains the list of required environment variables with placeholder values, serving as a template for creating your own environment files.
.env.local.example: May include additional or specific environment variables for local development, also with placeholder values.

Copy the Example File Create a new file named `.env.local` by copying

.env.example in the root of your project:

cp .env.example .env.local

Fill in the Values Open `.env.local` in a text editor and replace the

placeholder values with your actual values. For example:

# In .env.example
API_KEY=your_api_key_here

# In .env.local
API_KEY=abc123xyz

Understand Variable Scope

Variable Scope

Server-side Variables: By default, environment variables are only available on the server side. Use these for sensitive data like API keys or database credentials. - Client-side Variables: To expose a variable to the browser (e.g., a public API URL), prefix it with NEXT_PUBLIC_.

NEXT_PUBLIC_API_URL=https://api.example.com

Important

Never expose sensitive information via NEXT_PUBLIC_ variables, as they become accessible in the client-side code.

Access Variables in Your Code - For server-side variables: Use

process.env.VARIABLE_NAME. - For client-side variables: Use process.env.NEXT_PUBLIC_VARIABLE_NAME in your components.

// Server-side only
const apiKey = process.env.API_KEY;
 
// Client-side accessible
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Handle Production Environments For production deployments (e.g., on

Vercel or Netlify), set environment variables through your hosting platform's dashboard or configuration settings. Avoid committing sensitive data to your repository.

Additional Notes

.env.local Security

This file is automatically ignored by Git (per .gitignore), ensuring sensitive data stays local and uncommitted.

Shared Variables

If you have non-sensitive variables to share across environments, you can create a .env file and commit it. However, for sensitive data, rely on .env.local locally and platform settings in production.

Restart Your Development Server After updating `.env.local`, restart

your Next.js development server to apply the changes:

pnpm dev

Optional: Differentiate `.env` and `.env.local`

In Next.js projects, environment variables are typically stored in .env.local. The .env file is reserved for the database URL.

By following these steps, you’ll securely manage your application’s configuration and sensitive information across all environments. Happy coding!

The .env.local.example file may provide additional guidance or example values for local development. Refer to it if you need examples beyond what’s in .env.example, but use .env.local as your primary local configuration file.