ceo optimization

app/detail/page.tsx

@@ -1,14 +0,0 @@
-import { ContactForm } from "@/components/ContactForm";
-import DetailInfo from "@/components/detailPage/detailInfo";
-import React from "react";
-
-export default function Page() {
-  return (
-    <div>
-      <DetailInfo />
-      <section id="contact">
-        <ContactForm />
-      </section>
-    </div>
-  );
-}

app/product/[slug]/page.tsx

@@ -0,0 +1,38 @@
+import { ContactForm } from "@/components/ContactForm";
+import DetailInfo from "@/components/detailPage/detailInfo";
+import { Product } from "@/lib/products";
+import { generateSlug } from "@/lib/slug";
+import { getAllProducts } from "@/lib/api";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  const products = await getAllProducts();
+
+  return products.map((product) => ({
+    slug: generateSlug(product.name_uz),
+  }));
+}
+
+async function getProduct(slug: string): Promise<Product | undefined> {
+  const products = await getAllProducts();
+
+  return products.find((product) => generateSlug(product.name_uz) === slug);
+}
+
+export default async function Page({ params }: { params: any }) {
+  const { slug } = await params;
+  const product = await getProduct(slug);
+
+  if (!product) {
+    notFound();
+  }
+
+  return (
+    <div>
+      <DetailInfo product={product} />
+      <section id="contact">
+        <ContactForm />
+      </section>
+    </div>
+  );
+}