Clarify conditions under which process.env expressions are inlined #33212
Conversation
jameshfisher
requested review from
huozhi,
ijjk,
leerob,
padmaia,
shuding,
styfle and
timneutkens
as code owners
| @@ -88,13 +88,14 @@ In order to expose a variable to the browser you have to prefix the variable wit | |||
| NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk | |||
| ``` | |||
|
|
|||
| This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix. This inlining occurs at build time, so your various `NEXT_PUBLIC_` envs need to be set when the project is built. | |||
| This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically, allowing you to use it anywhere in your code. To expose these variables to JavaScript on the browser, any JavaScript expressions of the form `process.env.NEXT_PUBLIC_FOO` will be inlined at build time, replaced with the string value of the `NEXT_PUBLIC_FOO` environment variable set when the project is built. For example: | |||
There was a problem hiding this comment.
I don't think this reads any better. In fact, it assumes the reader understands what FOO means. Let's revert this paragraph and keep the comment on line 98.
There was a problem hiding this comment.
Linguistics are easy to bike shed on - I think the original is maybe slightly better linguistically. But I think the key thing that @jameshfisher is trying to emphasize here is that the build process will look for process.env.NEXT_PUBLIC_FOO. We could also write process.env.NEXT_PUBLIC_* or something like that.
|
The current docs gave me the impression that I HAVE to write I think the inlining is important for |
|
@styfle @jameshfisher would this be a good place for the docs to mention how development-only checks can be stripped out of production builds? |
I just realized you're not the author of this PR. The dynamic usage might work locally or for Serverless Functions, but it doesn't work in browser bundles or in Edge Functions (like Middleware). |
Agreed, this is important. I can't seem to find any docs on this behavior so we can document it here. |
Yep, found that one out the hard way :( |
Co-authored-by: Steven <steven@ceriously.com>
Documentation / Examples
yarn lint