Updated with-typescript example to SSG (vercel#11081)

* Update with-typescript example to SSG

* Fixed usage of localhost inside SSG methods

Co-authored-by: Luis Alvarez <[email protected]>

Author: shaswatsaxena

examples/with-typescript/components/Layout.tsx

@@ -28,7 +28,8 @@ const Layout: React.FunctionComponent<Props> = ({
         |{' '}
         <Link href="/users">
           <a>Users List</a>
-        </Link>
+        </Link>{' '}
+        | <a href="/api/users">Users API</a>
       </nav>
     </header>
     {children}

examples/with-typescript/pages/about.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 

examples/with-typescript/pages/api/users/[id].ts

@@ -1,19 +1,15 @@
-import * as React from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
-import { NextPage } from 'next'
 
-const IndexPage: NextPage = () => {
-  return (
-    <Layout title="Home | Next.js + TypeScript Example">
-      <h1>Hello Next.js 👋</h1>
-      <p>
-        <Link href="/about">
-          <a>About</a>
-        </Link>
-      </p>
-    </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

examples/with-typescript/pages/index.tsx

@@ -1,29 +1,17 @@
-import * as React from 'react'
-import { NextPageContext } from 'next'
+import React from 'react'
+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'
-import { sampleFetchWrapper } from '../../utils/sample-api'
 
 type Props = {
   item?: User
   errors?: string
 }
 
-class InitialPropsDetail extends React.Component<Props> {
-  static getInitialProps = async ({ query }: NextPageContext) => {
-    try {
-      const { id } = query
-      const item = await sampleFetchWrapper(
-        `http://localhost:3000/api/users/${Array.isArray(id) ? id[0] : id}`
-      )
-      return { item }
-    } catch (err) {
-      return { errors: err.message }
-    }
-  }
-
+export default class StaticPropsDetail extends React.Component<Props> {
   render() {
     const { item, errors } = this.props
 
@@ -49,4 +37,28 @@ class InitialPropsDetail extends React.Component<Props> {
   }
 }
 
-export default InitialPropsDetail
+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 } }
+  }
+}

examples/with-typescript/pages/users/[id].tsx

@@ -1,23 +1,22 @@
-import { NextPage } from 'next'
+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'
-import { User } from '../../interfaces'
-import { sampleFetchWrapper } from '../../utils/sample-api'
 
 type Props = {
   items: User[]
-  pathname: string
 }
 
-const WithInitialProps: NextPage<Props> = ({ items, pathname }) => (
+const WithStaticProps = ({ items }: Props) => (
   <Layout title="Users List | Next.js + TypeScript Example">
     <h1>Users List</h1>
     <p>
-      Example fetching data from inside <code>getInitialProps()</code>.
+      Example fetching data from inside <code>getStaticProps()</code>.
     </p>
-    <p>You are currently on: {pathname}</p>
+    <p>You are currently on: /users</p>
     <List items={items} />
     <p>
       <Link href="/">
@@ -27,15 +26,12 @@ const WithInitialProps: NextPage<Props> = ({ items, pathname }) => (
   </Layout>
 )
 
-WithInitialProps.getInitialProps = async ({ pathname }) => {
-  // Example for including initial props in a Next.js function component page.
+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[] = await sampleFetchWrapper(
-    'http://localhost:3000/api/users'
-  )
-
-  return { items, pathname }
+  const items: User[] = sampleUserData
+  return { props: { items } }
 }
 
-export default WithInitialProps
+export default WithStaticProps