Remove id in urls

Author: w3bdesign

src/components/AlgoliaSearch/AlgoliaSearchBox.component.tsx

@@ -51,7 +51,7 @@ const AlgoliaSearchBox = () => {
             }}
           />
           {search && (
-            <div className="absolute">
+            <div className="absolute z-50 bg-white shadow-lg rounded-md mt-1 md:w-[18rem]">
               <Hits hitComponent={SearchResults} />
             </div>
           )}

src/components/AlgoliaSearch/SearchResults.component.tsx

@@ -11,6 +11,7 @@ interface ISearchResultProps {
     on_sale: boolean;
     short_description: string;
     objectID: number;
+    slug: string;
   };
 }
 
@@ -37,14 +38,10 @@ const SearchResults = ({
     objectID,
   },
 }: ISearchResultProps) => {
-  // Replace empty spaces with dash (-)
-  const trimmedProductName = product_name.replace(/ /g, '-');
-
   return (
     <article className="cursor-pointer hit">
       <Link
-        href="/produkt/[post]"
-        as={`/produkt/${trimmedProductName}?id=${objectID}`}
+        href={`/produkt/${product_name.replace(/ /g, '-')}`}
         passHref
       >
         <div className="flex p-6 bg-white">

src/components/Product/DisplayProducts.component.tsx

@@ -79,9 +79,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
             return (
               <div key={uuidv4()} className="group">
                 <Link
-                  href={`/produkt/${encodeURIComponent(
-                    slug,
-                  )}?id=${encodeURIComponent(databaseId)}`}
+                  href={`/produkt/${encodeURIComponent(slug)}`}
                 >
                   <div className="aspect-[3/4] relative overflow-hidden bg-gray-100">
                     {image ? (
@@ -102,9 +100,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                   </div>
                 </Link>
                 <Link
-                  href={`/produkt/${encodeURIComponent(
-                    slug,
-                  )}?id=${encodeURIComponent(databaseId)}`}
+                  href={`/produkt/${encodeURIComponent(slug)}`}
                 >
                   <span>
                     <div className="mt-4">

src/components/Product/ProductCard.component.tsx

@@ -33,7 +33,7 @@ const ProductCard = ({
   return (
     <div className="group">
       <div className="aspect-[3/4] overflow-hidden bg-gray-100 relative">
-        <Link href={`/produkt/${slug}?id=${databaseId}`}>
+        <Link href={`/produkt/${slug}`}>
           {image?.sourceUrl ? (
             <Image
               src={image.sourceUrl}
@@ -51,7 +51,7 @@ const ProductCard = ({
         </Link>
       </div>
 
-      <Link href={`/produkt/${slug}?id=${databaseId}`}>
+      <Link href={`/produkt/${slug}`}>
         <div className="mt-4">
           <p className="text-2xl font-bold text-center cursor-pointer hover:text-gray-600 transition-colors">
             {name}

src/pages/produkt/[slug].tsx

@@ -48,11 +48,21 @@ const Produkt: NextPage = ({
 export default withRouter(Produkt);
 
 export const getServerSideProps: GetServerSideProps = async ({
-  query: { id },
+  params,
+  query,
+  res,
 }) => {
+  // Handle legacy URLs with ID parameter by removing it
+  if (query.id) {
+    res.setHeader('Location', `/produkt/${params?.slug}`);
+    res.statusCode = 301;
+    res.end();
+    return { props: {} };
+  }
+
   const { data, loading, networkStatus } = await client.query({
     query: GET_SINGLE_PRODUCT,
-    variables: { id },
+    variables: { slug: params?.slug },
   });
 
   return {

src/utils/gql/GQL_QUERIES.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
 export const GET_SINGLE_PRODUCT = gql`
-  query Product($id: ID!) {
-    product(id: $id, idType: DATABASE_ID) {
+  query Product($slug: ID!) {
+    product(id: $slug, idType: SLUG) {
       id
       databaseId
       averageRating