Initial commit from Create Next App

pages/about.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link'
+import Layout from '../components/Layout'
+
+const AboutPage = () => (
+  <Layout title="About | Next.js + TypeScript Example">
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <p>
+      <Link href="/">
+        <a>Go home</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export default AboutPage

pages/api/users/index.ts

@@ -0,0 +1,16 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { sampleUserData } from '../../../utils/sample-data'
+
+const handler = (_req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    if (!Array.isArray(sampleUserData)) {
+      throw new Error('Cannot find user data')
+    }
+
+    res.status(200).json(sampleUserData)
+  } catch (err) {
+    res.status(500).json({ statusCode: 500, message: err.message })
+  }
+}
+
+export default handler

pages/index.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+import Layout from '../components/Layout'
+
+const IndexPage = () => (
+  <Layout title="Home | Next.js + TypeScript Example">
+    <h1>Hello Next.js 👋</h1>
+    <p>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export default IndexPage

pages/users/[id].tsx

@@ -0,0 +1,61 @@
+import { GetStaticProps, GetStaticPaths } from 'next'
+
+import { User } from '../../interfaces'
+import { sampleUserData } from '../../utils/sample-data'
+import Layout from '../../components/Layout'
+import ListDetail from '../../components/ListDetail'
+
+type Props = {
+  item?: User
+  errors?: string
+}
+
+const StaticPropsDetail = ({ item, errors }: Props) => {
+  if (errors) {
+    return (
+      <Layout title="Error | Next.js + TypeScript Example">
+        <p>
+          <span style={{ color: 'red' }}>Error:</span> {errors}
+        </p>
+      </Layout>
+    )
+  }
+
+  return (
+    <Layout
+      title={`${
+        item ? item.name : 'User Detail'
+      } | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  )
+}
+
+export default StaticPropsDetail
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  // Get the paths we want to pre-render based on users
+  const paths = sampleUserData.map((user) => ({
+    params: { id: user.id.toString() },
+  }))
+
+  // We'll pre-render only these paths at build time.
+  // { fallback: false } means other routes should 404.
+  return { paths, fallback: false }
+}
+
+// This function gets called at build time on server-side.
+// It won't be called on client-side, so you can even do
+// direct database queries.
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  try {
+    const id = params?.id
+    const item = sampleUserData.find((data) => data.id === Number(id))
+    // By returning { props: item }, the StaticPropsDetail component
+    // will receive `item` as a prop at build time
+    return { props: { item } }
+  } catch (err) {
+    return { props: { errors: err.message } }
+  }
+}

pages/users/index.tsx

@@ -0,0 +1,37 @@
+import { GetStaticProps } from 'next'
+import Link from 'next/link'
+
+import { User } from '../../interfaces'
+import { sampleUserData } from '../../utils/sample-data'
+import Layout from '../../components/Layout'
+import List from '../../components/List'
+
+type Props = {
+  items: User[]
+}
+
+const WithStaticProps = ({ items }: Props) => (
+  <Layout title="Users List | Next.js + TypeScript Example">
+    <h1>Users List</h1>
+    <p>
+      Example fetching data from inside <code>getStaticProps()</code>.
+    </p>
+    <p>You are currently on: /users</p>
+    <List items={items} />
+    <p>
+      <Link href="/">
+        <a>Go home</a>
+      </Link>
+    </p>
+  </Layout>
+)
+
+export const getStaticProps: GetStaticProps = async () => {
+  // Example for including static props in a Next.js function component page.
+  // Don't forget to include the respective types for any props passed into
+  // the component.
+  const items: User[] = sampleUserData
+  return { props: { items } }
+}
+
+export default WithStaticProps