077097b7f8
* Add licences to all example/package.json that lack them * Revert "Add licences to all example/package.json that lack them" This reverts commit 5d4e25012f7334772b8ef5924bc355277e827cba. * Update check-examples to remove `license` field from examples * Remove `license` from all examples. This was mentioned in vercel/next.js#27121 but it looks like it didn't end up being in the merge? Co-authored-by: JJ Kasper <jj@jjsweb.site> |
||
---|---|---|
.. | ||
pages | ||
.gitignore | ||
next.config.js | ||
package.json | ||
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.
Preview
Preview the example live on StackBlitz:
Deploy your own
Deploy the example using Vercel:
How to use
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-env-from-next-config-js with-env-from-next-config-js-app
# or
yarn 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 withset
or linux withsetenv
those changes will not be reflected in your running application until a build happens again (withnext 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
ornpm run dev
, you will always use the environmental variables assigned whenisDev
is true in the example. - When you run
next build
thennext start
, assuming you set externally the environmental variable STAGING to anything but 1, you will get the results assumingisProd
is true. - When your run
next build
ornpm run build
in production, if the environmental variableSTAGING
is set to1
,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).