Build 10x products in minutes by chatting with AI - beyond just a prototype.
Topics
How do I add environment variables in Next.js?
What is the difference between public and private environment variables?
How can I securely store secrets in Next.js?
What are the allowed values for NODE_ENV?
Environment variables are essential tools for developers working with Next.js. They allow you to configure your application for different environments, such as development, testing, and production, without hardcoding sensitive data into your codebase. By using environment variables, you can keep your API keys, database connection strings, and other sensitive information secure.
This blog will guide you through the process of configuring environment variables in Next.js, ensuring that your application runs smoothly and securely across all environments.
Environment variables are key-value pairs that can be used to provide configurations for different application running environments. They are defined outside of the actual application code and can influence the behavior of an application. For instance, you might use environment variables to store API keys, database connection strings, or other sensitive data that should not be hardcoded into your application.
Using environment variables offers several benefits:
• Security: Keep sensitive data like API keys out of your codebase.
• Flexibility: Easily switch configurations between different environments (development, testing, production).
• Maintainability: Simplify the process of updating configurations without modifying the code.
Public environment variables are accessible from both the browser and the Node.js environment. They are useful for storing data that needs to be accessed by both the client and the server. For example, you might use public environment variables to store a Google Analytics tracking ID.
Private environment variables are only accessible from the Node.js environment. They are ideal for storing sensitive data that should not be exposed to the client, such as API keys or database connection strings.
In Next.js, you can add environment variables by creating a .env.local file in your project directory. This file will load every variable into the Node.js process, making them available for use on the server.
// .env.local API_KEY=your_api_key_here DB_HOST=your_database_host_here
The .env.local file is the most common way to add environment variables in Next.js. This file is loaded automatically by Next.js and is not checked into version control, ensuring that your sensitive data remains secure.
// next.config.js module.exports = { env: { API_KEY: process.env.API_KEY, DB_HOST: process.env.DB_HOST, }, };
Environment variables in Next.js have a specific load order. If you define a variable in both .env.development.local and .env, the value in .env.development.local will take precedence when NODE_ENV is set to development.
The allowed values for NODE_ENV are development, production, and test. These values determine which environment-specific configuration files are loaded.
In the development environment, you can use the .env.development file to specify environment variables that are only needed during development. This allows you to keep your development configurations separate from your production configurations.
For the production environment, you can use the .env.production file to specify environment variables that are only needed in production. This ensures that your production configurations are kept separate from your development configurations.
In a distributed team setup, it's crucial to securely store secrets like API keys and database connection strings. Next.js allows you to store these secrets in the .env.local file, which is not checked into version control. This ensures that your sensitive data remains secure and is only accessible to authorized team members.
Next.js evaluates all references to environment variables and hardcodes them into your client code at build time, which affects dynamic rendering. It is crucial to manage runtime environment values properly and read runtime environment variables securely to ensure your application behaves correctly in both server and client environments. If your frontend application needs access to dynamic environment variables at runtime, you should set up your own API to provide these variables to your client code.
• Use environment variables to store sensitive data: Keep API keys and database connection strings out of your codebase.
• Use a .env.local file for local development: This file is not checked into version control, ensuring that your sensitive data remains secure.
• Use environment-specific files: Use .env.development, .env.test, and .env.production to specify environment variables for different environments.
• Configure environment variables for production environments: Properly configure environment variables for production environments to manage application behavior and access sensitive data without hardcoding it in the codebase.
• Distinguish between build and runtime variables: Understand the distinction between build and runtime variables, especially when using NextJS with Fly.io, to set different values for the build phase and server-side runtime phase.
• Safely read environment variables during dynamic rendering: Safely read environment variables during dynamic rendering using methods like getServerSideProps or the App Router to ensure proper handling of sensitive data across different environments.
• Use the NEXT_PUBLIC prefix: To expose environment variables to the browser, prefix them with NEXT_PUBLIC.
Environment variables play a crucial role in configuring and securing your Next.js application. By following best practices and using the appropriate environment-specific files, you can ensure that your application runs smoothly and securely across all environments. Happy coding!
// .env.development
API_KEY=your_development_api_key_here// .env.production
API_KEY=your_production_api_key_here// pages/api/runtime-env.js
export default function handler(req, res) {
res.status(200).json({ apiKey: process.env.API_KEY });
}