internal routing update

Author: justinTsugranes

pages/docs/[[...params]].js

@@ -0,0 +1,21 @@
+import { useRouter } from 'next/router'
+
+function Doc() {
+  const router = useRouter()
+  const { params = [] } = router.query
+  console.log(params)
+
+  if (params.length === 2) {
+    return (
+      <h1>
+        Viewing docs for feature {params[0]} and concept {params[1]}
+      </h1>
+    )
+  } else if (params.length === 1) {
+    return <h1>Viewing docs for feature {params[0]}</h1>
+  }
+
+  return <h1>Docs Home Page</h1>
+}
+
+export default Doc

pages/index.js

@@ -1,5 +1,17 @@
+import Link from 'next/link'
+
 function Home() {
-  return <h1>Home Page</h1>;
+  return (
+    <>
+      <h1>Home Page</h1>
+      <Link href='/blog'>
+        <a>Blog</a>
+      </Link>
+      <Link href='/product'>
+        <a>Products</a>
+      </Link>
+    </>
+  )
 }
 
-export default Home;
+export default Home

pages/product/index.js

@@ -1,9 +1,33 @@
-function ProductList() {
+// Use the Link component to navigate to different routes
+// For internal routes, you only need to use an /PAGE href. For external routes, you still use a typical HTML href
+import Link from 'next/link'
+
+function ProductList({ productId = 4 }) {
   return (
     <>
-      <h2>Product 1</h2>
-      <h2>Product 2</h2>
-      <h2>Product 3</h2>
+      <Link href='/'>
+        <a>Home</a>
+      </Link>
+      <h2>
+        <Link href='/product/1'>
+          <a>Product 1</a>
+        </Link>
+      </h2>
+      <h2>
+        <Link href='/product/2'>
+          <a>Product 2</a>
+        </Link>
+      </h2>
+      <h2>
+        <Link href='/product/3'>
+          <a>Product 3</a>
+        </Link>
+      </h2>
+      <h2>
+        <Link href={`/product/${productId}`}>
+          <a>Product {productId}</a>
+        </Link>
+      </h2>
     </>
   )
 }