Update api-rest-example to SSG (#11362)

* Update api-rest-example to SSG

* Use SWR for data fetching

* Updated pages

Co-authored-by: Luis Alvarez <luis@zeit.co>

Author: jazibjafri

examples/api-routes-rest/package.json

@@ -7,10 +7,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "isomorphic-unfetch": "3.0.0",
     "next": "latest",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "swr": "^0.1.18"
   },
   "license": "ISC"
 }

examples/api-routes-rest/pages/api/users.js

@@ -1,11 +1,5 @@
 // Fake users data
-const users = [
-  {
-    id: 1,
-  },
-  { id: 2 },
-  { id: 3 },
-]
+const users = [{ id: 1 }, { id: 2 }, { id: 3 }]
 
 export default (req, res) => {
   // Get data from your database

examples/api-routes-rest/pages/index.js

@@ -1,23 +1,23 @@
-import fetch from 'isomorphic-unfetch'
+import useSwr from 'swr'
 import Link from 'next/link'
 
-const Index = ({ users }) => (
-  <ul>
-    {users.map(user => (
-      <li key={user.id}>
-        <Link href="/user/[id]" as={`/user/${user.id}`}>
-          <a>{`User ${user.id}`}</a>
-        </Link>
-      </li>
-    ))}
-  </ul>
-)
+const fetcher = url => fetch(url).then(res => res.json())
 
-Index.getInitialProps = async () => {
-  const response = await fetch('http://localhost:3000/api/users')
-  const users = await response.json()
+export default function Index() {
+  const { data, error } = useSwr('/api/users', fetcher)
 
-  return { users }
-}
+  if (error) return <div>Failed to load users</div>
+  if (!data) return <div>Loading...</div>
 
-export default Index
+  return (
+    <ul>
+      {data.map(user => (
+        <li key={user.id}>
+          <Link href="/user/[id]" as={`/user/${user.id}`}>
+            <a>{`User ${user.id}`}</a>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  )
+}

examples/api-routes-rest/pages/user/[id].js

@@ -1,12 +1,14 @@
-import fetch from 'isomorphic-unfetch'
+import { useRouter } from 'next/router'
+import useSwr from 'swr'
 
-const User = ({ user }) => <div>{user.name}</div>
+const fetcher = url => fetch(url).then(res => res.json())
 
-User.getInitialProps = async ({ query: { id } }, res) => {
-  const response = await fetch(`http://localhost:3000/api/user/${id}`)
-  const user = await response.json()
+export default function User() {
+  const router = useRouter()
+  const { data, error } = useSwr(`/api/user/${router.query.id}`, fetcher)
 
-  return { user }
-}
+  if (error) return <div>Failed to load user</div>
+  if (!data) return <div>Loading...</div>
 
-export default User
+  return <div>{data.name}</div>
+}