Part 89: Configuring Next.js Applications with Environment Variables: A Guide to Dynamic CMS URLs

[App] Deploying with External Services

[App] Deploying with External Services

When developing modern web applications, it's crucial to maintain flexibility in how your application connects to its backend services. One common requirement is to switch between different configurations for development and production environments. In this post, we’ll explore how to configure a Next.js application to use different CMS URLs depending on the environment.

The Problem: Hard-Coded CMS URLs

Currently, our Next.js app uses a hard-coded CMS_URL set to http://localhost:1337, which assumes a local instance of a CMS like Strapi is running. While this setup works perfectly for local development, it's not feasible for production, where the CMS will likely reside on a separate server.

Introducing Environment Variables

Environment variables provide a robust solution for managing configuration data that varies between environments. These variables are supported by the operating system and are accessible to any process running on your machine, including Node.js applications.

Accessing Environment Variables in Node.js

In Node.js, environment variables are accessed via process.env, an object containing all the environment variables available to the Node.js process. By setting a CMS_URL variable in your environment, you can dynamically change the CMS URL based on where your app is running.

Implementing Environment Variables in Next.js

Step 1: Define Environment Variables

Instead of hard-coding the CMS URL, we'll define it as an environment variable. You can set this variable manually in your terminal using the export command:

export CMS_URL=http://localhost:1337

Step 2: Use Environment Variables in Your Code

Modify your code to read the CMS_URL from process.env:

//lib/reviews.js
const CMS_URL = process.env.CMS_URL;

This change allows your app to dynamically use the CMS URL defined in the environment.

Step 3: Simplifying Development with .env Files

Manually setting environment variables can be cumbersome, especially for local development. To streamline this process, Next.js supports .env files, where you can define all required variables. Create a .env.local file at the root of your project and add:

CMS_URL=http://localhost:1337

Next.js automatically loads this file, setting the correct environment variables for your application.

Step 4: Manage Environment-Specific Configurations

To handle different configurations, you can use multiple .env files. For instance, a .env file can hold default values, while .env.local provides overrides for local development. If both files exist, the values in .env.local take precedence. Additionally, values set manually in the terminal will always override those in any file.

Step 5: Keep Sensitive Information Secure

Environment variables in Next.js are server-side by default, meaning they are not accessible in client-side code. This ensures sensitive data, like API keys, remains secure. If a variable needs to be available on the client, prefix it with NEXT_PUBLIC_, making it explicit that the data is public.

NEXT_PUBLIC_CMS_URL=http://localhost:1337

Note: Be cautious with what you expose publicly. Avoid using this prefix for sensitive information.

Final Touches: Version Control and Security

Ensure .env files, especially those containing sensitive data, are excluded from version control by adding them to .gitignore. This prevents accidental exposure of secrets:

/.env*.local

Conclusion

By leveraging environment variables, you can easily configure your Next.js application for different environments, ensuring flexibility and security. This approach not only simplifies development but also prepares your app for seamless transitions to production. Whether you're connecting to a local CMS for testing or a remote one in production, environment variables provide a clean and efficient solution.