add layout keying

app/search/children-wrapper.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { useSearchParams } from 'next/navigation';
+import { Fragment } from 'react';
+
+export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+  return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
+}

app/search/layout.tsx

@@ -2,6 +2,7 @@ import Footer from 'components/layout/footer';
 import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
+import ChildrenWrapper from './children-wrapper';
 
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -10,7 +11,9 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         <div className="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>
-        <div className="order-last min-h-screen w-full md:order-none">{children}</div>
+        <div className="order-last min-h-screen w-full md:order-none">
+          <ChildrenWrapper>{children}</ChildrenWrapper>
+        </div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
           <FilterList list={sorting} title="Sort by" />
         </div>

components/layout/navbar/index.tsx

@@ -37,7 +37,7 @@ export async function Navbar() {
                 <li key={item.title}>
                   <Link
                     href={item.path}
-                    prefetch={true}
+                    prefetch={item.path === '/search' ? undefined : true}
                     className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
                   >
                     {item.title}

components/layout/navbar/search.tsx

@@ -1,35 +1,18 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { createUrl } from 'lib/utils';
-import { useRouter, useSearchParams } from 'next/navigation';
+import Form from 'next/form';
+import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
-  const router = useRouter();
   const searchParams = useSearchParams();
 
-  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const val = e.target as HTMLFormElement;
-    const search = val.search as HTMLInputElement;
-    const newParams = new URLSearchParams(searchParams.toString());
-
-    if (search.value) {
-      newParams.set('q', search.value);
-    } else {
-      newParams.delete('q');
-    }
-
-    router.push(createUrl('/search', newParams));
-  }
-
   return (
-    <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+    <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
       <input
         key={searchParams?.get('q')}
         type="text"
-        name="search"
+        name="q"
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
@@ -38,7 +21,7 @@ export default function Search() {
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-4" />
       </div>
-    </form>
+    </Form>
   );
 }
 

package.json

@@ -17,9 +17,9 @@
     "@heroicons/react": "^2.1.5",
     "clsx": "^2.1.1",
     "geist": "^1.3.1",
-    "next": "14.2.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "next": "https://vercel-packages.vercel.app/next/prs/68340/next",
+    "react": "19.0.0-rc-3208e73e-20240730",
+    "react-dom": "19.0.0-rc-3208e73e-20240730",
     "sonner": "^1.5.0"
   },
   "devDependencies": {