Add @zeit/fetch example (#9029)

examples/with-zeit-fetch/README.md

+# @zeit/fetch example
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-zeit-fetch-app
+# or
+yarn create next-app --example with-zeit-fetch-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-zeit-fetch
+cd with-zeit-fetch
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn 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 how to use [`@zeit/fetch`](https://npmjs.com/zeit/fetch) in a Next.js application.

examples/with-zeit-fetch/fetch/browser.js

+import fetch from 'isomorphic-fetch'
+
+export default fetch

examples/with-zeit-fetch/fetch/package.json

+{
+  "browser": "./browser.js",
+  "main": "./server.js"
+}
\ No newline at end of file

examples/with-zeit-fetch/fetch/server.js

+import zeitFetch from '@zeit/fetch'
+
+export default zeitFetch()

examples/with-zeit-fetch/package.json

+{
+  "name": "data-fetch",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/fetch": "5.1.1",
+    "next": "latest",
+    "node-fetch": "2.6.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "unfetch": "4.1.0"
+  },
+  "license": "ISC"
+}

examples/with-zeit-fetch/pages/index.js

+import React from 'react'
+import Link from 'next/link'
+import fetch from '../fetch'
+
+function Index (props) {
+  return (
+    <div>
+      <p>Next.js has {props.stars} ⭐️</p>
+      <Link href='/preact'>
+        <a>How about preact?</a>
+      </Link>
+    </div>
+  )
+}
+
+Index.getInitialProps = async () => {
+  const res = await fetch('https://api.github.com/repos/zeit/next.js')
+  const json = await res.json() // better use it inside try .. catch
+  return { stars: json.stargazers_count }
+}
+
+export default Index

examples/with-zeit-fetch/pages/preact.js

+import React from 'react'
+import Link from 'next/link'
+import fetch from '../fetch'
+
+function Preact (props) {
+  return (
+    <div>
+      <p>Preact has {props.stars} ⭐</p>
+      <Link href='/'>
+        <a>I bet Next.js has more stars (?)</a>
+      </Link>
+    </div>
+  )
+}
+
+Preact.getInitialProps = async () => {
+  const res = await fetch('https://api.github.com/repos/developit/preact')
+  const json = await res.json() // better use it inside try .. catch
+  return { stars: json.stargazers_count }
+}
+
+export default Preact