Using Environment Variables in Next.js | updated 2024

50

Environment variables are crucial for managing configuration settings in different environments, such as development, testing, and production. In this guide, we will explore how to use environment variables in a Next.js application.

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn
• A Next.js project

Steps for Using Environment Variables in Next.js 

Step 1: Setting Up the Next.js Project

If you don’t have a Next.js project set up already, you can create one using the following command:

npx create-next-app my-nextjs-env
# or
yarn create next-app my-nextjs-env

Navigate to your project directory:

cd my-nextjs-env

Step 2: Creating Environment Variables

Next.js supports environment variables by using .env files. Create the following environment variable files in the root of your project:

.env.local (for local development)

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:3000/api
NEXT_PUBLIC_ANALYTICS_ID=local-analytics-id

.env.development (for development environment)

# .env.development
NEXT_PUBLIC_API_URL=https://dev.api.example.com
NEXT_PUBLIC_ANALYTICS_ID=dev-analytics-id

.env.production (for production environment)

# .env.production
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_ANALYTICS_ID=prod-analytics-id

Step 3: Using Environment Variables in Next.js

To use these environment variables in your Next.js application, you can access them via process.env. Environment variables prefixed with NEXT_PUBLIC_ can be accessed on both the server and client sides.

Create a component that uses environment variables

// components/ShowEnv.js
export default function ShowEnv() {
  return (
    <div>
      <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
      <p>Analytics ID: {process.env.NEXT_PUBLIC_ANALYTICS_ID}</p>
    </div>
  );
}

Use the component in your page:

// pages/index.js
import ShowEnv from '../components/ShowEnv';

export default function Home() {
  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <ShowEnv />
    </div>
  );
}

Step 4: Running the Application

Run your Next.js application to see the environment variables in action. The variables will change based on the environment you are running the application.

For local development

npm run dev
# or
yarn dev

Navigate to http://localhost:3000 to see the environment variables from .env.local.

For production build

npm run build
npm start
# or
yarn build
yarn start

Navigate to http://localhost:3000 to see the environment variables from .env.production.

Step 5: Accessing Server-Side Environment Variables

If you need to access environment variables only on the server side, you can omit the NEXT_PUBLIC_ prefix. Create a new environment variable in .env.local:

# .env.local
DATABASE_URL=postgres://user:password@localhost:5432/mydatabase

Use it in your Next.js API route

// pages/api/hello.js
export default function handler(req, res) {
  const dbUrl = process.env.DATABASE_URL;
  res.status(200).json({ message: `Database URL is ${dbUrl}` });
}

Conclusion

This guide covered how to use environment variables in a Next.js application. We set up different environment variable files, used environment variables in components, and accessed server-side environment variables. Proper management of environment variables helps keep your application configuration organized and secure across different environments.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Using Environment Variables in Next.js – FAQs