next/form

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": "15.0.0-canary.93",
+    "react": "19.0.0-rc-3208e73e-20240730",
+    "react-dom": "19.0.0-rc-3208e73e-20240730",
     "sonner": "^1.5.0"
   },
   "devDependencies": {