Add all basic page

next.config.mjs

@@ -1,6 +1,15 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: true, 
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.dummyjson.com',
+        pathname: '/**',
+      },
+    ],
+  },
 };
 
 export default nextConfig;

package.json

@@ -9,18 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.40.0",
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "react-hook-form": "^7.51.5"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "typescript": "^5"
   }
 }

pages/[id].tsx

@@ -0,0 +1,77 @@
+// import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+
+interface Recipe {
+  id: number;
+  name: string;
+  image: string;
+}
+export default function DynamicRount({ recipe }: { recipe: Recipe }) {
+  // const router = useRouter();
+  // const { id } = router.query;
+  // console.log(router);
+  return (
+    <div className="container">
+      <div className="flex justify-between">
+        <h4 className="text-xl font-bold decoration-stone-600">
+          This page is about dynamic route
+        </h4>
+        <Link href="/">Back</Link>
+      </div>
+      <div>Post: {recipe.id}</div>
+      <div className="flex justify-center">
+        <div
+          className="flex-shrink flex flex-col items-center p-3 xl:mx-5 shadow-lg border rounded-xl"
+          key={recipe.id}
+        >
+          <p className="text-lg font-semibold pb-2">{recipe.name}</p>
+          <Image
+            src={recipe.image}
+            width="300"
+            height="300"
+            alt="random  image"
+            className="rounded-xl"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export async function getStaticProps({
+  params,
+}: {
+  params: { id: string | number };
+}) {
+  const id = params.id;
+  const res = await fetch(`https://dummyjson.com/recipes/${id}`);
+  const recipe = await res.json();
+  return { props: { recipe } };
+}
+
+export async function getStaticPaths() {
+  const url = `https://dummyjson.com/recipes`;
+  const res = await fetch(url);
+  const dummy = await res.json();
+  const recipes = dummy.recipes;
+  // console.log(recipes);
+  // console.log(Array.isArray(recipes)); // Should print true if recipes is an array
+
+  const paths = recipes.map((recipe: Recipe) => {
+    return {
+      params: { id: recipe.id.toString() },
+    };
+  });
+  // const paths = recipes.map((recipe: Recipe) => {
+  //   return {
+  //     params: { id: String(recipe.id) },
+  //   };
+  // });
+
+  return {
+    paths,
+    // fallback: true,
+    fallback: false,
+  };
+}

pages/_app.tsx

@@ -1,6 +1,16 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import Layout from "./layout";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </QueryClientProvider>
+  );
 }

pages/components/event/ListenClick.tsx

@@ -1,6 +1,6 @@
 export default function ListenClick() {
   function handleClick() {
-    console.log("increment like count");
+    // console.log("increment like count");
   }
   return (
     <button

pages/components/event/StateHooks.tsx

@@ -3,11 +3,21 @@ import { useState } from "react";
 export default function StateHooks() {
   const [count, setCount] = useState(0);
   function handleClick() {
-    console.log("increment like count");
+    const bigbody = document.querySelector("div");
+    const text = document.createElement("p");
+    const textInside = "develop. preview. ship.";
+    const textContent = document.createTextNode(textInside);
+    text.appendChild(textContent);
+    bigbody ? bigbody.appendChild(text) : console.log("no bigbody");
     setCount(count + 1);
   }
   function handleReset() {
-    console.log("reset count");
+    const bigbody = document.querySelector("div");
+
+    if (bigbody && bigbody.lastElementChild && bigbody.childElementCount > 2) {
+      bigbody.removeChild(bigbody.lastElementChild);
+    }
+    // console.log("reset count");
     setCount(0);
     // setCount((count) => (count = 0)); // can use function to setCount like this
   }

pages/components/navbar.tsx

@@ -0,0 +1,68 @@
+import Link from "next/link";
+import TanStack from "../utils/tanStack";
+export default function Navbar() {
+  const getRandomInt = (max: number) => {
+    return Math.floor(Math.random() * max + 1);
+  };
+  const data = TanStack();
+  // console.log(data);
+  return (
+    <div className="flex flex-col items-center text-center top-0 left-0 right-0 border-b shadow-lg border-gray-400 mb-5">
+      <div className="py-28 bg-yellow-500 w-screen text-slate-100 uppercase">
+        <h4 className="text-5xl ">
+          <Link href={"/"}>Basic App</Link>
+        </h4>
+        <p className="text-lg">The way i can do</p>
+      </div>
+      <div className="w-screen flex justify-center bg-gray-900">
+        <ul className="flex gap-3 text-slate-100 uppercase">
+          <li>
+            <Link className="hover:underline" href="/prop">
+              Property
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="/event">
+              Event
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href={`/${getRandomInt(30)}`}>
+              Route
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href={`dummy-ssr`}>
+              ssr
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="dummy-ssg">
+              ssg
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="dummy-isr">
+              isr
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="dummy-csr">
+              csr
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="dummy-tan">
+              tan
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:underline" href="dummy-form">
+              form
+            </Link>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}

pages/components/properties/PropSend.tsx

@@ -1,10 +1,10 @@
 import { Person, Title } from "../../utils/helper";
 
 export default function PropSend(props: { title: Person[] }) {
-  console.log("this data from prop:", props);
-  console.log("Prop type is:", typeof props);
-  console.log("this data in prop:", props.title);
-  console.log("Title in Prop type is:", typeof props.title);
+  // console.log("this data from prop:", props);
+  // console.log("Prop type is:", typeof props);
+  // console.log("this data in prop:", props.title);
+  // console.log("Title in Prop type is:", typeof props.title);
   //   console.log(
   //     "this data in title:",
   //     props.title.id,
@@ -13,7 +13,9 @@ export default function PropSend(props: { title: Person[] }) {
   //   );
   return (
     <div>
-      <h4 className="text-lg font-bold decoration-stone-600">Passing props to a component</h4>
+      <h4 className="text-lg font-bold decoration-stone-600">
+        Passing props to a component
+      </h4>
       <ul>
         {props.title.map((person, index) => (
           <li key={index}>