Leverage process.env variables within your next.config.js file

Currently, I have an application running on NextJS deployed on GCP. As I set up Continuous Deployment (CD) for the application, I realized that there are three different deploy configurations - referred to as cd-one.yaml, cd-two.yaml, and cd-three.yaml. Each deployment configuration has a corresponding app.yml file - app-one.yml, app-two.yml, and app-three.yml.

An example of the code within an app.yml file:

The only varying elements in each app.yml file are the service and GCP_SERVICE values (e.g., one, two, and three). Fortunately, the CD setups are functioning correctly and deploying successfully. However, I encountered an issue when attempting to utilize these variables within my next.config.js file.

By referencing the variables from app.yml, everything works as intended, yielding the expected behavior. But when I tried to implement the same logic in my next.config.js file, it seems that the variables are not being passed through properly, causing it always to default to the final condition. Here's the snippet of my next.config.js file:

Despite numerous attempts, I'm unable to resolve this issue. Are there any alternative methods to accomplish this task effectively?

Answer №1

next-i18next.config.js and next.config.js serve different purposes in the project setup. While the former is meant for runtime configuration, the latter is used for build-time configuration. It's important to note that if your build process does not involve the use of app.yaml (such as in a CI/CD pipeline that doesn't incorporate these configurations), then the environment variables may be missing. The app.yaml file is specifically tailored for Google App Engine and is applied during deployment, not during the actual build process.

To ensure proper handling of environment variables, it is recommended to include them in the Cloud Build Trigger settings:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering issues in d3.js following the transition to Angular 8

After upgrading my Angular 4 app to Angular 8, I encountered an issue where the application works fine in development build but breaks in production build. Upon loading the application, the following error is displayed. Uncaught TypeError: Cannot read p ...

Nextjs 12.2 now offers the option to include custom headers prior to making API route requests

Can a middleware or other structure be used to set custom headers for a request before it is sent via api routes? I am working with Next.js 12.2 and need to add authorization headers to many existing requests in the project. I am looking for a way to crea ...

Angular 2's ng-required directive is used to specify that

I have created a model-driven form in Angular 2, and I need one of the input fields to only show up if a specific checkbox is unchecked. I was able to achieve this using *ngIf directive. Now, my question is how can I make that input field required only whe ...

Vue component prop values are not properly recognized by Typescript

Below is a Vue component I have created for a generic sidebar that can be used multiple times with different data: <template> <div> <h5>{{ title }}</h5> <div v-for="prop of data" :key="prop.id"> ...

When attempting to sign into django, next-auth encounters an ECONNREFUSED ::1:8000 error with Axios

Technology Stack Backend: django (dj_rest_auth for authentication) Frontend: nextjs (next-auth for authentication, environment variables are set correctly.) Operating System: Debian 12 - bookworm Dependencies: redis, memcached, rabbitmq running inside LXD ...

What methods can be used to extract information from the applications uploaded/deployed on the Solana blockchain?

I've been attempting to retrieve data from the Solana blockchain, but I keep encountering errors and I'm unsure of how to proceed. After writing a program, building it, deploying it, and running test cases using Anchor, I now want to utilize Rea ...

Getting a list of the stack resources available in cloudformation using TypeScript

My team is developing an application that will deploy multiple stacks to AWS. One of these stacks is called SuperStar, and it can only exist once per AWS account. I am currently exploring how our TypeScript CDK can retrieve a list of stacks from CloudFor ...

What is the reason that (click) does not send my data within <button>, while (change) within <input> does in Angular and HTML?

I am facing an issue while trying to send data to my Glassfish RESTful server. The method is activated successfully when I use (change) inside the input tag, but it doesn't work when I try using (click) or (change) to activate the method. I attempted ...

Tips on resolving the flickering issue in dark mode background color on NextJS sites

One problem I am facing is that Next.js does not have access to the client-side localStorage, resulting in HTML being rendered with or without the "dark" class by default. This leads to a scenario where upon page reload, the <html> element momentari ...

Facing Issue with NextJS 13 App: Images Fail to Load When Accessed via GitHub Pages Route

Attempting to host a basic NextJS 13 website on GitHub pages has revealed some strange behavior that appears to only affect Safari users (both iOS and MacOS). Upon initial loading, the images appear correctly. However, as I navigate between routes, I enco ...

Separate .env configurations tailored for development and production environments

Managing different content in my .env files is crucial as I work with both next.js and node.js. The settings vary between development and deployment environments. During development: DOMAIN_URL=https://localhost:3000 GOOGLE_CLIENT_ID='abc' For ...

The module "ng-particles" does not have a Container component available for export

I have integrated ng-particles into my Angular project by installing it with npm i ng-particles and adding app.ts import { Container, Main } from 'ng-particles'; export class AppComponent{ id = "tsparticles"; /* Using a remote ...

What strategies can I implement to streamline the use of these functions instead of creating a separate one for each textfield

Currently, I am learning how to use spfx with SPO (SharePoint Online). In my form, there are multiple text fields that need to be handled. I have two class components named A and B. Whenever a textfield in component B is typed into, a function sends the in ...

Utilizing local component files as packages in NPM: A comprehensive guide

Lately, I've been working on a substantial project using React along with react-router-dom. However, I recently started incorporating NextJS into the project and noticed that it lacks some features that are present in react-router-dom. To address this ...

Exploring the JSON Array in Angular5 with the power of ngFor

Currently, I am working on a project using Angular5 and encountering an issue with the *ngFor directive. The model class I have defined looks like this: export class FetchApi { value: Array<String>; api_status: string; api_version: string; d ...

The HttpPut request code format is malfunctioning, although it is effective for another request

I'm struggling with a HTTPPUT request that just won't get called. Strangely enough, I have a similar put request that works perfectly fine for another tab even though both pages are practically identical. I've exhausted all options and can&a ...

Ionic 3 is unable to find a provider for CallNumber

Recently, I have been working with Ionic 3 and encountered an issue when trying to call a number using the Call Number plugin. Here are the steps I followed to add the plugin: ionic cordova plugin add call-number npm install --save @ionic-native/call-numb ...

Angular 2 has its own version of $q.when called RxJs

Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token: ... if (!refreshTokenInProgress) { refreshTokenInProgress = AuthService.refreshToken(); } $q.when(refreshTokenInProgress, function () { refreshTokenInProgre ...

Challenge with the revalidateTag() function in Next.js app routing and Sanity integration

I have been struggling to integrate the next app router with Sanity and revalidateTag() function. It has been a challenging journey as I tried to make it work for five full days across multiple projects. Here is what I have discovered so far: Project 1: T ...

How do I incorporate global typings when adding type definitions to an npm module?

Suppose I create a node module called m. Later on, I decide to enhance it with Typescript typings. Luckily, the module only exports a single function, so the m.d.ts file is as follows: /// <reference path="./typings/globals/node/index.d.ts" /> decl ...