Next.js Environment Variables

Last Updated : 29 Jul, 2024

Environment variables are a fundamental aspect of modern web development, allowing developers to configure applications based on the environment they are running in (development, testing, production, etc.).

In Next.js, environment variables provide a flexible and secure way to manage configuration settings for your application. These settings can include API endpoints, database connection strings, feature flags, and more. By using environment variables, you can ensure that sensitive information is not hardcoded into your application's source code, enhancing both security and maintainability.

In this article, we will learn how we can use environment variables in Next.js. Next.js comes with built-in support for environment variables that you can declare and use anywhere in your project.

Table of Content

Setting Up Environment Variables in Next.js

Next.js supports loading environment variables from .env files, which follow a specific naming convention to differentiate between different environments.

Syntax:

// Filename .env  NEXT_PUBLIC_API_URL=https://api.gfg.com DATABASE_URL=postgres://user:password@localhost:5001/dname

Note: The name of variables to be accessed from the client side / Public variables must be initialized with NEXT_PUBLIC_

Below are some naming conventions according to the requirement of env variables in the application

.env: Loaded for all environments.
.env.local: Loaded for all environments, but not included in version control.
.env.development: Loaded in development environment.
.env.production: Loaded in production environment.
.env.test: Loaded in test environment.

Accessing Environment Variables

The environment variables can be accessed inside the application using the process.env prefix

Syntax:

inside js/ts files:

const API = process.env.NEXT_PUBLIC_API_URL const DB = prosess.env.DATABASE_URL

inside configuration files:

JavaScript

// Filename - next.config.js module.exports= { env: { apiKey: process.env.API_KEY, }, }

Steps to Implement Environment Variables in Next.js

Follow the below steps to set up the environment variable in Next.js application.

Step 1: To create a new Next.js App, run the below command in your terminal:

npx create-next-app GFG

Step 2: After creating your project folder (i.e. GFG ), move to it by using the following command:

cd GFG

Project Structure:

Step 3: Creating .env.local file - We will create a .env.local file to create environment variables that are specific to our local machine. There are also other environment variables file type that you can use like:

.env
.env.[environment]
.env.[environment].local
.env.development
.env.development.local

After creating the file, we can store our environment variables on them.

Example: We can have .env.local file with the following data.

KEY="GEEKSFORGEEKS" ID=85674

Step 4: Accessing Environment Variables - Now you can access your environment variable using 'process.env.VARIABLE_NAME'. To try this, let's access our environment variable from the Homepage of a NextJs app.

Filename: pages/index.js

JavaScript

// Filename: pages/index.js  export const getServerSideProps = async () => {     return {         props: {             // Returning value of Environment             // variable as prop             value: process.env.KEY,             id: process.env.ID,         },     }; };  export default function Home({ value, id }) {     return (         <div>             {/* Adding Heading */}             <h1>This is Homepage</h1>              {/* Adding the value of Environment variable */}             <h2>Value of KEY variable:- {value}</h2>             <h2>Value of ID variable:- {id}</h2>         </div>     ); }

Step 5: Run the application - Run the following command to start the server.

npm start

Output: We will see the following output on your browser screen.

Conclusion

Next.js environment variables offer a secure and flexible method to manage configuration settings across various environments. Utilizing .env files and adhering to best practices ensures sensitive information remains protected. This approach enhances the robustness and adaptability of your application's configuration.

MDX in Next JS

imranalam21510

Improve

Article Tags :

Next.js Environment Variables

Setting Up Environment Variables in Next.js

Syntax:

Accessing Environment Variables

Syntax:

Steps to Implement Environment Variables in Next.js

Project Structure:

Conclusion

Similar Reads

Next js basics

Next js Routing

Next js Data Fetching

Next js Rendering

Next js Styling

Next js Optimizing

Next js Configuring