with-dotenv example (#2399)

examples/with-dotenv/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "next/babel",
+  ],
+  "env": {
+    "development": {
+      "plugins": ["inline-dotenv"]
+    },
+    "production": {
+      "plugins": ["transform-inline-environment-variables"]
+    }
+  }
+}

examples/with-dotenv/.env

@@ -0,0 +1 @@
+TEST=it works!

examples/with-dotenv/.env.production

@@ -0,0 +1 @@
+TEST=it works!

examples/with-dotenv/README.md

@@ -0,0 +1,31 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-dotenv)
+
+# With Dotenv example
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dotenv
+cd with-dotenv
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows the most basic idea of babel replacement from multiple environment. We have 1 env variable: `TEST` which will be replaced in development env and in production env with different babel plugin. In local development, babel reads .env file and replace process.env.* in your nextjs files. In production env (such as heroku), babel reads the ENV and replace process.env.* in your nextjs files. Thus no more needed to commit your secrets anymore.
+
+Of course, please put .env* in your .gitignore when using this example locally.

examples/with-dotenv/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "with-dotenv",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "babel-plugin-inline-dotenv": "^1.1.1",
+    "babel-plugin-transform-inline-environment-variables": "^0.1.1"
+  },
+  "license": "ISC"
+}

examples/with-dotenv/pages/index.js

@@ -0,0 +1,3 @@
+export default () => (
+  <div>{ process.env.TEST }</div>
+)