add new nextjs typings with samples (#6102)

The current `examples/with-typescript` is not using the latest type definitions currently available on DefinitelyTyped project for next.

Added new list page examples that demonstrate how to use the new Types for both stateless functional components and classes.  Also modified examples for list to demonstrate typings for `getInitialProps`.

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
+export default Layout

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

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;
+export default ListItem

examples/with-typescript/interfaces/index.tsx

@@ -0,0 +1,4 @@
+export default interface IDataObject {
+  id: number,
+  name: string
+}

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",

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;

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

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

examples/with-typescript/pages/list.tsx

@@ -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;