Next.js: how to use different env file for different environment?

Question

Below is the code from package.json file

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
},

Below is my next.config.js file, here console.log always undefined

require("dotenv").config();
console.log(process.env.BASE_URL)
module.exports = {
  env: {
    API_BASE_URL: process.env.BASE_URL
  },
  reactStrictMode: true,
}

And this is in the .env.development

BASE_URL: 'http://localhost:3000'

When I ran the npm run dev command, it prints on terminal "Loaded env from /var/www/html/next/next-SC/.env.development"

So, why the console prints undefined always.

I'm using next js version "10.0.4"

Because file nextjs config would be loaded before env file loaded. — cuongdevjs
– cuongdevjs, Commented Jan 14, 2021 at 10:20
Shouldn't the env var in your .env.development be set like BASE_URL=http://localhost:3000? — juliomalves
– juliomalves, Commented Jan 14, 2021 at 11:43
In my Ubuntu server, I just set different environment variable in my local and server. They are fetched automatically. Just need to remember that, if you want to expose the environment variable to public, you have to prefix, NEXT_PUBLIC — itachi
– itachi, Commented Jan 14, 2021 at 12:54

Bill · Accepted Answer · 2021-01-14 13:06:23Z

1

I assume you are using React with nextjs. If not, then please disregard this answer. I am doing the same thing. React has built in support for env vars. All you need to do is to prefix REACT_APP to your environment vars. So, in your .env.development or .env.staging, etc., you can have REACT_APP_BASE_URL=https://blah.com. You can then access them in your app using process.env.REACT_APP_BASE_URL. Then to build based on environment, I have (I am using craco, you would just use your normal build command)

"build:nightly": "env-cmd -f .env.nightly craco build",
"build:nightly": "env-cmd -f .env.staging craco build",
"build:nightly": "env-cmd -f .env.beta craco build",
...

answered Jan 14, 2021 at 13:06

Bill

6306 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nikolai Kiselev · Accepted Answer · 2021-01-14 12:47:17Z

0

For development environment, name the file .env.development, for production .env.production.

Next.js has built-in loader for environment variables. So dotenv or similar packages aren't needed. Just add the files. It will be loaded automatically (see documentation).

answered Jan 14, 2021 at 12:47

Nikolai Kiselev

6,6532 gold badges32 silver badges39 bronze badges

Comments

Mohaimanul Islam Mahin · Accepted Answer · 2023-10-23 10:24:29Z

-1

in next.config.js

const { resolve,join } = require('path');
const {config} = require('dotenv');
let path=resolve('../')
config({ path: join(path,'.env') })
let MAIN_URL=process.env.NEXT_PUBLIC_BASE_URL_MAIN
console.log("MAIN_URL",MAIN_URL)
const nextConfig = {
  reactStrictMode: true,
  env: {
    API_BASE_URL: MAIN_URL
  },
}

module.exports = nextConfig

answered Oct 23, 2023 at 10:24

Mohaimanul Islam Mahin

11 silver badge2 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Next.js: how to use different env file for different environment?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related