set environment variables in next.js

Question

I am trying to set the ENV in Next.js

next.config.js

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const withSass = require('@zeit/next-sass');
module.exports = withSass({
  target: 'serverless',
  env: {
    DEPLOY_STAGE: stage, // How can I set this dynamically when I deploy it at cli
  },
  webpack: (config, options) => {
    if (config.resolve.plugins) {
      config.resolve.plugins.push(new TsconfigPathsPlugin());
    } else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
    }

    return config;
  }
});

Now I am deploying my project with this cmd

sls deploy --stage dev | sls deploy --stage prod

How can I set the DEPLOY_STAGE dynamically?

Answer 1

You could also prefix your commands, eg;

STAGE="dev" sls deploy

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const withSass = require('@zeit/next-sass');
module.exports = withSass({
  target: 'serverless',
  env: {
    DEPLOY_STAGE: process.env.STAGE
  },
  webpack: (config, options) => {
    if (config.resolve.plugins) {
      config.resolve.plugins.push(new TsconfigPathsPlugin());
    } else {
      config.resolve.plugins = [new TsconfigPathsPlugin()];
    }

    return config;
  }
});

Answer 2

try this

env: {
    DEPLOY_STAGE: process.env.NODE_ENV,
},