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

Update README.md

Browse source
This commit is contained in:
Guillermo Rauch 2016-12-19 13:34:19 -08:00 committed by GitHub
parent 565bb5790b
commit 3c25bef2ea
1 changed files with 48 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
README.md
View file

@ -47,9 +47,9 @@ So far, we get:
To see how simple this is, check out the [sample app - nextgram](https://github.com/zeit/nextgram) To see how simple this is, check out the [sample app - nextgram](https://github.com/zeit/nextgram)
### Bundling (code splitting) ### Automatic code splitting
Every `import` you declare gets bundled and served with each page Every `import` you declare gets bundled and served with each page. That means pages never load unnecessary code!
```jsx ```jsx
import cowsay from 'cowsay-browser' import cowsay from 'cowsay-browser'
@ -58,8 +58,6 @@ export default () => (
) )
``` ```
That means pages never load unnecessary code!
### CSS ### CSS
#### Built-in CSS support #### Built-in CSS support
@ -92,13 +90,13 @@ export default () => (
It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles: It's possible to use any existing CSS-in-JS solution. The simplest one is inline styles:
``` ```jsx
export default () => ( export default () => (
<p style={{ color: red }}>hi there</p> <p style={{ color: red }}>hi there</p>
) )
``` ```
To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your own [custom `<Document>`](#custom-document) component that wraps each page To use more sophisticated CSS-in-JS solutions, you typically have to implement style flushing for server-side rendering. We enable this by allowing you to define your own [custom `<Document>`](#user-content-custom-document) component that wraps each page
The following wiki pages provide examples for some popular styling solutions: The following wiki pages provide examples for some popular styling solutions:
@ -107,9 +105,15 @@ The following wiki pages provide examples for some popular styling solutions:
- `styletron` - `styletron`
- `fela` - `fela`
### Images and other static files ### Static file serving (e.g.: images)
Create a folder called `static` in your project root directory. From your code you can then reference those files with `/static/` URLs, e.g.: `<img src="/static/file-name.jpg" />`. Create a folder called `static` in your project root directory. From your code you can then reference those files with `/static/` URLs:
```jsx
export default () => (
<img src="/static/my-image.png" />
)
```
### Populating `<head>` ### Populating `<head>`
@ -132,7 +136,7 @@ _Note: The contents of `<head>` get cleared upon unmounting the component, so ma
### Fetching data and component lifecycle ### Fetching data and component lifecycle
When you need state, lifecycle hooks or **initial data population** you can export a `React.Component`. 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
import React from 'react' import React from 'react'
@ -270,6 +274,41 @@ export default ({ url }) => (
) )
``` ```
### Custom `<Document>`
Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc.
In order to support custom server-rendering pipelines (such as rendering CSS with `styled-components` or `glamor`), you can implement `getInitialProps` at the `<Document>` level:
```jsx
import Document, { Head, Main, NextScript } from `next/document`
export default class MyDocument extends Document {
static async getInitialProps (ctx) {
const props = await Document.getInitialProps(ctx)
// append a custom `value`
return { ...props, value: 'hi' }
}
render () {
return (
<html>
<Head>
{/* custom style */}
<style>{`body { margin: 0 }`}</style>
</Head>
{/* set className to body */}
<body className="hi">
{this.props.value}
<Main />
<NextScript />
</body>
</html>
)
}
}
```
### Custom error handling ### Custom error handling
404 or 500 errors are handled both client and server side by a default component `error.js`. If you wish to override it, define a `_error.js`: 404 or 500 errors are handled both client and server side by a default component `error.js`. If you wish to override it, define a `_error.js`: