NEXT_PUBLIC_ variables in .env not working

[nifte]

I have a couple NEXT_PUBLIC_ variables in my .env file, but they are showing up as undefined. The normal env variables seem to be working fine.

[jamesmosier]

Any chance you can share some code? 😄

[nifte]

Here's an example I put together to test:

.env

NEXT_PUBLIC_TEST=hello

pages/test.js

export default () => {
	console.log('variable:', process.env.NEXT_PUBLIC_TEST)
	return <div>variable: {process.env.NEXT_PUBLIC_TEST}</div>
}

next console output

ready - started server on http://localhost:3000
event - build page: /test
wait  - compiling...
event - compiled successfully
variable: undefined

browser console output

variable: undefined

browser output

variable: 

[jamesmosier]

NEXT_PUBLIC environment variables only work with Next v9.4.0. What version are you running?

I was able to run that example and it correctly output hello.

[nifte]

9.4.0

[jamesmosier]

That's strange 🤔

I did this:

1. yarn create next-app
2. cd my-app
3. Created the pages/test.js and .env files
4. Ran the app
5. Outputted to browser console and terminal

---

Are you working with a blank project? Or is there other code/next.config.js in your project?

Also when you run npm list next or yarn why next what is the output?

[nifte]

Existing project. I figured out that having dotenv installed was preventing next from loading the env variables. Uninstalling fixed the issue :)

[averyfreeman]

Just wanted to mention I found this threat while having a similar issue. I had installed dotenv but already uninstalled it, was still having issues accessing process.env.NEXT_PUBLIC. Not until I ran npm update did the NEXT_PUBLIC var become exposed.

[nifte]

I figured it out... I still had dotenv installed, which I guess was preventing next from loading the env variables. After removing dotenv with npm r dotenv everthing works as expected :)

next console output

ready - started server on http://localhost:3000
info  - Loaded env from .env
event - build page: /test
wait  - compiling...
event - compiled successfully
variable: hello

[phoenixeliot]

Yup, this was the case for me; our package that was using Parcel includes dotenv in its dependencies, and that was breaking all variables we tried to use directly in our package code (which was then being used by our next.js site)

[motdotla]

I believe this is related to how nextjs intercepts dotenv. We're working on a workaround. dotenv has always just 'worked' and I want to make sure that continues.

[bonesoul]

same issue here, any workarounds for this?

[OZZlE]

remove dotenv module then

Create .env.test add all env variables there https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

and:

// The below can be used in a Jest global setup file or similar for your testing set-up
import { loadEnvConfig } from '@next/env'

export default async () => {
  const projectDir = process.cwd()
  loadEnvConfig(projectDir)
}

[Elvis557]

I figured it out... I still had dotenv installed, which I guess was preventing next from loading the env variables. After removing dotenv with npm r dotenv everthing works as expected :)

next console output

ready - started server on http://localhost:3000
info  - Loaded env from .env
event - build page: /test
wait  - compiling...
event - compiled successfully
variable: hello

Yep! we most at times overlook the installation and proceed with our code

[kainosnoema]

The latest Next.js Stripe example uses dotenv, and this incompatibility isn't mentioned anywhere in the Next.js docs. Fought with this for a full day before finding this issue—would be great to have this documented.

[motdotla]

Can someone from next.js chime in on why they don't support dotenv working out of the box. Why modify it's functionality - which typically just works?

[samput]

Unfortunately I can't remove dotenv as a dependency because I need it for my custom express server. Is there another way of getting browser accessible env vars?

[samuelhnrq]

next itself still loads .env anyway you just have let next do it (and load it early of course)

[samput]

So using the custom express server as an example, will next manage the env vars if I move them after app prepare? This would allow me to remove dotenv as a dependency.

app.prepare().then(() => {

// ----- move env vars here? -----

});

const express = require('express')
const next = require('next')
const redis = require('redis')
const redisClient = redis.createClient({
  host: process.env.REDIS_HOST,
  port: process.env.REDIS_PORT
})
const { ExpressOIDC } = require('@okta/oidc-middleware');
//...........

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const oidc = new ExpressOIDC({
    issuer: `${process.env.OKTA_DOMAIN}`,
    client_id: process.env.OKTA_CLIENT_ID,
    client_secret: process.env.OKTA_CLIENT_SECRET,
    appBaseUrl: process.env.SITE_URL,
    scope: 'openid profile',
  });

  const server = express()

  //...........

  server.all('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

[samuelhnrq]

will next manage the env vars if I move them after app prepare?

Yes, just not sure about the lifecycle, the .env file might be loaded right after calling next({ dev }) heck or even after importing next, just slap some console logs (after calling next, inside prepare, etc.) to find out when it actually gets loaded

This would allow me to remove dotenv as a dependency.

Yes.

[lleseg]

@samput did you solved this? I have pretty much the same issue. I can see that environment variables are loaded after calling next({ dev }).

I had separeated/modularized the whole app (with custom server) in order to have more control over it. Making the imports before calling next({ dev }) makes me unable to access the environment variables there without using dotenv.

Any recommendations?

[gerarddegas]

@samput I also have the same issue as well. Did you figure it out?

[InsOpDe]

I have a monorepo with dotenv as one of its many many dependencies. I cant just uninstall dotenv.
Is there no solution to have both, dotenv and next, work together?

[einSelbst]

maybe if this gets merged #18821

[vincent1114]

I know this is a 4 years old comment, what was your solution to have next js in a monorepo?

[nbouvrette]

If this helps anyone, I had a similar issue where my custom server was loading classes that would depend on environment variables. By initializing my next app (const app = next({ dev });) before importing my other dependencies, it works fine.

So basically I'm using Next.js's implementation for all my environment variables on the server (as well as the client of course).

[carlnc]

Starting to regret switching from CRA to Next.

I gave up.

• variables defined exports.env appear nowhere
• NEXT_PUBLIC_ variables appear in server, but don't make it to _app.

I fell back to import BuildInfo from '../buildinfo.json';

As a work around, in next.config.js, I'm defining and calling ...

const dotenv = require('dotenv');
function updateVariablesJson() {
    // whatever is in .env.local, .env, etc ... JSONify it into > src/variables.json

    const result = dotenv.config();
    if (result.error) throw result.error;

    fs.writeFileSync('src/variables.json', JSON.stringify(result.parsed));
}

And then in pages/_app.tsx ...

import Variables                from '../variables.json';

[motdotla]

Sorry to hear this. Next.js has really mucked up the simplicity of dotenv. We are working on a workaround to ease this pain for everyone.

[sargashteh]

create next.config.js file in root and write below code inside that:

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

stop server and run again #yarn dev

and use in client page:

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}

export default Page

reference

[matheusrgarcia]

This method only works for static values in module.exports, what if I want to get from a env file?

[AIEAJN]

work perfectly

[AIEAJN]

This method only works for static values in module.exports, what if I want to get from a env file?

i think that it's just another stuff to do the same thing, I prefer this method cause it's easy
but see this https://medium.com/courtly-intrepid/environmental-variables-in-next-js-with-dotenv-599c5bbfdf74

[petervukovic]

You can use .env variables in next.config.js. I had the same problem using NEXT_PUBLIC_ with Next v12.0.10 and this solution worked for me:

.env

MY_VAR=123

next.config.js

module.exports = {
  env: {
    MY_VAR: process.env.MY_VAR
  }

[Disorrder]

Nope, doesn't work for me :(

[duyhunter1001]

me too, not working on server

[motdotla]

@Disorrder and @TuongDuyTran - does the following work for you in your next.config.js fie?

/** @type {import('next').NextConfig} */

const result = require('dotenv').config()

const nextConfig = {
  reactStrictMode: true,
  env: result.parsed,
}

module.exports = nextConfig

Make sure to first run yarn add dotenv or npm install dotenv --save

[EliseiNicolae]

If you're using Docker, check if .env file si there before you'll make the build of the project.

Example DockerFile:
FROM node:16.14.0-alpine3.14 as build

WORKDIR /app

# Copy in only the parts needed to install dependencies
# (This avoids rebuilds if the package.json hasn’t changed)
COPY package.json  .
COPY package-lock.json .
COPY .env.production .

# Install dependencies (including dev dependencies)
RUN npm install

# Copy in the rest of the project
# (include node_modules in a .dockerignore file)
COPY . .

# Build the project
RUN npm run build

# Second stage: runtime
FROM node:16.14.0-alpine3.14

WORKDIR /app

ENV NODE_ENV=production

# Again get dependencies, but this time only install
# runtime dependencies
COPY package.json  .
COPY package-lock.json .
RUN npm install --only=production

# Get the built application from the first stage
COPY --from=build /app/.next/ /app/.next/

# Set runtime metadata
ENV PORT 3000
EXPOSE 3000

[TristonWasik]

Doesn't this not work because the .env.production is created during build time?

[Calin224]

Te pwp <3

[paulfranke]

The following solution by Renato Pozzi (dev.to) helped me.

https://stackoverflow.com/questions/71778031/nextjs-public-environment-variable-not-working-on-azure-app-service/74503166#74503166

[jredbeard]

Why are NEXT_PUBLIC variables only available if specified at build time? That's turning something that should be configurable into something that's static. I don't want to make separate builds for separate environments - I want to make 1 build that I can deploy to different environments and pass in the configuration (including variables that are exposed to the browser).

I wish NextJS followed the principles of the "12 factor app" more closely. https://12factor.net/

[hubenschmidt]

Why such a messy, complicated .env config? I haven't found a simple solution for this, that works as advertised in production deployments.

[AlexLepSNF]

Why are NEXT_PUBLIC variables only available if specified at build time? That's turning something that should be configurable into something that's static. I don't want to make separate builds for separate environments - I want to make 1 build that I can deploy to different environments and pass in the configuration (including variables that are exposed to the browser).

I wish NextJS followed the principles of the "12 factor app" more closely. https://12factor.net/

god
oh
god
why
!!!

This damn behavior took hours of my life. Why does it have to be this way?

[luizfelmach]

It took my time too.

[heatherdg]

So what's the solution?

[rvdende]

Make it serverside and pass it on to frontend it seems.

[duc-hoang-161]

Holy sh!t. This strange behavior almost took me several hours of debugging