Next.js Discord

Discord Forum

Non NEXT_PUBLIC environment variable being accessible inside client side components

Answered
American Wirehair posted this in #help-forum
Open in Discord
American WirehairOP
Can anyone clear out this confusion?
I created a new project which has the following files:
.env:
SERVER_VAR=ServerTest
NEXT_PUBLIC_CLIENT_VAR=ClientTest

app/page.js:
"use client"

export default function page(){
  return(
      <>
        <h1>{process.env.NEXT_PUBLIC_CLIENT_VAR}</h1>
        <h1>{process.env.SERVER_VAR}</h1>
      </>
  )
}

If I am not mistaken, the page should only display NEXT_PUBLIC_CLIENT_VAR value (ClientTest) , but what actually happens is both SERVER_VAR and NEXT_PUBLIC_CLIENT_VAR values are displayed for a brief moment, then SERVER_VAR disappears and then this error is throwns :
 Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Did not expect server HTML to contain the text node "ServerTest" in <h1>.

and the SERVER_VAR is still visible in the page source code.
Answered by James4u
please mark solution to close the thread if you don't have any other questions
View full answer

41 Replies

James4u
That's because the page is pre-rendered on the server and hydrated on the client side
@American Wirehair
American WirehairOP
Isn't supposed to be rendered in client side since I'm using "use client"?
James4u
nope
"use client" directive indicates client boundary
like you can use hooks inside it
or you have event listeners
but still page is pre-rendered on the server and then hydrated
American WirehairOP
okay I see, that what caused the confusion, thank you so much.
Now I have an other question if you may:
I want to deploy this app using docker-compose, I added the .env file inside .dockerignore and I want to redefine them inside docker-compose here is my config
Dockerfile:
FROM node:18-alpine
WORKDIR /frontend
COPY . .
RUN npm install
RUN npm run build
CMD ["npm", "start"]

docker-compose.yml:
services:
  frontend:
    build: .
    container_name: frontend
    networks:
      - frontend
    ports:
      - "3000:3000"
    environment:
      - SERVER_VAR=dockerserv
      - NEXT_PUBLIC_CLIENT_VAR=dockerclient
networks:
  frontend:
    driver: bridge

But it doesnt seem to be working cuz the page is empty, how can I fix that?
@James4u
James4u
@American Wirehair Sorry I am not a fan of docker
Please close this thread and open a new one with your new question
American WirehairOP
Okay thank you once again for your help 🙂
James4u
dockerserv
dockerclient
are these env variables btw?
@American Wirehair
      - DIRECT_URL=${DIRECT_URL}
      - JWT_SECRET=${JWT_SECRET}
I think it should look like this
@James4u dockerserv dockerclient are these env variables btw?
American WirehairOP
these are the values of the variables SERVER_VAR and NEXT_PUBLIC_CLIENT_VAR
James4u
then you mean you expose those keys in your docker-compose?
American WirehairOP
yeah i guess?
James4u
No, I don't think it's a correct approach
@James4u - DIRECT_URL=${DIRECT_URL} - JWT_SECRET=${JWT_SECRET}
James4u
use this pattern to load values from env
American WirehairOP
You are right, but I need them to get them to work first when they are hardcoded first (btw this is a student project which will not be really deployed)
@James4u use this pattern to load values from env
American WirehairOP
I don't if you really understood my problem, I have a .env file 
containing SERVER_VAR=ServerTest
NEXT_PUBLIC_CLIENT_VAR=ClientTest

When I run next dev their value are displayed correctly inside the page, in the build release inside docker i want to override those values, so what i did is added the .env to .Dockerignore, then i reset those variables inside the docker-compose file
James4u
do you want different env values for dev and prod
is that what you want to do?
American WirehairOP
yes exactly, and i want to set the prod values inside docker-compose file or inside docker.env
James4u
well then what you need is different envs like
.env.local - Local development environment
.env.development - Development environment
.env.production - Production environment
.env.test - Testing environment
why do you need docker for overriding envs for production build?
American WirehairOP
to be able to override settings from one file
Here was my reasoning, this project is meant to be deployed by a non it guy, I tried to simplify the process, but making him change values from one file only if you know what I mean
But thinking about it again, it sounds kinda stupid
James4u
yeah, so non-it guy will be updating only one env file
he doesn't need to update them all
he probably need to update .env.production?
American WirehairOP
yeah this is the right approach
it's just that the project folder contains a backend and a frontend folder and I didnt want the process to be complicated for him, i will just put .env.production inside the root folder and copy it using dockerfile inside the frontend folder
James4u
that also sounds okay
James4u
please mark solution to close the thread if you don't have any other questions
Answer
James4u
🙂
American WirehairOP
Of course, thank you so much that was very helpfyl x)