initial

pages/ninjas/[id].js

@@ -0,0 +1,34 @@
+export const getStaticPaths = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/users')
+  const data = await res.json()
+  const paths = data.map(ninja => {
+    return {
+      params: { id: ninja.id.toString() }
+    }
+  })
+  return {
+    paths,
+    fallback: false
+  }
+}
+export const getStaticProps = async context => {
+  const id = context.params.id
+  const res = await fetch('https://jsonplaceholder.typicode.com/users/' + id)
+  const data = await res.json()
+  return {
+    props: { ninja: data }
+  }
+}
+const Detail = ({ ninja }) => {
+  return (
+    <div>
+      <h1>{ninja.name}</h1>
+      <p>{ninja.email}</p>
+      <p>{ninja.website}</p>
+
+      <p>{ninja.address.city}</p>
+    </div>
+  )
+}
+
+export default Detail

pages/ninjas/index.js

@@ -1,9 +1,25 @@
-const Ninjas = () => {
+import styles from '../../styles/Ninjas.module.css'
+import Link from 'next/link'
+export const getStaticProps = async () => {
+  const res = await fetch('https://jsonplaceholder.typicode.com/users')
+  const data = await res.json()
+
+  return {
+    props: { ninjas: data }
+  }
+}
+const Ninjas = ({ ninjas }) => {
   return (
     <div>
-      <h1>All Ninjas</h1>
+      <h1></h1>
+      {ninjas.map(ninja => (
+        <Link href={'/ninjas/' + ninja.id} key={ninja.id}>
+          <a className={styles.single}>
+            <h3>{ninja.name}</h3>
+          </a>
+        </Link>
+      ))}
     </div>
-  );
+  )
 }
-
-export default Ninjas;
+export default Ninjas

styles/Ninjas.module.css

@@ -0,0 +1,10 @@
+.single {
+  padding: 2px 16px;
+  background: #fff;
+  display: block;
+  margin: 20px 10px;
+  border-left: 8px solid #fff;
+}
+.single:hover {
+  border-left: 8px solid #4979ff;
+}