Setting Up Environment Variables in Next.js
1. Creating the .env File: To store your environment variables, create a .env file in the root directory of your Next.js project.
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=mongodb://localhost:27017/my_database
2. Prefixing Environment Variables: Next.js distinguishes between server-side and client-side environment variables. For variables to be accessible on the client side, they must be prefixed with NEXT_PUBLIC_.
3. Accessing Environment Variables To use environment variables in your code, reference them via process.env.
// pages/api/data.js
export default function handler(req, res) {
const dbUrl = process.env.DATABASE_URL;
// Use dbUrl for database connection logic
res.status(200).json({ message: 'Connected to database' });
}
For client-side usage, ensure the variable is prefixed with NEXT_PUBLIC_:
// components/ApiComponent.js
const apiUrl = process.env.NEXT_PUBLIC_API_URL;
function ApiComponent() {
return <div>API URL: {apiUrl}</div>;
}
export default ApiComponent;
Environment Variables are Undefined in Next.js App
Environment variables play a crucial role in web development, especially in configuring sensitive information such as API keys, database URLs, and other configuration settings.
In Next.js, handling these variables correctly ensures the smooth functioning of your application.
This article will guide you through setting up environment variables in Next.js and troubleshooting common issues.