diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx
index d2172b63..a69522ac 100644
--- a/examples/with-typescript/components/Layout.tsx
+++ b/examples/with-typescript/components/Layout.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import Head from 'next/head'
 
 type Props = {
-  title?: string
+  title?: string,
 }
 
 const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the default title' }) => (
@@ -16,16 +16,17 @@ const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the
     <header>
       <nav>
         <Link href='/'><a>Home</a></Link> | {' '}
-        <Link href='/list'><a>List</a></Link> | {' '}
+        <Link href='/list-fc'><a>List as Functional Component</a></Link> | {' '}
+        <Link href='/list-class'><a>List As Class</a></Link> | {' '}
         <Link href='/about'><a>About</a></Link> | {' '}
       </nav>
     </header>
     {children}
     <footer>
-        <hr/>
-        <span>I'm here to stay (Footer)</span>
+      <hr />
+      <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
 )
 
-export default Layout
\ No newline at end of file
+export default Layout
diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx
index ecb25408..f8db630b 100644
--- a/examples/with-typescript/components/List.tsx
+++ b/examples/with-typescript/components/List.tsx
@@ -1,23 +1,19 @@
 import * as React from "react"
 import ListItem from './ListItem'
+import IDataObject from '../interfaces'
 
-export interface DataObject {
-    id: number,
-    name: string
+type Props = {
+  items: IDataObject[],
 }
 
-const List : React.FunctionComponent = () => {
-    const dataArray : DataObject[] =
-        [{id: 101, name: 'larry'}, {id: 102, name: 'sam'}, {id: 103, name: 'jill'}]
-    return (
-        <ul>
-            {dataArray.map(item => (
-                <li key={item.id}>
-                    <ListItem data={item}/>
-                </li>
-            ))}
-        </ul>
-    )
-}
+const List: React.FunctionComponent<Props> = ({ items }) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item.id}>
+        <ListItem data={item} />
+      </li>
+    ))}
+  </ul>
+)
 
-export default List;
+export default List
diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx
index 5f622d4e..90d19f46 100644
--- a/examples/with-typescript/components/ListItem.tsx
+++ b/examples/with-typescript/components/ListItem.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
-import {DataObject} from "./List";
+import IDataObject from '../interfaces'
 
-export interface Props {
-    data: DataObject
+type Props = {
+  data: IDataObject,
 }
 
 const ListItem: React.FunctionComponent<Props> = ({ data }) => (
   <React.Fragment>{data.id}:{data.name}</React.Fragment>
 );
 
-export default ListItem;
\ No newline at end of file
+export default ListItem
diff --git a/examples/with-typescript/interfaces/index.tsx b/examples/with-typescript/interfaces/index.tsx
new file mode 100644
index 00000000..c5e83bb8
--- /dev/null
+++ b/examples/with-typescript/interfaces/index.tsx
@@ -0,0 +1,4 @@
+export default interface IDataObject {
+  id: number,
+  name: string
+}
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
index 6e812fc5..c449f208 100644
--- a/examples/with-typescript/package.json
+++ b/examples/with-typescript/package.json
@@ -15,7 +15,7 @@
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@types/next": "^7.0.2",
+    "@types/next": "^7.0.6",
     "@types/react": "^16.4.16",
     "@types/react-dom": "16.0.8",
     "eslint": "^5.12.0",
diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx
index 7d6b93fa..774cd768 100644
--- a/examples/with-typescript/pages/index.tsx
+++ b/examples/with-typescript/pages/index.tsx
@@ -2,13 +2,13 @@ import * as React from "react"
 import Link from 'next/link'
 import Layout from '../components/Layout'
 
-const index : React.FunctionComponent = () => {
-    return (
-        <Layout title="Home | Next.js + TypeScript Example">
-            <h1>Hello Next.js 👋</h1>
-            <p><Link href='/about'><a>About</a></Link></p>
-        </Layout>
-    )
+const index: React.FunctionComponent = () => {
+  return (
+    <Layout title="Home | Next.js + TypeScript Example">
+      <h1>Hello Next.js 👋</h1>
+      <p><Link href='/about'><a>About</a></Link></p>
+    </Layout>
+  )
 }
 
 export default index;
diff --git a/examples/with-typescript/pages/list-class.tsx b/examples/with-typescript/pages/list-class.tsx
new file mode 100644
index 00000000..202bca3c
--- /dev/null
+++ b/examples/with-typescript/pages/list-class.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { NextContext } from 'next'
+
+import Layout from '../components/Layout'
+import List from '../components/List'
+import IDataObject from '../interfaces'
+
+type Props = {
+  items: IDataObject[],
+}
+
+class ListClass extends React.Component<Props> {
+  static async getInitialProps({ pathname }: NextContext) {
+    const dataArray: IDataObject[] =
+      [{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]
+
+    return { items: dataArray }
+  }
+
+  render() {
+    return (
+      <Layout title="About | Next.js + TypeScript Example">
+        <List items={this.props.items} />
+      </Layout>
+    )
+  }
+}
+
+export default ListClass
diff --git a/examples/with-typescript/pages/list-fc.tsx b/examples/with-typescript/pages/list-fc.tsx
new file mode 100644
index 00000000..dcb9f92c
--- /dev/null
+++ b/examples/with-typescript/pages/list-fc.tsx
@@ -0,0 +1,23 @@
+import { NextFunctionComponent, NextContext } from 'next'
+import Layout from '../components/Layout'
+import List from '../components/List'
+import IDataObject from '../interfaces'
+
+type Props = {
+  items: IDataObject[],
+}
+
+const list: NextFunctionComponent<Props> = ({ items }) => (
+  <Layout title="About | Next.js + TypeScript Example">
+    <List items={items} />
+  </Layout>
+)
+
+list.getInitialProps = async ({ pathname }: NextContext) => {
+  const dataArray: IDataObject[] =
+    [{ id: 101, name: 'larry' }, { id: 102, name: 'sam' }, { id: 103, name: 'jill' }, { id: 104, name: pathname }]
+
+  return { items: dataArray }
+}
+
+export default list
diff --git a/examples/with-typescript/pages/list.tsx b/examples/with-typescript/pages/list.tsx
deleted file mode 100644
index e6662c0a..00000000
--- a/examples/with-typescript/pages/list.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from "react"
-import Layout from '../components/Layout'
-import List from '../components/List'
-
-const list : React.FunctionComponent = () => (
-    <Layout title="About | Next.js + TypeScript Example">
-        <List/>
-    </Layout>
-)
-
-export default list;
\ No newline at end of file