[Example] with-polyfills : show how to load polyfills (#3568)

* Add an example showing how to use polyfills.

* Add some example polyfills.

* Fix a typo.

examples/with-polyfills/README.md

@@ -0,0 +1,32 @@
+[![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-polyfills)
+
+# Example app with polyfills
+
+## 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-polyfills
+cd with-polyfills
+```
+
+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
+
+Next.js supports browsers from IE10 to the latest. It adds polyfills as they need. But Next.js cannot add polyfills for code inside NPM modules.
+So sometimes, you need to add polyfills by yourself.
+
+This how you can do it easily with Next.js's custom webpack config feature.

examples/with-polyfills/client/polyfills.js

@@ -0,0 +1,13 @@
+/* eslint no-extend-native: 0 */
+
+// Add your polyfills
+// This files runs at the very beginning (even before React and Next.js core)
+
+console.log('Load your polyfills')
+
+// core-js comes with Next.js. So, you can import it like below
+import includes from 'core-js/library/fn/string/virtual/includes'
+import repeat from 'core-js/library/fn/string/virtual/repeat'
+
+String.prototype.includes = includes
+String.prototype.repeat = repeat

examples/with-polyfills/next.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  webpack: function (cfg) {
+    const originalEntry = cfg.entry
+    cfg.entry = async () => {
+      const entries = await originalEntry()
+      entries['main.js'].unshift('./client/polyfills.js')
+      return entries
+    }
+
+    return cfg
+  }
+}

examples/with-polyfills/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "with-polyfills",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  }
+}

examples/with-polyfills/pages/index.js

@@ -0,0 +1,7 @@
+console.log('Inside the /index.js page')
+
+export default () => (
+  <div>
+    Hello World
+  </div>
+)