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 = () => (
+  <ul>
+    <li>
+      <Link href='/'>
+        <a>Index</a>
+      </Link>
+    </li>
+    <li>
+      <Link href='/about'>
+        <a>About</a>
+      </Link>
+    </li>
+  </ul>
+)
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 (
-        <div>
-          <header>
-            <h1>Header</h1>
-          </header>
-          <main>
-            <Child greeting='Hello From HOC' {...this.props} />
-          </main>
-          <footer>
-            <h1>Footer</h1>
-          </footer>
-        </div>
-      )
-    }
-  }
-}
-
-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 => <Page {...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 => <Page {...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 => (
+  <div>
+    <Nav />
+    <h1>About</h1>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+)
+
+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 (
-      <div>
-        <h2>Index page</h2>
-        <h3 style={{ color: 'red' }}>{greeting}</h3>
-      </div>
-    )
-  }
-}
+import { Nav } from '../components/Nav'
+import { withLanguages } from '../hocs/withLanguages'
+import { withUserAgent } from '../hocs/withUserAgent'
 
-export default withApp(Index)
+const IndexPage = props => (
+  <div>
+    <Nav />
+    <h1>Index</h1>
+    <pre>{JSON.stringify(props, null, 2)}</pre>
+  </div>
+)
+
+export default flowRight([withLanguages, withUserAgent])(IndexPage)