mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add/data fetch example (#485)
* Added data fetch example * Finished updating examples install instructions and added data-fetch example to main readme
This commit is contained in:
Dan Zajdband
Naoyuki Kanezawa
parent
414a22d38e
commit
f6ece560e4
35
README.md
35
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`).
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
31
examples/data-fetch/README.md
Normal file
31
examples/data-fetch/README.md
Normal 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
15
examples/data-fetch/package.json
Normal 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
22
examples/data-fetch/pages/index.js
Normal 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
22
examples/data-fetch/pages/preact.js
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,27 @@
|
|||
# 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/).
|
||||
|
|
|
|||
|
|
@ -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
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue