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.
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: It will look like this.
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
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.
