client.mjs, server.mjs, process.env

Can someone please explain the use cases for each? I see that process.env in used in src/utils/trpc.ts. Why not use server.mjs there? In server,mjs we do ...clientEnv which means in server.mjs we have all the env variables. Then when should we use client.mjs?

Pod•12/19/22, 6:31 AM

The env exports dont contain the port or vercel url which is used in that file, please don't make duplicate posts

shikishikichangchangOP•12/19/22, 6:32 AM

So if I add them to server.env I can use them?

shikishikichangchangOP•12/19/22, 6:33 AM

I don't understand the need for client.mjs if server.mjs has all the env vars we need?

Pod•12/19/22, 6:34 AM

Client only includes what will be exposed client side

Pod•12/19/22, 6:35 AM

So you import it on the client, and server on the server

shikishikichangchangOP•12/19/22, 6:35 AM

i can import server on the client and it would still work

Pod•12/19/22, 6:36 AM

Anything not prefixed with NEXT_PUBLIC won't be exposed to the client in production

shikishikichangchangOP•12/19/22, 6:36 AM

export const env = { ..._serverEnv.data, ...clientEnv };

shikishikichangchangOP•12/19/22, 6:37 AM

That line in server.mjs exposes any NEXT_PUBLIC-prefixed env vars

Pod•12/19/22, 6:38 AM

If you import server envs on the client, server variables will be undefined, and it'll probably error, if not then they will be nothing

shikishikichangchangOP•12/19/22, 6:45 AM

How does nextjs know I'm importing server.mjs or client.mjs?

shikishikichangchangOP•12/19/22, 6:47 AM

Is everything under "server" considered server-side? What about "api/"?

shikishikichangchangOP•12/19/22, 6:48 AM

How does NextJS know which object exposes what env variables?

Pod•12/19/22, 6:48 AM

This might help https://nextjs.org/docs/basic-features/environment-variables

Basic Features: Environment Variables | Next.js

Learn to add and access environment variables in your Next.js application.

Sshikishikichangchang How does NextJS know which object exposes what env variables?

Pod•12/19/22, 6:48 AM

It doesn't

Pod•12/19/22, 6:49 AM

But it will expose anything with NEXT_PUBLIC to the client, and anything else plus that to the server

shikishikichangchangOP•12/19/22, 6:49 AM

By that logic

shikishikichangchangOP•12/19/22, 6:49 AM

If I use import { env } from "../../env/server.mjs";

shikishikichangchangOP•12/19/22, 6:49 AM

on the client

shikishikichangchangOP•12/19/22, 6:49 AM

Why would it throw an error?

Pod•12/19/22, 6:49 AM

Because the zod parsing would not pass

shikishikichangchangOP•12/19/22, 6:50 AM

Which one?

shikishikichangchangOP•12/19/22, 6:50 AM

serverSchema?

Pod•12/19/22, 6:50 AM

The server

shikishikichangchangOP•12/19/22, 6:50 AM

Why would it not pass?

shikishikichangchangOP•12/19/22, 6:50 AM

Isn't it seeing .env?

Pod•12/19/22, 6:50 AM

Because the server-sided environment variables would not exist, since its the client

shikishikichangchangOP•12/19/22, 6:51 AM

I see

shikishikichangchangOP•12/19/22, 6:51 AM

So how does NextJS defines what is "the client"?

Pod•12/19/22, 6:51 AM

The browser

Pod•12/19/22, 6:51 AM

The react part of the nextjs app

shikishikichangchangOP•12/19/22, 6:51 AM

In our file structure, everything in the server folder is not "the client" right?

Pod•12/19/22, 6:52 AM

It depends where its ran from, in this case all that would be server

shikishikichangchangOP•12/19/22, 6:52 AM

hmm

shikishikichangchangOP•12/19/22, 6:52 AM

what if I need a variables in both under pages/ and under server?

shikishikichangchangOP•12/19/22, 6:53 AM

I know now that I cannot use server.mjs on the client side since those .env vars would not be seen by the browser, would it work if I try to use client.mjs under server/ or under api/?

shikishikichangchangOP•12/19/22, 6:54 AM

I tried it and it seems to work, but it seems a little unconventional to do that?

Sshikishikichangchang what if I need a variables in both under pages/ and under server?