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

package.json

@@ -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": {

packages/next/README.md

@@ -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 }
-  }
-
-  render() {
+function Error({ statusCode }) {
   return (
     <p>
-        {this.props.statusCode
-          ? `An error ${this.props.statusCode} occurred on server`
+      {statusCode
+        ? `An error ${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 Page = ({ errorCode, stars }) => {
+  if (errorCode) {
+    return <Error statusCode={errorCode} />
+  }
+
+  return <div>Next stars: {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 }
-  }
-
-  render() {
-    if (this.props.errorCode) {
-      return <Error statusCode={this.props.errorCode} />
-    }
-
-    return <div>Next stars: {this.props.stars}</div>
-  }
 }
 
 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`: