diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx
index 62be53a9568ba9588ff99ae6a40fbbad50564056..d2172b63394b2a521723d4f9bc4d876dc83e067e 100644
--- a/examples/with-typescript/components/Layout.tsx
+++ b/examples/with-typescript/components/Layout.tsx
@@ -6,7 +6,7 @@ type Props = {
   title?: string
 }
 
-const Layout: React.SFC<Props> = ({ children, title = 'This is the default title' }) => (
+const Layout: React.FunctionComponent<Props> = ({ children, title = 'This is the default title' }) => (
   <div>
     <Head>
       <title>{title}</title>
@@ -15,13 +15,15 @@ const Layout: React.SFC<Props> = ({ children, title = 'This is the default title
     </Head>
     <header>
       <nav>
-        <Link href='/'><a>Home</a></Link> |{' '}
-        <Link href='/about'><a>About</a></Link>
+        <Link href='/'><a>Home</a></Link> | {' '}
+        <Link href='/list'><a>List</a></Link> | {' '}
+        <Link href='/about'><a>About</a></Link> | {' '}
       </nav>
     </header>
     {children}
     <footer>
-      I'm here to stay
+        <hr/>
+        <span>I'm here to stay (Footer)</span>
     </footer>
   </div>
 )
diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ecb254089cc0c048cb6b12045373ce18c0cc3281
--- /dev/null
+++ b/examples/with-typescript/components/List.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import ListItem from './ListItem'
+
+export interface DataObject {
+    id: number,
+    name: string
+}
+
+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>
+    )
+}
+
+export default List;
diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5f622d4e2021b852ccb5f7d395777f2ce7fbd923
--- /dev/null
+++ b/examples/with-typescript/components/ListItem.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import {DataObject} from "./List";
+
+export interface Props {
+    data: DataObject
+}
+
+const ListItem: React.FunctionComponent<Props> = ({ data }) => (
+  <React.Fragment>{data.id}:{data.name}</React.Fragment>
+);
+
+export default ListItem;
\ No newline at end of file
diff --git a/examples/with-typescript/package.json b/examples/with-typescript/package.json
index 627bd30cdc1c1f886fed6baafb164bfbc83c252d..6e812fc58d560cb1a4cf5bf36e718706f10bd835 100644
--- a/examples/with-typescript/package.json
+++ b/examples/with-typescript/package.json
@@ -9,15 +9,17 @@
   },
   "dependencies": {
     "@zeit/next-typescript": "^1.1.1",
-    "next": "latest",
+    "lint": "^1.1.2",
+    "next": "^7.0.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {
-    "@types/next": "^7.0.1",
+    "@types/next": "^7.0.2",
     "@types/react": "^16.4.16",
     "@types/react-dom": "16.0.8",
-    "typescript": "3.1.1"
+    "eslint": "^5.12.0",
+    "typescript": "3.2.1"
   },
   "license": "ISC"
 }
diff --git a/examples/with-typescript/pages/about.tsx b/examples/with-typescript/pages/about.tsx
index 39233aab2b91a18f05820b1b52148d265eb3dbce..86b1aa24d8040507e3df2395bedff81ade912a51 100644
--- a/examples/with-typescript/pages/about.tsx
+++ b/examples/with-typescript/pages/about.tsx
@@ -1,9 +1,12 @@
+import * as React from "react"
 import Link from 'next/link'
 import Layout from '../components/Layout';
 
-export default () => (
+const about : React.FunctionComponent = () => (
   <Layout title="About | Next.js + TypeScript Example">
     <p>This is the about page</p>
     <p><Link href='/'><a>Go home</a></Link></p>
   </Layout>
-)
\ No newline at end of file
+)
+
+export default about;
\ No newline at end of file
diff --git a/examples/with-typescript/pages/index.tsx b/examples/with-typescript/pages/index.tsx
index 427ced903d3190a931d74fc40d9d6c4a9f3b34c6..7d6b93fa760e3e6b66e0bb789393de1c303b8ad6 100644
--- a/examples/with-typescript/pages/index.tsx
+++ b/examples/with-typescript/pages/index.tsx
@@ -1,9 +1,14 @@
+import * as React from "react"
 import Link from 'next/link'
-import Layout from '../components/Layout';
+import Layout from '../components/Layout'
 
-export default () => (
-  <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.tsx b/examples/with-typescript/pages/list.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e6662c0a8f578b3e2ae0e514c7952d3b92c64913
--- /dev/null
+++ b/examples/with-typescript/pages/list.tsx
@@ -0,0 +1,11 @@
+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
