From 6111af00c247cea92fd3ceefb344b59308afc20a Mon Sep 17 00:00:00 2001
From: josiahwiebe <josiah@collectif.co>
Date: Thu, 12 Mar 2020 16:45:36 -0500
Subject: [PATCH 1/2] feat: update api-routes example to SSG

---
 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 16c2bf63a523c91..251ee5fa92c293d 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/${person.id}`}>
       <a>{person.name}</a>
     </Link>
   </li>
diff --git a/examples/api-routes/package.json b/examples/api-routes/package.json
index 5eeb8a1552fb2a4..f74abdd7e0fca8d 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 4f1b5c97d411e1a..0197601de68437b 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 ec15c7a3786c02c..5c98e8e8451726c 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

From 2fecd16fbd9604cd72e25a305897ec5ba0889395 Mon Sep 17 00:00:00 2001
From: Luis Alvarez D <luis@zeit.co>
Date: Thu, 12 Mar 2020 17:49:00 -0500
Subject: [PATCH 2/2] Update examples/api-routes/components/Person.js

---
 examples/api-routes/components/Person.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/api-routes/components/Person.js b/examples/api-routes/components/Person.js
index 251ee5fa92c293d..d43584b1668bc37 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/${person.id}`}>
+    <Link href="/person/[id]" as={`/person/${person.id}`}>
       <a>{person.name}</a>
     </Link>
   </li>