Add/data fetch example (#485)

* Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme

Add/data fetch example (#485)
* Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme
f6ece560 · Dan Zajdband · Naoyuki Kanezawa · 414a22d3 · f6ece560 · f6ece560
19 changed file
--- a/README.md
+++ b/README.md
@@ -139,6 +139,11 @@ _Note: The contents of `<head>` get cleared upon unmounting the component, so ma

 ### Fetching data and component lifecycle

+<p><details>
+  <summary><b>Examples</b></summary>
+  <ul><li><a href="./examples/data-fetch">Data fetch</a></li></ul>
+</details></p>
+
 When you need state, lifecycle hooks or **initial data population** you can export a `React.Component` (instead of a stateless function, like shown above):

 ```jsx
@@ -237,10 +242,10 @@ _Note: in order to programmatically change the route without triggering navigati

 ### Prefetching Pages

-<details>
+<p><details>
  <summary><b>Examples</b></summary>
-  - [Prefetching](./examples/with-prefetching)
-</details>
+  <ul><li><a href="./examples/with-prefetching">Prefetching</a></li></ul>
+</details></p>

 Next.js exposes a module that configures a `ServiceWorker` automatically to prefetch pages: `next/prefetch`.

@@ -291,12 +296,14 @@ export default ({ url }) => (

 ### Custom server and routing

-<details>
+<p><details>
  <summary><b>Examples</b></summary>
-  - [Basic custom server](./examples/custom-server)
-  - [Express integration](./examples/custom-server-express)
-  - [Parameterized routing](./examples/parameterized-routing)
-</details>
+  <ul>
+    <li><a href="./examples/custom-server">Basic custom server</a></li>
+    <li><a href="./examples/custom-server-express">Express integration</a></li>
+    <li><a href="./examples/parameterized-routing">Parameterized routing</a></li>
+  </ul>
+</details></p>

 Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc

@@ -340,10 +347,10 @@ Supported options:

 ### Custom `<Document>`

-<details>
+<p><details>
  <summary><b>Examples</b></summary>
-  - [Styled components custom document](./examples/with-styled-components)
-</details>
+  <ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
+</details></p>

 Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. But we still make it possible to override that:

@@ -403,10 +410,10 @@ export default class Error extends React.Component {

 ### Custom configuration

-<details>
+<p><details>
  <summary><b>Examples</b></summary>
-  - [Custom babel configuration](./examples/with-custom-babel-config)
-</details>
+  <ul><li><a href="./examples/with-custom-babel-config">Custom babel configuration</a></li></ul>
+</details></p>

 For custom advanced behavior of Next.js, you can create a `next.config.js` in the root of your project directory (next to `pages/` and `package.json`).


--- a/examples/basic-css/README.md
+++ b/examples/basic-css/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/basic-css
 cd basic-css
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/basic-css
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/custom-server-express/README.md
+++ b/examples/custom-server-express/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/custom-server-express
 cd custom-server-express
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/custom-server-express
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm start
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm start
+now
 ```

 ## The idea behind the example

--- a/examples/custom-server/README.md
+++ b/examples/custom-server/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/custom-server
 cd custom-server
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/custom-server
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm start
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm start
+now
 ```

 ## The idea behind the example

--- a/examples/data-fetch/README.md
+++ b/examples/data-fetch/README.md
+
+# Styled components example
+
+## How to use
+
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/data-fetch
+cd data-fetch
+```
+
+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 was conceived to make it easy to create universal apps. That's why fetching data
+on the server and the client when necessary it's so easy with Next.
+
+Using `getInitialProps` we will fetch data in the server for SSR and then in the client only when the component is re-mounted but not in the first paint.
--- a/examples/data-fetch/package.json
+++ b/examples/data-fetch/package.json
+{
+  "name": "data-fetch",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "isomorphic-fetch": "^2.2.1",
+    "next": "^2.0.0-beta"
+  },
+  "author": "",
+  "license": "ISC"
+}
--- a/examples/data-fetch/pages/index.js
+++ b/examples/data-fetch/pages/index.js
+
+import React from 'react'
+import Link from 'next/prefetch'
+import 'isomorphic-fetch'
+
+export default class MyPage extends React.Component {
+  static async getInitialProps () {
+    // eslint-disable-next-line no-undef
+    const res = await fetch('https://api.github.com/repos/zeit/next.js')
+    const json = await res.json()
+    return { stars: json.stargazers_count }
+  }
+
+  render () {
+    return (
+      <div>
+        <p>Next.js has {this.props.stars} ⭐️</p>
+        <Link href='/preact'>How about preact?</Link>
+      </div>
+    )
+  }
+}
--- a/examples/data-fetch/pages/preact.js
+++ b/examples/data-fetch/pages/preact.js
+
+import React from 'react'
+import Link from 'next/prefetch'
+import 'isomorphic-fetch'
+
+export default class MyPage extends React.Component {
+  static async getInitialProps () {
+    // eslint-disable-next-line no-undef
+    const res = await fetch('https://api.github.com/repos/developit/preact')
+    const json = await res.json()
+    return { stars: json.stargazers_count }
+  }
+
+  render () {
+    return (
+      <div>
+        <p>Preact has {this.props.stars} ⭐️</p>
+        <Link href='/'>I bet next has more stars (?)</Link>
+      </div>
+    )
+  }
+}
--- a/examples/head-elements/README.md
+++ b/examples/head-elements/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/head-elements
 cd head-elements
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/head-elements
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/hello-world/README.md
+++ b/examples/hello-world/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world
 cd hello-world
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/hello-world
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/nested-components/README.md
+++ b/examples/nested-components/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/nested-components
 cd nested-components
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/nested-components
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/parameterized-routing/README.md
+++ b/examples/parameterized-routing/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/parametrized-routing
-cd parametrized-routing
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/parameterized-routing
+cd parameterized-routing
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/parametrized-routing
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm start
+now
 ```

 ## The idea behind the example

--- a/examples/shared-modules/README.md
+++ b/examples/shared-modules/README.md
@@ -2,30 +2,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/shared-modules
 cd shared-modules
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/shared-modules
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/using-router/README.md
+++ b/examples/using-router/README.md
@@ -2,30 +2,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/using-router
 cd using-router
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/using-router
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/with-custom-babel-config/README.md
+++ b/examples/with-custom-babel-config/README.md
 # Example app using custom babel config

+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-custom-babel-config
+cd with-custom-babel-config
+```
+
+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 features:

 * An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/).

--- a/examples/with-jest/README.md
+++ b/examples/with-jest/README.md
@@ -2,29 +2,17 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-jest
 cd with-jest
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/with-jest
-```
-
-Install the dependencies:
+Install it and test:

 ```bash
 npm install
-```
-
-Run the tests:
-
-```bash
 npm test
 ```


--- a/examples/with-prefetching/README.md
+++ b/examples/with-prefetching/README.md
@@ -2,30 +2,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-prefetching
 cd with-prefetching
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/with-prefetching
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/with-redux/README.md
+++ b/examples/with-redux/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-redux
 cd with-redux
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/with-redux
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example

--- a/examples/with-styled-components/README.md
+++ b/examples/with-styled-components/README.md
@@ -3,30 +3,24 @@

 ## How to use

-Download the example:
+Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:

 ```bash
 curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-components
 cd with-styled-components
 ```

-or clone the repo:
-
-```bash
-git clone https://github.com/zeit/next.js.git --depth=1
-cd next.js/examples/with-styled-components
-```
-
-Install the dependencies:
+Install it and run:

 ```bash
 npm install
+npm run dev
 ```

-Run the dev server:
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

 ```bash
-npm run dev
+now
 ```

 ## The idea behind the example