Convert Readme Custom Error Pages To Functional Component (#8513)
* Convert Readme Custom Error Pages To Functional Component * Update packages/next/README.md Co-Authored-By: Tim Neutkens <tim@timneutkens.nl> * Run readme through prettier
This commit is contained in:
parent
3e81acee56
commit
a0341ea150
2 changed files with 31 additions and 29 deletions
|
@ -17,7 +17,8 @@
|
|||
"test": "yarn run testall || yarn run test-take2",
|
||||
"lint": "lerna run typescript && standard && standard --parser typescript-eslint-parser --plugin typescript \"packages/**/*.ts\"",
|
||||
"lint-fix": "standard --fix && standard --fix --parser typescript-eslint-parser --plugin typescript \"packages/**/*.ts\"",
|
||||
"prettier": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\" && yarn lint-fix",
|
||||
"prettier": "prettier --write",
|
||||
"prettier-fix": "prettier --write \"**/*.{js,jsx,json,ts,tsx,md,mdx,css,html,yml,yaml,scss,sass}\" && yarn lint-fix",
|
||||
"types": "lerna run types --stream",
|
||||
"typescript": "lerna run typescript",
|
||||
"prepublish": "lerna run prepublish",
|
||||
|
@ -40,6 +41,10 @@
|
|||
"*.ts": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
],
|
||||
"*.md": [
|
||||
"prettier --write",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"standard": {
|
||||
|
|
|
@ -596,7 +596,7 @@ const MyButton = React.forwardRef(({ onClick, href }, ref) => (
|
|||
|
||||
export default () => (
|
||||
<>
|
||||
<Link href='/another'>
|
||||
<Link href="/another">
|
||||
<MyButton />
|
||||
</Link>
|
||||
</>
|
||||
|
@ -1674,21 +1674,19 @@ export default MyDocument
|
|||
```jsx
|
||||
import React from 'react'
|
||||
|
||||
class Error extends React.Component {
|
||||
static getInitialProps({ res, err }) {
|
||||
const statusCode = res ? res.statusCode : err ? err.statusCode : null
|
||||
return { statusCode }
|
||||
}
|
||||
function Error({ statusCode }) {
|
||||
return (
|
||||
<p>
|
||||
{statusCode
|
||||
? `An error ${statusCode} occurred on server`
|
||||
: 'An error occurred on client'}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<p>
|
||||
{this.props.statusCode
|
||||
? `An error ${this.props.statusCode} occurred on server`
|
||||
: 'An error occurred on client'}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
Error.getInitialProps = ({ res, err }) => {
|
||||
const statusCode = res ? res.statusCode : err ? err.statusCode : null
|
||||
return { statusCode }
|
||||
}
|
||||
|
||||
export default Error
|
||||
|
@ -1703,22 +1701,20 @@ import React from 'react'
|
|||
import Error from 'next/error'
|
||||
import fetch from 'isomorphic-unfetch'
|
||||
|
||||
class Page extends React.Component {
|
||||
static async getInitialProps() {
|
||||
const res = await fetch('https://api.github.com/repos/zeit/next.js')
|
||||
const errorCode = res.statusCode > 200 ? res.statusCode : false
|
||||
const json = await res.json()
|
||||
|
||||
return { errorCode, stars: json.stargazers_count }
|
||||
const Page = ({ errorCode, stars }) => {
|
||||
if (errorCode) {
|
||||
return <Error statusCode={errorCode} />
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.errorCode) {
|
||||
return <Error statusCode={this.props.errorCode} />
|
||||
}
|
||||
return <div>Next stars: {stars}</div>
|
||||
}
|
||||
|
||||
return <div>Next stars: {this.props.stars}</div>
|
||||
}
|
||||
Page.getInitialProps = async () => {
|
||||
const res = await fetch('https://api.github.com/repos/zeit/next.js')
|
||||
const errorCode = res.statusCode > 200 ? res.statusCode : false
|
||||
const json = await res.json()
|
||||
|
||||
return { errorCode, stars: json.stargazers_count }
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
@ -2191,6 +2187,7 @@ Note: `NODE_ENV` is properly configured by the `next` subcommands, if absent, to
|
|||
Note: we recommend putting `.next`, or your [custom dist folder](https://github.com/zeit/next.js#custom-configuration), in `.gitignore` or `.npmignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy, excluding `.next` or your custom dist folder.
|
||||
|
||||
### Compression
|
||||
|
||||
Next.js provides [gzip](https://tools.ietf.org/html/rfc6713#section-3) compression to compress rendered content and static files. Compression only works with the `server` target. In general you will want to enable compression on a HTTP proxy like [nginx](https://www.nginx.com/), to offload load from the `Node.js` process.
|
||||
|
||||
To disable **compression** in Next.js, set `compress` to `false` in `next.config.js`:
|
||||
|
|
Loading…
Reference in a new issue