diff --git a/examples/with-higher-order-component/README.md b/examples/with-higher-order-component/README.md
index f9d96db9f05129dd49bc8739a57368264809ed7b..df421ae61d57085ddaa60e051cc02919d57f8349 100644
--- a/examples/with-higher-order-component/README.md
+++ b/examples/with-higher-order-component/README.md
@@ -6,7 +6,8 @@
### Using `create-next-app`
-Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to
+bootstrap the example:
```
npm i -g create-next-app
@@ -20,18 +21,21 @@ Download the example [or clone the repo](https://github.com/zeit/next.js):
Install it and run:
**npm**
+
```bash
npm install
npm run dev
```
**yarn**
+
```bash
npm install
npm run dev
```
-Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+Deploy it to the cloud with [now](https://zeit.co/now)
+([download](https://zeit.co/download))
```bash
now
diff --git a/examples/with-higher-order-component/components/Nav.js b/examples/with-higher-order-component/components/Nav.js
new file mode 100644
index 0000000000000000000000000000000000000000..703880cacf078d6cd39f82ade962a7a471b8c4b5
--- /dev/null
+++ b/examples/with-higher-order-component/components/Nav.js
@@ -0,0 +1,16 @@
+import Link from 'next/link'
+
+export const Nav = () => (
+
+)
diff --git a/examples/with-higher-order-component/components/withApp.js b/examples/with-higher-order-component/components/withApp.js
deleted file mode 100644
index 65daabf265a83df22360c08e9554aa1760b65626..0000000000000000000000000000000000000000
--- a/examples/with-higher-order-component/components/withApp.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-
-function withApp (Child) {
- return class WrappedComponent extends React.Component {
- static getInitialProps (context) {
- return Child.getInitialProps(context)
- }
- render () {
- return (
-
-
-
-
-
-
-
- )
- }
- }
-}
-
-export default withApp
diff --git a/examples/with-higher-order-component/hocs/withLanguages.js b/examples/with-higher-order-component/hocs/withLanguages.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ac6d55cf6fb97557a071773ee9adcd69fe77d8e
--- /dev/null
+++ b/examples/with-higher-order-component/hocs/withLanguages.js
@@ -0,0 +1,22 @@
+import accepts from 'accepts'
+
+import { getDisplayName } from '../lib/getDisplayName'
+
+export const withLanguages = Page => {
+ const WithLanguages = props =>
+
+ WithLanguages.getInitialProps = async context => {
+ const languages = context.req
+ ? accepts(context.req).languages()
+ : navigator.languages
+
+ return {
+ ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}),
+ languages
+ }
+ }
+
+ WithLanguages.displayName = `WithLanguages(${getDisplayName(Page)})`
+
+ return WithLanguages
+}
diff --git a/examples/with-higher-order-component/hocs/withUserAgent.js b/examples/with-higher-order-component/hocs/withUserAgent.js
new file mode 100644
index 0000000000000000000000000000000000000000..cda2ccecd25ef15db6791f4f46e9316a29a3f075
--- /dev/null
+++ b/examples/with-higher-order-component/hocs/withUserAgent.js
@@ -0,0 +1,20 @@
+import { getDisplayName } from '../lib/getDisplayName'
+
+export const withUserAgent = Page => {
+ const WithUserAgent = props =>
+
+ WithUserAgent.getInitialProps = async context => {
+ const userAgent = context.req
+ ? context.req.headers['user-agent']
+ : navigator.userAgent
+
+ return {
+ ...(Page.getInitialProps ? await Page.getInitialProps(context) : {}),
+ userAgent
+ }
+ }
+
+ WithUserAgent.displayName = `WithUserAgent(${getDisplayName(Page)})`
+
+ return WithUserAgent
+}
diff --git a/examples/with-higher-order-component/lib/getDisplayName.js b/examples/with-higher-order-component/lib/getDisplayName.js
new file mode 100644
index 0000000000000000000000000000000000000000..4689c4ea95893b3e8ed21c054f7215aafe3ddc5a
--- /dev/null
+++ b/examples/with-higher-order-component/lib/getDisplayName.js
@@ -0,0 +1,3 @@
+export function getDisplayName(Component) {
+ return Component.displayName || Component.name || 'Unknown'
+}
diff --git a/examples/with-higher-order-component/package.json b/examples/with-higher-order-component/package.json
index 60f5736fc90dc81bf65a81c5f273c3ed826210d8..820c131ebdfd10f29e897a21c15917f12ba0d5ef 100644
--- a/examples/with-higher-order-component/package.json
+++ b/examples/with-higher-order-component/package.json
@@ -7,9 +7,11 @@
"start": "next start"
},
"dependencies": {
+ "accepts": "1.3.4",
+ "lodash.flowright": "3.5.0",
"next": "latest",
- "react": "^16.0.0",
- "react-dom": "^16.0.0"
+ "react": "16.2.0",
+ "react-dom": "16.2.0"
},
"license": "ISC"
}
diff --git a/examples/with-higher-order-component/pages/about.js b/examples/with-higher-order-component/pages/about.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc8175326ad663ad30492c8ce298ee687f665a4a
--- /dev/null
+++ b/examples/with-higher-order-component/pages/about.js
@@ -0,0 +1,15 @@
+import flowRight from 'lodash.flowright'
+
+import { Nav } from '../components/Nav'
+import { withLanguages } from '../hocs/withLanguages'
+import { withUserAgent } from '../hocs/withUserAgent'
+
+const AboutPage = props => (
+
+
+
About
+
{JSON.stringify(props, null, 2)}
+
+)
+
+export default flowRight([withLanguages, withUserAgent])(AboutPage)
diff --git a/examples/with-higher-order-component/pages/index.js b/examples/with-higher-order-component/pages/index.js
index 40520dbf05f45dbb87a8ccfd8c56f14a9c9bdfb5..6e64db757511cddebfb55ae9fd8aea75dba06384 100644
--- a/examples/with-higher-order-component/pages/index.js
+++ b/examples/with-higher-order-component/pages/index.js
@@ -1,20 +1,15 @@
-import React from 'react'
-import withApp from '../components/withApp'
+import flowRight from 'lodash.flowright'
-class Index extends React.Component {
- static getInitialProps (context) {
- const { isServer } = context
- return { isServer }
- }
- render () {
- const { greeting } = this.props
- return (
-
-
Index page
- {greeting}
-
- )
- }
-}
+import { Nav } from '../components/Nav'
+import { withLanguages } from '../hocs/withLanguages'
+import { withUserAgent } from '../hocs/withUserAgent'
-export default withApp(Index)
+const IndexPage = props => (
+
+
+
Index
+
{JSON.stringify(props, null, 2)}
+
+)
+
+export default flowRight([withLanguages, withUserAgent])(IndexPage)