From fe4da7346938a11ab781c0842204f3ca7ad2ba30 Mon Sep 17 00:00:00 2001
From: Josiah Wiebe <josiahwiebe@users.noreply.github.com>
Date: Thu, 12 Mar 2020 17:55:24 -0500
Subject: [PATCH] feat: update api-routes example to SSG (#11019)

* feat: update api-routes example to SSG

* Update examples/api-routes/components/Person.js

Co-authored-by: Luis Alvarez D <luis@zeit.co>
---
 examples/api-routes/components/Person.js      |  2 +-
 examples/api-routes/package.json              |  2 +-
 examples/api-routes/pages/index.js            |  6 ++---
 .../pages/{person.js => person/[id].js}       | 26 ++++++++++++++++---
 4 files changed, 27 insertions(+), 9 deletions(-)
 rename examples/api-routes/pages/{person.js => person/[id].js} (63%)

diff --git a/examples/api-routes/components/Person.js b/examples/api-routes/components/Person.js
index 16c2bf63a523..d43584b1668b 100644
--- a/examples/api-routes/components/Person.js
+++ b/examples/api-routes/components/Person.js
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 export default ({ person }) => (
   <li>
-    <Link href={`/person?id=${person.id}`}>
+    <Link href="/person/[id]" as={`/person/${person.id}`}>
       <a>{person.name}</a>
     </Link>
   </li>
diff --git a/examples/api-routes/package.json b/examples/api-routes/package.json
index 5eeb8a1552fb..f74abdd7e0fc 100644
--- a/examples/api-routes/package.json
+++ b/examples/api-routes/package.json
@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "3.0.0",
     "next": "latest",
+    "node-fetch": "2.6.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
diff --git a/examples/api-routes/pages/index.js b/examples/api-routes/pages/index.js
index 4f1b5c97d411..0197601de684 100644
--- a/examples/api-routes/pages/index.js
+++ b/examples/api-routes/pages/index.js
@@ -1,5 +1,5 @@
 import Person from '../components/Person'
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
 const Index = ({ people }) => (
   <ul>
@@ -9,11 +9,11 @@ const Index = ({ people }) => (
   </ul>
 )
 
-Index.getInitialProps = async () => {
+export async function getStaticProps() {
   const response = await fetch('http://localhost:3000/api/people')
   const people = await response.json()
 
-  return { people }
+  return { props: { people } }
 }
 
 export default Index
diff --git a/examples/api-routes/pages/person.js b/examples/api-routes/pages/person/[id].js
similarity index 63%
rename from examples/api-routes/pages/person.js
rename to examples/api-routes/pages/person/[id].js
index ec15c7a3786c..5c98e8e84517 100644
--- a/examples/api-routes/pages/person.js
+++ b/examples/api-routes/pages/person/[id].js
@@ -1,4 +1,4 @@
-import fetch from 'isomorphic-unfetch'
+import fetch from 'node-fetch'
 
 const Person = ({ data, status }) =>
   status === 200 ? (
@@ -30,11 +30,29 @@ const Person = ({ data, status }) =>
     <p>{data.message}</p>
   )
 
-Person.getInitialProps = async ({ query }) => {
-  const response = await fetch(`http://localhost:3000/api/people/${query.id}`)
+export async function getStaticPaths() {
+  const response = await fetch('http://localhost:3000/api/people')
+  const data = await response.json()
+
+  const paths = data.map(person => ({
+    params: {
+      id: person.id,
+    },
+  }))
 
+  return { paths, fallback: false }
+}
+
+export async function getStaticProps({ params }) {
+  const response = await fetch(`http://localhost:3000/api/people/${params.id}`)
   const data = await response.json()
-  return { data, status: response.status }
+
+  return {
+    props: {
+      data,
+      status: response.status,
+    },
+  }
 }
 
 export default Person