diff --git a/examples/analyze-bundles/package.json b/examples/analyze-bundles/package.json
index 44577da10f31566..49db7282fda0e2f 100644
--- a/examples/analyze-bundles/package.json
+++ b/examples/analyze-bundles/package.json
@@ -12,8 +12,8 @@
     "cross-env": "^6.0.3",
     "faker": "^4.1.0",
     "next": "latest",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "license": "ISC"
 }
diff --git a/examples/analyze-bundles/pages/index.js b/examples/analyze-bundles/pages/index.js
index c5e13c7e8f9cc01..c40a24da07b1892 100644
--- a/examples/analyze-bundles/pages/index.js
+++ b/examples/analyze-bundles/pages/index.js
@@ -1,31 +1,28 @@
 import React from 'react'
 import Link from 'next/link'
+import faker from 'faker'
 
-export default class Index extends React.Component {
-  static getInitialProps({ req }) {
-    if (req) {
-      // Runs only in the server
-      const faker = require('faker')
-      const name = faker.name.findName()
-      return { name }
-    }
-
-    // Runs only in the client
-    return { name: 'Arunoda' }
-  }
-
-  render() {
-    const { name } = this.props
-    return (
+const Index = ({ name }) => {
+  return (
+    <div>
+      <h1>Home Page</h1>
+      <p>Welcome, {name}</p>
       <div>
-        <h1>Home Page</h1>
-        <p>Welcome, {name}</p>
-        <div>
-          <Link href="/about">
-            <a>About Page</a>
-          </Link>
-        </div>
+        <Link href="/about">
+          <a>About Page</a>
+        </Link>
       </div>
-    )
+    </div>
+  )
+}
+
+export default Index
+
+export async function getStaticProps() {
+  // The name will be generated at build time only
+  const name = faker.name.findName()
+
+  return {
+    props: { name },
   }
 }