Next_public_app_env

Ditch process.env, use a typed config

You have some values in your application that need to change depending on what environment or situation the app is used in. You decide to pass that configuration into your app using environment variables and access them using . Great decision! Your app is portable, your configuration isn’t hard-coded, and you aren’t exposing secrets in your codebase.

But now you have a bunch of references all over the place. Every dev on the team uses them in a different way. It’s hard to track what is even required to configure your app, let alone what those configuration values actually need to be. It’s the wild west.

There’s a better way! Centralize your configuration in one place and never look at a again. This article will go over a configuration best-practice that has worked well at Echobind on a number of our projects.

Centralize Configuration

Rather than having configuration spread all over your application, put it in one place. A simple version of that might look like:

All your access is in one file. It’s easy to see what you need to configure you application. And you get type safety for free!

Now whenever you want to use a config value, you

How to use environment variables in Next.js

Next.js comes with built-in support for environment variables, which allows you to do the following:

Warning: The default template ensures all files are added to your . You almost never want to commit these files to your repository.

Loading Environment Variables

Next.js has built-in support for loading environment variables from files into .

This loads , , and into the Node.js environment automatically allowing you to use them in Next.js data fetching methods and API routes.

For example, using :

Loading Environment Variables with

If you need to load environment variables outside of the Next.js runtime, such as in a root config file for an ORM or test runner, you can use the package.

This package is used internally by Next.js to load environment variables from files.

To use it, install the package and use the function to load the environment variables:

Then, you can import the configuration where needed. For example:

Implement Plausible Analytics in Next.js

Plausible is made and hosted in Europe and complies with GDPR guidelines, which is a big advantage for me.

Easy to use and privacy-friendly Google Analytics alternative

Although Plausible complies with all data protection guidelines, it is also an efficient tool for website metric analysis. Plausible's simple integration is particularly attractive due to its affordability, open-source nature, and self-hosting flexibility. These features make Plausible a great addition to my development toolkit.

Why Plausible?

Before delving further into the setup process, let's review why Plausible is my preferred analytics solution.

Privacy focused:
Origin: Its European roots align well with projects aimed at European audiences, ensuring data protection regulations are met with ease
Performance Analysis: Despite its lightweight footprint, Plausible provides valuable insights into website performance and user engagement
Ease of Use: The simplicity of integrating Plausible into any project, alongside its affordability and open-source nature, makes it an excellent choice for developers and companies alike

Setting Up Pla

Can't modify the NODE_ENV of a branch
Hi, @franckdsf! Welcome to the Vercel Community.
Vercel automatically sets to “production” for all deployments, including preview deployments, to ensure optimal performance . This is why changing directly doesn’t work as expected.
You can function around this by using a custom environment variable like or instead of relying solely on .
Vercel allows you to position environment variables for specific branches.
Vercel
Environments Variables per Git branch - Vercel – Vercel
The best way to deploy your Next.js site.
Now, you can use your custom environment variable to determine the environment. For example:
Then you can configure your application logic and use these custom environment checks to control your application’s behavior:
Or if you need to exploit environment variables that shouldn’t be exposed to the client, you can create a server-side environment configuration. Create a file fancy in your project:
Then use this in your server-side code:
After redeploying your project after setting up these environment variables the changes should take effect.
Let us realize how you get on!

Stripe Payment Integration Issues
Current versus Expected Behavior
Expected Behavior:
Payment system should work seamlessly in both test and production environments
Users should be able to complete payments for Premium (€7.99/month) and Epic (€20.99/month) plans
Payment intents should be created successfully with proper Stripe configuration
System should automatically detect environment and use appropriate Stripe keys
Current Behavior:
Payment system frequently falls back to “demo mode” even when Stripe keys are configured
Users encounter “Payment system temporarily unavailable” errors
Inconsistent environment detection between development and production
Payment intents fail to create due to configuration issues
Error messages reference “Alive Team” but don’t provide clear resolution steps
Code Configuration Issues
1. Environment Variable Configuration Problems
Current problematic setup in :
STRIPE_SECRET_KEY=sk_live_… # Used for production
STRIPE_SECRET_TEST_KEY=sk_test_… # Used for development
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_… # Always live key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_TEST_KEY=pk_test_… # Not being used prope