Skip to content

Commit f6ece56

Browse files
impronunciablenkzawa
impronunciable
authored and
nkzawa
committedDec 22, 2016
Add/data fetch example (#485)
* Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme
1 parent 414a22d commit f6ece56

File tree

19 files changed

+197
-162
lines changed

19 files changed

+197
-162
lines changed
 

‎README.md

+21-14
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@ _Note: The contents of `<head>` get cleared upon unmounting the component, so ma
139139

140140
### Fetching data and component lifecycle
141141

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

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

238243
### Prefetching Pages
239244

240-
<details>
245+
<p><details>
241246
<summary><b>Examples</b></summary>
242-
- [Prefetching](./examples/with-prefetching)
243-
</details>
247+
<ul><li><a href="./examples/with-prefetching">Prefetching</a></li></ul>
248+
</details></p>
244249

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

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

292297
### Custom server and routing
293298

294-
<details>
299+
<p><details>
295300
<summary><b>Examples</b></summary>
296-
- [Basic custom server](./examples/custom-server)
297-
- [Express integration](./examples/custom-server-express)
298-
- [Parameterized routing](./examples/parameterized-routing)
299-
</details>
301+
<ul>
302+
<li><a href="./examples/custom-server">Basic custom server</a></li>
303+
<li><a href="./examples/custom-server-express">Express integration</a></li>
304+
<li><a href="./examples/parameterized-routing">Parameterized routing</a></li>
305+
</ul>
306+
</details></p>
300307

301308
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
302309

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

341348
### Custom `<Document>`
342349

343-
<details>
350+
<p><details>
344351
<summary><b>Examples</b></summary>
345-
- [Styled components custom document](./examples/with-styled-components)
346-
</details>
352+
<ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
353+
</details></p>
347354

348355
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:
349356

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

404411
### Custom configuration
405412

406-
<details>
413+
<p><details>
407414
<summary><b>Examples</b></summary>
408-
- [Custom babel configuration](./examples/with-custom-babel-config)
409-
</details>
415+
<ul><li><a href="./examples/with-custom-babel-config">Custom babel configuration</a></li></ul>
416+
</details></p>
410417

411418
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`).
412419

‎examples/basic-css/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/basic-css
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm run dev
2418
```
2519

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

2822
```bash
29-
npm run dev
23+
now
3024
```
3125

3226
## The idea behind the example

‎examples/custom-server-express/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/custom-server-express
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm start
2418
```
2519

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

2822
```bash
29-
npm start
23+
now
3024
```
3125

3226
## The idea behind the example

‎examples/custom-server/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/custom-server
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm start
2418
```
2519

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

2822
```bash
29-
npm start
23+
now
3024
```
3125

3226
## The idea behind the example

‎examples/data-fetch/README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
# Styled components example
3+
4+
## How to use
5+
6+
Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
7+
8+
```bash
9+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/data-fetch
10+
cd data-fetch
11+
```
12+
13+
Install it and run:
14+
15+
```bash
16+
npm install
17+
npm run dev
18+
```
19+
20+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
21+
22+
```bash
23+
now
24+
```
25+
26+
## The idea behind the example
27+
28+
Next.js was conceived to make it easy to create universal apps. That's why fetching data
29+
on the server and the client when necessary it's so easy with Next.
30+
31+
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.

‎examples/data-fetch/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"name": "data-fetch",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"dev": "next",
6+
"build": "next build",
7+
"start": "next start"
8+
},
9+
"dependencies": {
10+
"isomorphic-fetch": "^2.2.1",
11+
"next": "^2.0.0-beta"
12+
},
13+
"author": "",
14+
"license": "ISC"
15+
}

‎examples/data-fetch/pages/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import React from 'react'
3+
import Link from 'next/prefetch'
4+
import 'isomorphic-fetch'
5+
6+
export default class MyPage extends React.Component {
7+
static async getInitialProps () {
8+
// eslint-disable-next-line no-undef
9+
const res = await fetch('https://api.github.com/repos/zeit/next.js')
10+
const json = await res.json()
11+
return { stars: json.stargazers_count }
12+
}
13+
14+
render () {
15+
return (
16+
<div>
17+
<p>Next.js has {this.props.stars} ⭐️</p>
18+
<Link href='/preact'>How about preact?</Link>
19+
</div>
20+
)
21+
}
22+
}

‎examples/data-fetch/pages/preact.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
import React from 'react'
3+
import Link from 'next/prefetch'
4+
import 'isomorphic-fetch'
5+
6+
export default class MyPage extends React.Component {
7+
static async getInitialProps () {
8+
// eslint-disable-next-line no-undef
9+
const res = await fetch('https://api.github.com/repos/developit/preact')
10+
const json = await res.json()
11+
return { stars: json.stargazers_count }
12+
}
13+
14+
render () {
15+
return (
16+
<div>
17+
<p>Preact has {this.props.stars} ⭐️</p>
18+
<Link href='/'>I bet next has more stars (?)</Link>
19+
</div>
20+
)
21+
}
22+
}

‎examples/head-elements/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/head-elements
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm run dev
2418
```
2519

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

2822
```bash
29-
npm run dev
23+
now
3024
```
3125

3226
## The idea behind the example

‎examples/hello-world/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/hello-world
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm run dev
2418
```
2519

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

2822
```bash
29-
npm run dev
23+
now
3024
```
3125

3226
## The idea behind the example

‎examples/nested-components/README.md

+5-11
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,24 @@
33

44
## How to use
55

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

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

13-
or clone the repo:
14-
15-
```bash
16-
git clone https://github.com/zeit/next.js.git --depth=1
17-
cd next.js/examples/nested-components
18-
```
19-
20-
Install the dependencies:
13+
Install it and run:
2114

2215
```bash
2316
npm install
17+
npm run dev
2418
```
2519

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

2822
```bash
29-
npm run dev
23+
now
3024
```
3125

3226
## The idea behind the example

0 commit comments

Comments
 (0)