terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Add/data fetch example (#485)

Browse source 
* Added data fetch example

* Finished updating examples install instructions and added data-fetch example to main readme
This commit is contained in:
Dan Zajdband 2016-12-22 18:05:49 -05:00 committed by Naoyuki Kanezawa
parent 414a22d38e
commit f6ece560e4
19 changed files with 197 additions and 162 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
README.md
View file

@ -139,6 +139,11 @@ _Note: The contents of `<head>` get cleared upon unmounting the component, so ma
### Fetching data and component lifecycle ### 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): 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 ```jsx
@ -237,10 +242,10 @@ _Note: in order to programmatically change the route without triggering navigati
### Prefetching Pages ### Prefetching Pages
<details> <p><details>
<summary><b>Examples</b></summary> <summary><b>Examples</b></summary>
- [Prefetching](./examples/with-prefetching) <ul><li><a href="./examples/with-prefetching">Prefetching</a></li></ul>
</details> </details></p>
Next.js exposes a module that configures a `ServiceWorker` automatically to prefetch pages: `next/prefetch`. 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 ### Custom server and routing
<details> <p><details>
<summary><b>Examples</b></summary> <summary><b>Examples</b></summary>
- [Basic custom server](./examples/custom-server) <ul>
- [Express integration](./examples/custom-server-express) <li><a href="./examples/custom-server">Basic custom server</a></li>
- [Parameterized routing](./examples/parameterized-routing) <li><a href="./examples/custom-server-express">Express integration</a></li>
</details> <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 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>` ### Custom `<Document>`
<details> <p><details>
<summary><b>Examples</b></summary> <summary><b>Examples</b></summary>
- [Styled components custom document](./examples/with-styled-components) <ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
</details> </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: 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 ### Custom configuration
<details> <p><details>
<summary><b>Examples</b></summary> <summary><b>Examples</b></summary>
- [Custom babel configuration](./examples/with-custom-babel-config) <ul><li><a href="./examples/with-custom-babel-config">Custom babel configuration</a></li></ul>
</details> </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`). 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`).

16
examples/basic-css/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/basic-css curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/basic-css
cd basic-css cd basic-css
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/basic-css
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/custom-server-express/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/custom-server-express 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 cd custom-server-express
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/custom-server-express
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm start now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/custom-server/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/custom-server curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/custom-server
cd custom-server cd custom-server
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/custom-server
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm start now
``` ```
## The idea behind the example ## The idea behind the example

31
examples/data-fetch/README.md Normal file
View file

@ -0,0 +1,31 @@
# 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.

15
examples/data-fetch/package.json Normal file
View file

@ -0,0 +1,15 @@
{
"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"
}

22
examples/data-fetch/pages/index.js Normal file
View file

@ -0,0 +1,22 @@
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>
)
}
}

22
examples/data-fetch/pages/preact.js Normal file
View file

@ -0,0 +1,22 @@
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>
)
}
}

16
examples/head-elements/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/head-elements curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/head-elements
cd head-elements cd head-elements
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/head-elements
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/hello-world/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/hello-world
cd hello-world cd hello-world
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/hello-world
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/nested-components/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/nested-components curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/nested-components
cd nested-components cd nested-components
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/nested-components
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

20
examples/parameterized-routing/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/parametrized-routing curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/parameterized-routing
cd parametrized-routing cd parameterized-routing
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/parametrized-routing
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm start now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/shared-modules/README.md
View file

@ -2,30 +2,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/shared-modules curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/shared-modules
cd shared-modules cd shared-modules
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/shared-modules
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/using-router/README.md
View file

@ -2,30 +2,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/using-router curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/using-router
cd using-router cd using-router
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/using-router
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

22
examples/with-custom-babel-config/README.md
View file

@ -1,5 +1,27 @@
# Example app using custom babel config # 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: This example features:
* An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/). * An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/).

16
examples/with-jest/README.md
View file

@ -2,29 +2,17 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-jest curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-jest
cd with-jest cd with-jest
``` ```
or clone the repo: Install it and test:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/with-jest
```
Install the dependencies:
```bash ```bash
npm install npm install
```
Run the tests:
```bash
npm test npm test
``` ```

16
examples/with-prefetching/README.md
View file

@ -2,30 +2,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-prefetching curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-prefetching
cd with-prefetching cd with-prefetching
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/with-prefetching
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/with-redux/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-redux curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-redux
cd with-redux cd with-redux
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/with-redux
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example

16
examples/with-styled-components/README.md
View file

@ -3,30 +3,24 @@
## How to use ## How to use
Download the example: Download the example (or clone the repo)[https://github.com/zeit/next.js.git]:
```bash ```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-styled-components 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 cd with-styled-components
``` ```
or clone the repo: Install it and run:
```bash
git clone https://github.com/zeit/next.js.git --depth=1
cd next.js/examples/with-styled-components
```
Install the dependencies:
```bash ```bash
npm install 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 ```bash
npm run dev now
``` ```
## The idea behind the example ## The idea behind the example