done

Author: Hendrixer

pages/index.jsx

@@ -1,3 +1,12 @@
 import React from 'react'
+import Link from 'next/link'
 
-export default () => <h1>Index Page</h1>
+export default () => (
+  <div>
+    <h1>Index page</h1>
+
+    <Link href="/notes">
+      <a>Notes</a>
+    </Link>
+  </div> 
+)

pages/notes/[id].jsx

@@ -1,11 +1,18 @@
 import React from 'react'
 import { useRouter } from 'next/router'
+import Link from 'next/link'
 
 export default () => {
   const router = useRouter()
   const { id }= router.query
 
   return (
-    <h1>Note: {id} </h1>
+    <div>
+      <h1>Note: {id} </h1>
+
+      <Link href="/notes">
+        <a>Notes</a>
+      </Link>
+    </div>
   )
 }

pages/notes/index.jsx

@@ -1,3 +1,22 @@
 import React from 'react'
+import Link from 'next/link'
 
-export default () => <h1>Notes</h1>
+export default () => {
+  const notes = new Array(15).fill(1).map((e, i) => ({id: i, title: `Note: ${i}`}))
+
+  return (
+    <div>
+      <h1>Notes</h1>
+
+      {notes.map(note => (
+        <div>
+          <Link key={note.id} href="/notes/[id]" as={`/notes/${note.id}`}>
+            <a>
+              <strong>{note.title}</strong>
+            </a>
+          </Link>
+        </div>
+      ))}
+    </div>
+  )
+}