Managing environment variables is important for web development, especially when working with different environments like development, production, and testing. Next.js allows you to use environment variables, which are values you can configure for different environments (like development or production). In this article, we will see how to Use Different .env Files with NextJs.

Next.js supports several `.env` file types

• `.env.local`: Loaded in all environments.
• `.env.development`: Loaded during development.
• `.env.development.local`: Overrides for development.
• `.env.production`: Loaded during production.
• `.env.production.local`: Overrides for production.
• `.env.test`: Loaded during testing.
• `.env.test.local`: Overrides for testing.

`.env.local`

Used for settings that apply to all environments. This file is always loaded.

Example: This configures an environment variable illustrating the endpoint for a local server’s API.

API_URL=http://localhost:3000

`.env.development`

Used specifically for development. Loaded when you run `next dev`.

Example: This configures an environment variable `illustrating the endpoint for a development environment’s API hosted on `example.com`.

API_URL=https://dev.example.com

`.env.development.local`

Overrides settings in the development environment. This file has the highest priority during development.

Example : This illustrates the overriding of settings in the development environment by setting the `API_URL` to `http://localhost:3000`, which takes precedence during development.

API_URL=http://localhost:3000

`.env.production`

Used specifically for production. Loaded when you run `next build` and `next start`.

Example: This indicates the endpoint for accessing the main API hosted on `example.com`.

API_URL=https://api.example.com

`.env.production.local`

Overrides settings in the production environment. This file has the highest priority during production.

Example: This indicates the endpoint for accessing the API on a secure environment hosted on `example.com`.

API_URL=https://secure.example.com

`.env.test`

Used specifically for testing. Loaded when you run tests.

Example: This indicates the endpoint for accessing the API in a testing environment hosted on `example.com`.

API_URL=https://test.example.com

`.env.test.local`

Overrides settings during testing. This file has the highest priority during testing.

Example: This indicates the endpoint for testing purposes on a local or internal server under the domain `example.com`.

API_URL=https://localtest.example.com

Steps to Create NextJs Application

Step 1: Create a Next.js Application

  npx create-next-app my-next-app  
 cd my-next-app

• Ensure your `package.json` is up to date. Here’s an example:

• Create different `.env` files in your project root.

`.env.local`

NEXT_PUBLIC_API_URL=http://localhost:3000

`.env.development`

NEXT_PUBLIC_API_URL=https://dev.example.com

`.env.production`

NEXT_PUBLIC_API_URL=https://api.example.com

Folder Structure

Folder Structure

Updated Dependencies

Dependencies

Example: Using env variable into the project.

// src/app/page.js
"use client"
import { useEffect } from "react";

export default function Home() {
    useEffect(() => {
        console.log("API URL:", process.env.NEXT_PUBLIC_API_URL);
    }, []);

    return (
        <div>
            <h1>API URL: {process.env.NEXT_PUBLIC_API_URL}</h1>
        </div>
    );
}

Steps to run:

npm run dev

Output: Running the application in different environments will display the corresponding `API URL: https://dev.example.com`.

Local Enviroment

Steps for Production:

npm run build
npm run start

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

Production Enviroment

Note : By using the NEXT_PUBLIC_ prefix, the environment variables are exposed to the browser, and both server-side and client-side rendering will use the same values, preventing hydration issues.

Conclusion

By following these steps, you can manage and use environment variables in your Next.js application effectively, ensuring the correct configurations are used in different environments. This not only helps in maintaining a clean and modular codebase but also simplifies the deployment process across various stages.