Client side.

I don’t sure if this has been asked before, but can this package access environment variables on the client side? I tried to print the env variable to the console, but it said it was undefined, even though I could see what it printed in the terminal. I know I’m terrible at explaining, but maybe the image i’ve included may help.

[evanshortiss]

This seems to be related with how Next.js handles process.env. It says here in the docs that they inline the value to the browser. They also explicitly state that “dynamic lookups will not be inlined”.

Based on my understanding, this means that if your code is:

const url = process.env.NEXT_PUBLIC_BASE_URL

Next.js compiles it to:

const url = 'http://localhost:3000'

You need to explicitly make a call to process.env.NEXT_PUBLIC_BASE_URL someplace for it to be replaced by their compilation steps.

Using this knowledge I found the following example works when using env-var:

import { from } from 'env-var'

// Pass a custom env object to env-var
const { get } = from({
  NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL
})

// Read variables using env-var API
const url = get('NEXT_PUBLIC_BASE_URL').asUrlString()

This is a little convoluted, but it’s a quick workaround I’ve found works with the basic npx create-next-app@latest template.

[evanshortiss]

That’s great! I referenced this issue for the next release. Will add a doc section for this issue.