Hung/learning project

package.json

@@ -8,8 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "10.0.6",
-    "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "next": "^13.0.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

pages/404.js

@@ -0,0 +1,7 @@
+function NotFoundPage() {
+  return <div>
+    <h1>Page not found!</h1>
+  </div>
+};
+
+export default NotFoundPage;

pages/about/index.js

@@ -0,0 +1,9 @@
+function AboutPage() {
+  return (
+    <div>
+      <h1>The About Page</h1>
+    </div>
+  )
+}
+
+export default AboutPage;

pages/blog/[...slug].js

@@ -0,0 +1,15 @@
+import { useRouter } from "next/router"
+
+function BlogPostsPage() {
+
+  const router = useRouter();
+
+  console.log(router.query);
+
+  return <div>
+    <h1>The Blog Posts</h1>
+  </div>
+
+}
+
+export default BlogPostsPage;

pages/clients/[id]/[clientprojectid].js

@@ -0,0 +1,14 @@
+import { useRouter } from "next/router";
+
+function SelectedClientProjectPage() {
+
+  const router = useRouter();
+
+  console.log(router.query)
+
+  return <div>
+    <h1>The Project Page for a Specific Project for a Selected Client</h1>
+  </div>
+}
+
+export default SelectedClientProjectPage;

pages/clients/[id]/index.js

@@ -0,0 +1,25 @@
+import { useRouter } from "next/router";
+
+function ClientProjectsPage() {
+
+  const router = useRouter()
+
+  console.log(router.query)
+
+  function loadProjectHandler() {
+    // load data ...
+    router.push({
+      pathname: '/clients/[id]/[clientprojectid]',
+      query: {id: 'max', clientprojectid: 'projecta'},
+    })
+  }
+
+  return (
+    <div>
+      <h1>The Projects of a Given Client</h1>
+      <button onClick={loadProjectHandler}>Load Project A</button>
+    </div>
+  )
+}
+
+export default ClientProjectsPage;

pages/clients/index.js

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+
+function ClientsPage() {
+
+  const clients = [
+    { id: "max", name: "Maximilian" },
+    { id: "manu", name: "Manuel" },
+    { id: "hung", name: "Hung" },
+  ];
+
+
+  return <div>
+    <h1>The Clients Page</h1>
+    <ul>
+      {clients.map((client) => (
+        <li key={client.id}>
+          <Link href={{
+            pathname: 'clients/[id]',
+            query: {id: client.id}
+          }}>{client.name}</Link>
+        </li>
+      ))}
+    </ul>
+  </div>
+};
+
+export default ClientsPage;

pages/index.js

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+function HomePage() {
+  return <div>
+    <h1>The Home Page</h1>
+    <ul>
+      <li>
+        <Link href="/portfolio">Portfolio</Link>
+      </li>
+      <li>
+        <Link href="clients">Clients</Link>
+      </li>
+    </ul>
+  </div>
+}
+
+export default HomePage;

pages/portfolio/[projectid].js

@@ -0,0 +1,20 @@
+import { useRouter } from 'next/router';
+
+function PortfolioProjectPage() {
+
+  const router = useRouter();
+
+  console.log(router.pathname);
+  console.log(router.query);
+
+  // send a request to some backend server
+  // to fetch the piece of data with an id of router.query.projectid
+
+  return (
+  <div>
+    <h1>The Portfolio Project Page</h1>
+  </div>
+  );
+}
+
+export default PortfolioProjectPage;

pages/portfolio/index.js

@@ -0,0 +1,7 @@
+function PortfolioPage() {
+  return <div>
+    <h1>The Portfolio Page</h1>
+  </div>
+}
+
+export default PortfolioPage;

pages/portfolio/list.js

@@ -0,0 +1,9 @@
+function ListPage() {
+  return (
+    <div>
+      <h1>The List Page</h1>
+    </div>
+  )
+}
+
+export default ListPage;