History

Marcos Bérgamo c3e5caf110 docs(examples): improve DX while copying command to create new project (#38410 ) * docs(examples): improve DX while copy command to create new project * chore: apply code review Co-authored-by: Marcos Bérgamo <Marcos.Bergamo@refinitiv.com> Co-authored-by: JJ Kasper <jj@jjsweb.site>		2022-07-26 21:57:48 -05:00
..
pages	Update Examples for Fast Refresh (#13068 )	2020-05-18 17:44:18 -04:00
.gitignore	Update default gitignore templates (#39051 )	2022-07-26 20:08:40 -05:00
next.config.js	Upgrade to Prettier 2 (#13061 )	2020-05-18 15:24:37 -04:00
package.json	Remove `licence` from all `example/package.json` that has them (#28007 )	2021-08-14 10:48:39 -05:00
README.md	docs(examples): improve DX while copying command to create new project (#38410 )	2022-07-26 21:57:48 -05:00

README.md

With env From next.config.js

This example demonstrates setting parameters that will be used by your application and set at build time (not run time). More specifically, what that means, is that environmental variables are programmed into the special configuration file next.config.js and then returned to your react components when the program is built with next build.

As the build process (next build) is proceeding, next.config.js is processed and passed in as a parameter is the variable phase. phase can have the values PHASE_DEVELOPMENT_SERVER or PHASE_PRODUCTION_BUILD (as defined in next\constants). Based on the variable phase, different environmental variables can be set for use in your react app. That is, if you reference process.env.RESTURL_SPEAKERS in your react app, whatever is returned by next.config.js as the variable env, (or env.RESTURL_SPEAKERS) will be accessible in your app as process.env.RESTURL_SPEAKERS.

View the docs on next.config.js for more information.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-env-from-next-config-js with-env-from-next-config-js-app

yarn create next-app --example with-env-from-next-config-js with-env-from-next-config-js-app

pnpm create next-app --example with-env-from-next-config-js with-env-from-next-config-js-app

Deploy it to the cloud with Vercel (Documentation).

Special note

next build does a hard coded variable substitution into your JavaScript before the final bundle is created. This means that if you change your environmental variables outside of your running app, such as in windows with set or linux with setenv those changes will not be reflected in your running application until a build happens again (with next build).

Discussion regarding this example

This example is not meant to be a reference standard for how to do development, staging and production builds with Next. This is just one possible scenario that could be used if you want the following behavior while you are doing development.

When your run next dev or npm run dev, you will always use the environmental variables assigned when isDev is true in the example.
When you run next build then next start, assuming you set externally the environmental variable STAGING to anything but 1, you will get the results assuming isProd is true.
When your run next build or npm run build in production, if the environmental variable STAGING is set to 1, isStaging will be set and you will get those values returned.

You can read more about this feature in this blog post Next.js 5.1: Faster Page Resolution, Environment Config and More (under Environment Config).