How to generate a next build with development environment?

[dulcetti]

Hi guys. I have three different environments in my project: local development, staging (for QA's), and production. With next dev and next start everything is ok, but I have a problem because I need to run the next build with staging environments.

I create three files: .env.local, .env.staging, and .env.production, but when I run the next build, the production always is called.

I created two tasks on scripts node on package.json:

"build:hmg": "NODE_ENV=staging ENV=staging next build && next export",
"build:prod": "NODE_ENV=production next build && next export",

I created and environment.config.js:

const env = process.env.NODE_ENV || 'staging';

export const environment = {
  staging: {
    API_URL: 'URL STAGING',
  },
  production: {
    API_URL: 'URL PRODUCTION',
  },
}[env];

And created the API Service to get data:

import fetch from 'isomorphic-unfetch';
import { environment } from '../../environment.config';

export const fetchData = async () => {
  const res = await fetch(`${environment.API_URL}/`).then((items) => items.json());
  const plans = res.data;
  return { plans };
};

But the task yarn build:hmg always generates the production build.

What I was do wrong?

Regards

[rafaelalmeidatk]

NODE_ENV is an environment variable utilized by a lot of tools to change behaviors and optimize stuff depending on the environment the code is running. It is not meant to have different values other than development, test or production.

What you are looking for is your own environment variable to control the deploy stage of your app, it can be named anything, like DEPLOY_STAGE or APP_ENV. With a different env var, you can do combinations like NODE_ENV=production DEPLOY_STAGE=staging

[dulcetti]

Thanks for your answer. Well, the problem is on the build. The site is static HTML, but the request to API as on runtime. So, when the request is executed, the env list isn't listed.

I change the task to DEPLOY_STAGE=staging next build && next export, but the DEPLOY_STAGE isn't visible to request, the env object stay empty.

I'm trying to export on next.config.js:

require('dotenv').config();
const withImages = require('next-images');
module.exports = withImages({
  env: {
    ENV: process.env.NODE_ENV,
    fodasse: 'teste',
  },
});

But the env object continuous empty =/

[Keshavdulal]

I am using package.json's script to copy different environment secrets to .env.local based on the command invoked.

"build-dev":"cp .env.dev .env.local && yarn build",
"build-stag":"cp .env.stg .env.local && yarn build",
"build-prod":"cp .env.prod .env.local && yarn build"

I won't say its ideal but get the job done in my case.

Keep in mind, process.env.NODE_ENV will always be production in all the 3 scripts above.
And don't store your env files in standard format that nextjs's build command can detect.
Perhaps use .env.dev, .env.stg, .env.prod

https://stackoverflow.com/a/76724510/3556531

[yeecai]

coool, you saved my day, bro

[philwolstenholme]

A new option for this is coming in the next Next release (or maybe the one after depending on how many changes from canary are included in the release): #65463