Client side. about env-var HOT 6 CLOSED

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.

from env-var.

BTW @ted-dino, your explanation was perfectly good! Let me know if my answer is helpful.

from env-var.

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

from env-var.

worked like a charm. thank you @evanshortiss

from env-var.

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

Has this doc section been added somewhere already? I'd like to see a full working example for Next.js.

from env-var.

@eparizzi-clevertech I have some examples in the branch for the planned v8 release. Please take a look here and let me know if it's sufficient. Thanks!

from env-var.