Add Environment Variables Example (vercel#14575)

Closes vercel#14570
Closes vercel#14576

- The example features everything on the page in our docs while still being quite simple
- Added a link to it in the documentation
- Deprecated the with-now-env example

docs/basic-features/environment-variables.md

@@ -6,6 +6,13 @@ description: Learn to add and access environment variables in your Next.js appli
 
 > This document is for Next.js versions 9.4 and up. If you’re using an older version of Next.js, upgrade or refer to [Environment Variables in next.config.js](/docs/api-reference/next.config.js/environment-variables.md).
 
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/environment-variables">Environment Variables</a></li>
+  </ul>
+</details>
+
 Next.js comes with built-in support for environment variables, which allows you to do the following:
 
 - [Use `.env.local` to load environment variables](#loading-environment-variables)

examples/environment-variables/.env

@@ -0,0 +1,5 @@
+# DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
+# If you want to add secrets use `.env.local` instead.
+
+ENV_VARIABLE="server_only_variable"
+NEXT_PUBLIC_ENV_VARIABLE="public_variable"

examples/environment-variables/.env.development

@@ -0,0 +1,5 @@
+# DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
+# If you want to add secrets use `.env.development.local` instead.
+
+DEVELOPMENT_ENV_VARIABLE="server_only_development_variable"
+NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"

examples/environment-variables/.env.local.example

@@ -0,0 +1,2 @@
+ENV_LOCAL_VARIABLE="server_only_variable_from_env_local"
+NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"

examples/environment-variables/.env.production

@@ -0,0 +1,5 @@
+# DO NOT ADD SECRETS TO THIS FILE. This is a good place for defaults.
+# If you want to add secrets use `.env.production.local` instead.
+
+PRODUCTION_ENV_VARIABLE="server_only_production_variable"
+NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE="public_production_variable"

examples/environment-variables/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "environment-variables",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "license": "ISC"
+}

examples/environment-variables/pages/index.js

@@ -0,0 +1,93 @@
+import styles from '../styles.module.css'
+
+// The value here will be defined in the terminal, because of server side rendering,
+// but not in the browser console
+console.log('[Server only] ENV_VARIABLE:', process.env.ENV_VARIABLE)
+console.log('[Server only] ENV_LOCAL_VARIABLE:', process.env.ENV_LOCAL_VARIABLE)
+
+const Code = (p) => <code className={styles.inlineCode} {...p} />
+
+const IndexPage = () => (
+  <div className={styles.container}>
+    <div className={styles.card}>
+      <h1>Environment Variables with Next.js</h1>
+      <hr className={styles.hr} />
+      <p>
+        In the table below you'll see how{' '}
+        <a href="https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser">
+          environment variables can be exposed to the browser
+        </a>{' '}
+        with Next.js.
+      </p>
+      <p>
+        In general only <Code>.env.local</Code> or <Code>.env</Code> are needed
+        for this, but the table also features the usage of{' '}
+        <Code>.env.develoment</Code> and <Code>.env.production</Code>.
+      </p>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <th>Variable Name</th>
+            <th>Value</th>
+            <th>Added By</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>NEXT_PUBLIC_ENV_VARIABLE</td>
+            <td>{process.env.NEXT_PUBLIC_ENV_VARIABLE}</td>
+            <td>
+              <Code>.env</Code>
+            </td>
+          </tr>
+          <tr>
+            <td>NEXT_PUBLIC_ENV_LOCAL_VARIABLE</td>
+            <td>{process.env.NEXT_PUBLIC_ENV_LOCAL_VARIABLE}</td>
+            <td>
+              <Code>.env.local</Code>
+            </td>
+          </tr>
+          <tr>
+            <td>NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE</td>
+
+            <td>{process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE}</td>
+            <td>
+              <Code>.env.develoment</Code>
+            </td>
+          </tr>
+          <tr>
+            <td>NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE</td>
+
+            <td>{process.env.NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE}</td>
+            <td>
+              <Code>.env.production</Code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p>
+        <Code>.env.local</Code> is not added by the example, because it must be
+        ignored by git, but you can add it manually:
+      </p>
+      <pre>
+        <code>cp .env.local.example .env.local</code>
+      </pre>
+      <p>
+        Variables in <Code>.env.production</Code> won't be available if the app
+        is running in development:
+      </p>
+      <pre>
+        <code>npm run dev</code>
+      </pre>
+      <p>
+        Similarly, variables in <Code>.env.develoment</Code> won't be available
+        if the app is running on production:
+      </p>
+      <pre>
+        <code>npm run build && npm run start</code>
+      </pre>
+    </div>
+  </div>
+)
+
+export default IndexPage

examples/environment-variables/readme.md

@@ -0,0 +1,23 @@
+# Environment Variables Example
+
+This example shows how to use [environment variables in Next.js](https://nextjs.org/docs/basic-features/environment-variables).
+
+The index page ([pages/index.js](pages/index.js)) will show you how to [access environment variables in the server](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables), and how to [expose environment variables to the browser](https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser).
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/environment-variables)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example environment-variables environment-variables-app
+# or
+yarn create next-app --example environment-variables environment-variables-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/environment-variables/styles.module.css

@@ -0,0 +1,62 @@
+.container {
+  padding: 4rem 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+.container p {
+  margin: 1.5rem 0;
+}
+
+.container pre {
+  border: 1px solid #eaeaea;
+  padding: 1.25rem;
+  margin: 1.5rem 0;
+  white-space: pre;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.card {
+  max-width: 50rem;
+  box-shadow: -10px 10px 80px rgba(0, 0, 0, 0.12);
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 2rem;
+  margin: 0 auto;
+}
+
+.inlineCode {
+  color: #be00ff;
+  font-size: 16px;
+  white-space: pre-wrap;
+}
+
+.inlineCode::before,
+.inlineCode::after {
+  content: '`';
+}
+
+.hr {
+  border: 0;
+  border-top: 1px solid #eaeaea;
+  margin: 1.5rem 0;
+}
+
+.table {
+  display: block;
+  overflow: auto;
+  border-collapse: collapse;
+  margin: 2.5rem 0;
+}
+
+.table th {
+  font-weight: 600;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid #eaeaea;
+}
+
+.table td {
+  font-size: 0.875rem;
+  padding: 0.75rem 0.875rem;
+  border: 1px solid #eaeaea;
+}

examples/with-dotenv/README.md

@@ -3,4 +3,4 @@
 Next.js automatically supports Environment Variable loading as of Next.js 9.4.
 You can [read more about it in the blog post](https://nextjs.org/blog/next-9-4#new-environment-variables-support).
 
-Visit [the documentation](https://nextjs.org/docs/basic-features/environment-variables) to learn how to use Environment Variables support in Next.js 9.4+.
+Visit [the documentation](https://nextjs.org/docs/basic-features/environment-variables) to learn how to use Environment Variables support in Next.js 9.4+ and the [Environment Variables Example](/examples/environment-variables) to see it on action.

examples/with-now-env/README.md

@@ -1,42 +1,3 @@
-# Now-env example
+Next.js automatically supports Environment Variable loading as of [Next.js 9.4](https://nextjs.org/blog/next-9-4#new-environment-variables-support). Visit the [documentation for environment variables](https://nextjs.org/docs/basic-features/environment-variables) to learn more and the [Environment Variables Example](/examples/environment-variables) to see it on action.
 
-This example shows the usage of [Now Secrets](https://vercel.com/docs/v2/deployments/environment-variables-and-secrets/?query=secret#securing-environment-variables-using-secrets) and [now dev](https://vercel.com/docs/v2/development/basics), it shows how to add environment variables in development that can be replaced in production by the secrets defined with [Now](https://vercel.com/now).
-
-## How to use
-
-### Using `create-next-app`
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example::
-
-```bash
-npx create-next-app --example with-now-env with-now-env-app
-# or
-yarn create next-app --example with-now-env with-now-env-app
-```
-
-### Download manually
-
-Download the example:
-
-```bash
-curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-now-env
-cd with-now-env
-```
-
-Install it with `npm` or `yarn`:
-
-```bash
-npm install
-# or
-yarn
-```
-
-Start the development server with [Vercel](https://vercel.com/) ([download](https://vercel.com/download)):
-
-```bash
-vercel dev
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
-
-Keep in mind that in order to deploy the app to Vercel the env [secrets](https://vercel.com/docs/getting-started/secrets) defined in `verel.json` should be listed in your account.
+Now Secrets (previously used by this example) is no longer needed as you can now add environment variables directly in your [Vercel](https://vercel.com/) project.