History

Luc Leray f52955ec94 Clean up examples `package.json` (#27121 ) Clean up package.json files in the `examples` directory: - Add `private: true` - Remove `version` (because they are irrelevant for packages that are not meant to be published) - Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale) - Remove `author` - Remove `description` - Remove `license` Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408). ## Documentation / Examples - [x] Make sure the linting passes		2021-07-12 19:58:03 +00:00
..
pages	Update Examples for Fast Refresh (#13068 )	2020-05-18 17:44:18 -04:00
.gitignore	Added .gitignore to examples that are deployed to vercel (#15127 )	2020-07-16 10:52:23 -04:00
next.config.js	Upgrade to Prettier 2 (#13061 )	2020-05-18 15:24:37 -04:00
package.json	Clean up examples `package.json` (#27121 )	2021-07-12 19:58:03 +00:00
README.md	examples: fix typo `lunix` → `linux` (#26796 )	2021-07-01 06:20:35 +00: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.

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 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).