<MIqdad> fix route 404

1 files changed, 62 insertions, 70 deletions

diff --git a/src/pages/searchkey/[slug].jsx b/src/pages/searchkey/[slug].jsx
index bdb16662..7f304512 100644
--- a/src/pages/searchkey/[slug].jsx
+++ b/src/pages/searchkey/[slug].jsx
@@ -1,103 +1,95 @@
+import dynamic from 'next/dynamic';
 import axios from 'axios';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
 import Seo from '@/core/components/Seo';
-import dynamic from 'next/dynamic';
-import { capitalizeEachWord } from '../../utils/capializeFIrstWord';
-
-// ✅ Breadcrumb = default export
 import Breadcrumb from '@/lib/category/components/Breadcrumb';
 
 const BasicLayout = dynamic(
   () => import('@/core/components/layouts/BasicLayout'),
+  { ssr: false }
 );
+
 const ProductSearch = dynamic(
   () => import('@/lib/product/components/ProductSearch'),
+  { ssr: false }
 );
 
-export default function KeywordPage() {
-  const route = useRouter();
-
-  const [result, setResult] = useState(null);
-  const [query, setQuery] = useState(null);
-  const [categoryId, setCategoryId] = useState(null);
-
-  const slugRaw = route.query.slug || null;
-  const readableSlug = slugRaw
-    ? decodeURIComponent(slugRaw)
-        .replace(/-/g, ' ')
-        .replace(/\b\w/g, (c) => c.toUpperCase())
-    : '';
-
-  // 🔹 Fetch searchkey dari Solr
-  const getSearchKeyData = async (slug) => {
-    try {
-      const res = await axios(
-        `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey`,
-      );
-
-      setResult(res?.data?.response?.docs?.[0] || null);
-    } catch (e) {
-      if (e.response?.status === 404) {
-        route.replace('/404');
-        return;
-      }
-
-      console.error('Fetching searchkey failed:', e);
+export async function getServerSideProps(context) {
+  const { slug } = context.query;
+
+  if (!slug || typeof slug !== 'string') {
+    return { notFound: true };
+  }
+
+  try {
+    const res = await axios(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey`
+    );
+
+    const result = res?.data?.response?.docs?.[0];
+
+    // 🔥 Kalau Solr gak ada data → 404
+    if (!result) {
+      return { notFound: true };
     }
+
+    return {
+      props: {
+        result,
+        slugRaw: slug,
+      },
+    };
+  } catch (error) {
+    return { notFound: true };
+  }
+}
+
+export default function KeywordPage({ result, slugRaw }) {
+  const readableSlug = decodeURIComponent(slugRaw)
+    .replace(/-/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+
+  const ids = result?.product_ids_is || [];
+
+  const query = {
+    ids: ids.join(','),
+    from: 'searchkey',
   };
 
-  // 🔹 Trigger fetch saat slug siap
-  useEffect(() => {
-    if (!route.isReady || !slugRaw) return;
-    getSearchKeyData(slugRaw);
-  }, [route.isReady, slugRaw]);
-
-  // 🔹 Ambil product_ids + categoryId dari Solr
-  useEffect(() => {
-    if (!result) return;
-
-    // product search - keep ids for API, add from marker for ProductSearch
-    const ids = result.product_ids_is || [];
-    setQuery({
-      ids: ids.join(','),
-      from: 'searchkey',
-    });
-
-    // breadcrumb category
-    const catId =
-      result.category_id_i ||
-      result.public_categ_id_i ||
-      (result.category_ids_is && result.category_ids_is[0]);
-
-    if (catId) {
-      setCategoryId(catId);
-    }
-  }, [result]);
+  const categoryId =
+    result?.category_id_i ||
+    result?.public_categ_id_i ||
+    (result?.category_ids_is && result?.category_ids_is[0]);
+
+  const origin = (process.env.NEXT_PUBLIC_SELF_HOST || '').replace(/\/+$/, '');
+  const url = `${origin}/searchkey/${slugRaw}`;
 
   return (
     <BasicLayout>
       <Seo
         title={`Beli ${readableSlug} Original & Harga Terjangkau - indoteknik.com`}
         description={`Beli ${readableSlug} Kirim Jakarta Surabaya Semarang Makassar Manado Denpasar.`}
+        canonical={url}
         additionalMetaTags={[
           {
-            property: 'keywords',
+            name: 'keywords',
             content: `Beli ${readableSlug}, harga ${readableSlug}, ${readableSlug} murah`,
           },
         ]}
-        canonical={`${process.env.NEXT_PUBLIC_SELF_HOST}/searchkey/${slugRaw}`}
       />
 
-      {/* ✅ Breadcrumb (auto fetch via component) */}
       {categoryId && (
-        <Breadcrumb categoryId={categoryId} currentLabel={readableSlug} />
+        <Breadcrumb
+          categoryId={categoryId}
+          currentLabel={readableSlug}
+        />
       )}
 
-      {/* ✅ Product result */}
-      {query && (
-        <ProductSearch query={query} prefixUrl={`/searchkey/${slugRaw}`} />
+      {ids.length > 0 && (
+        <ProductSearch
+          query={query}
+          prefixUrl={`/searchkey/${slugRaw}`}
+        />
       )}
     </BasicLayout>
   );
-}
+}
\ No newline at end of file