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:

https://i.sstatic.net/bUVp4.png

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.

https://i.sstatic.net/0YvJX.png

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:

https://i.sstatic.net/7uVu0.png

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

typescriptgoogle-cloud-platformnext.jsdeploymenti18next

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: https://i.sstatic.net/T94xJ.png

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

Implementing Google Tag Manager in NextJS to Address Discrepancies in Session and Click Tracking

After following the Google Tag Manager implementation recommended by NextJS developers at https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager, we noticed discrepancies with some services connected through GTM (such as Google Anal ...

reactjsgoogle-analyticsnext.jsgoogle-tag-manager

Practical strategy for developing and launching a TypeScript/Node.js application

I'm currently developing a node.js app using Typescript, which requires compilation to JS before running. As someone with a background in java/jvm, I'm hesitant about the deployment process where code is pushed to git, built/compiled on the serve ...

javascriptnode.jsdeploymenttypescript

Sanity-Algolia encounters an error while utilizing pt::text

I am currently working on integrating Algolia search with Sanity CMS by utilizing the sanity-algolia library (reference ) However, I encountered an issue when trying to extract plain text from Portable Text rich text content using the pt::text function. T ...

next.jsalgoliasanitygroq

Access file using operating system's pre-installed application

How can I open a file using the default application for that file type on different operating systems? For example, when opening an image.png on Mac, it should open with Preview, and on Windows with Windows Photo Viewer. I know you can use open image.png ...

javascriptnode.jstypescript

Is there a way to specify this component without it being nested within the parent element?

So I have this component nested within another one const selectColumn = useMemo<ColumnDef<Person>[]>( () => [ { id: "select", header: ({ table }) => ( <IndeterminateCheckbox {.. ...

reactjstypescript

Placeholder image displayed while a video is loading on NextJS version 14

In my Next.js 14 project, I am using three videos for a slider with Swiper js. However, on the first slide, the video sometimes takes time to load, resulting in a red background image being displayed. I have attempted to use an image placeholder before th ...

imagenext.jsswiper.jsplaceholder

Expanding material UI theme choices through module augmentation is currently ineffective with TypeText

For those experiencing the issue, a codesandbox has been provided for convenience. Click here to access the codesandbox. Curiously, the TypeText feature is not functioning properly while the SimplePaletteColorOptions is working as expected. Despite being ...

typescriptmaterial-uimodule-augmentation

Found a minor syntax problem in an Angular service related to error handling declaration

As I was working on customizing the Angular tutorial to fit my needs, I found myself wanting to merge the two error handler methods showcased in the tutorial into one. I appreciate the functionality of both methods and believe combining them will be benefi ...

angulartypescripterror-handlingrxjs

Looking for a method to efficiently populate an array with values in Typescript

Here is an example of how I work with arrays in my code: var alphas: string[]; alphas = ['abc1', 'abc2', 'abc3']; // (this array can be changed) My modal class looks like this: export class Team { TeamName: string; } To ...

angulartypescript

The object might be undefined; TypeScript; Object

Why is it that the object may be undefined, even though it is hard-coded in my file as a constant that never changes? I've tried using ts-ignore without success. const expressConfig = { app: { PORT: 3000, standardResponse: `Server ...

typescriptexpresswebstorm

How can I set up TypeScript warnings in Visual Studio Code to display as errors?

Take this scenario for instance async function a() { await null; } In VS Code, there is a minor warning about using await: 'await' has no effect on the type of this expression. ts(80007) Is there a way to elevate that warning to an error in b ...

typescriptvisual-studio-code

How can we strengthen the type checking when defining the sorting function for json properties?

When dealing with a json structure from a service that contains .attributes json values, I often find myself needing to sort either by id from the DTO or by several attributes from the IContactsAttributes. The microservice returns this specific structure: ...

angulartypescript

Encountering a next-auth error stating "please attempt signing into a different account" while deploying on

I have been grappling with this issue for a considerable amount of time. In order to identify the root cause, I decided to test the Next-auth authentication by executing the next-auth example code found at this link. Everything ran smoothly on my local mac ...

firebaseauthenticationnext.jsgoogle-oauthnext-auth

What sets TypeScript apart from AtScript?

From what I understand, TypeScript was created by Microsoft and is used to dynamically generate JavaScript. I'm curious about the distinctions between TypeScript and AtScript. Which one would be more beneficial for a JavaScript developer to learn? ...

javascriptangularjstypescriptatscript

Creating a nested/child route structure within the Angular 2 router

Looking to implement nested routing for mypage/param1/1/param2/2 format in the URL. The first parameter is represented by 1 and the second one by 2. It's imperative that there are always two parameters, otherwise an error should be displayed. However, ...

angulartypescriptroutes

Waiting patiently for the arrival of information, the dynamic duo of Angular and Firebase stand poised and

Here is the given code snippet: signIn(email, password) { let result = true; firebase.auth().signInWithEmailAndPassword(email, password).catch(error => result = false); waits(100); return result; } I have a ...

angulartypescriptfirebase

NestJS Logger: Issue setting logger types in main.ts

When attempting to specify logger types in main.ts as illustrated in the official documentation: const app = await NestFactory.create(ApplicationModule, { logger: ['error', 'warn'], }); await app.listen(3000); I am encountering an i ...

javascriptnode.jstypescriptnpmnestjs

Why is my custom 404 page failing to load after building my Next.js application?

I recently set up a custom 404 page for my Next.js app and wanted to test it locally before deploying to the server. To do this, I used the "serve" package to host the project on my local machine. However, when I tried navigating to a non-existent page, th ...

javascriptreactjstypescriptnext.jsfrontend

Typescript decorator specifically designed for abstract generic Container class's child elements

Struggling with Typescript generics in my project, specifically with Typescript 2.6. My goal is to design a MobX store that implements a class decorator for basic authentication checks. This decorator should take a class type derived from the abstract gen ...

reactjstypescriptgenericstypescript-decoratortypescript2.6

Exploring the Angular TypeScript Method for Rendering Nested Objects in an Array

Within this array, I have a collection of objects that contain properties for model and color. My goal is to present these objects in a table format, with individual access to the color values. grp = [ {model: "CF650-3C", color: {Orange: 3, Black ...

angulartypescriptdictionarynestediteration