Fix LinkWithParams with Suspense

This is because of the useSearchParams() requirement

app/(dashboard)/layout.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from "react";
+import React, { type ReactNode, Suspense } from "react";
 import { Inter } from "next/font/google";
 import Script from "next/script";
 import { GoogleAnalytics } from "@next/third-parties/google";

app/sitemap.ts

@@ -8,11 +8,11 @@ const sitemap = async (): Promise<MetadataRoute.Sitemap> => {
   const makes = await fetchApi<Make[]>(`${API_URL}/make`);
 
   return [
-    {
-      url: SITE_URL,
-      lastModified: new Date(),
-      changeFrequency: "monthly" as const,
-    },
+    // {
+    //   url: SITE_URL,
+    //   lastModified: new Date(),
+    //   changeFrequency: "monthly" as const,
+    // },
     {
       url: `${SITE_URL}/cars`,
       lastModified: new Date(),

components/AppSidebar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname } from "next/navigation";
 import {
   type IconType,
   SiBluesky,
@@ -28,6 +28,7 @@ import {
 } from "lucide-react";
 
 import { BrandLogo } from "@/components/BrandLogo";
+import { LinkWithParams } from "@/components/LinkWithParams";
 import { NavSocialMedia } from "@/components/NavSocialMedia";
 import {
   Sidebar,
@@ -69,8 +70,6 @@ type Nav = {
 
 export const AppSidebar = () => {
   const pathname = usePathname();
-  const searchParams = useSearchParams();
-
   const { setOpenMobile } = useSidebar();
 
   return (
@@ -132,15 +131,10 @@ export const AppSidebar = () => {
                             isActive={subItem.url === pathname}
                             onClick={() => setOpenMobile(false)}
                           >
-                            <Link
-                              href={{
-                                pathname: subItem.url,
-                                query: searchParams.toString(),
-                              }}
-                            >
+                            <LinkWithParams href={subItem.url}>
                               {subItem.icon && <subItem.icon />}
                               <span>{subItem.title}</span>
-                            </Link>
+                            </LinkWithParams>
                           </SidebarMenuSubButton>
                         </SidebarMenuSubItem>
                       ))}

components/LinkWithParams.tsx

@@ -1,16 +1,29 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
+import { type ComponentType, type PropsWithChildren, Suspense } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 interface Props extends PropsWithChildren {
   href: string;
 }
 
-export const LinkWithParams = ({ href, children }: Props) => {
-  const params = useSearchParams();
-  const query = params.toString();
-
-  return <Link href={{ pathname: href, query }}>{children}</Link>;
+const withSuspense = <P extends object>(Component: ComponentType<P>) => {
+  return function WithSuspenseWrapper(props: P) {
+    return (
+      <Suspense fallback={null}>
+        <Component {...props} />
+      </Suspense>
+    );
+  };
 };
+
+export const LinkWithParams = withSuspense(({ href, ...props }: Props) => {
+  const searchParams = useSearchParams();
+  return (
+    <Link
+      href={{ pathname: href, query: searchParams.toString() }}
+      {...props}
+    />
+  );
+});