Refactor search form to use nuqs for query state

Replaces manual search query handling with nuqs's useQueryState for improved URL query management in the search form.
 Adds nuqs dependency to package.json.

Author: offbeatjs

package.json

@@ -38,6 +38,7 @@
     "next-cloudinary": "^6.16.0",
     "next-seo": "^6.8.0",
     "nextjs-progressbar": "^0.0.16",
+    "nuqs": "^2.7.2",
     "postcss": "^8.5.6",
     "postgres": "^3.4.7",
     "prettier": "^3.6.2",

src/app/(public)/_components/search-form.tsx

@@ -1,25 +1,29 @@
 'use client';
 
-import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { GoX } from 'react-icons/go';
+import { useQueryState } from 'nuqs';
 
 interface FormValues {
   searchQuery: string;
 }
 
 export function SearchForm() {
-  const router = useRouter();
   const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const [searchQuery, setSearchQuery] = useQueryState('q', {
+    defaultValue: '',
+    parse: (value: string) => value,
+    serialize: (value: string) => value || ''
+  });
 
   const { register, handleSubmit, reset, watch } = useForm<FormValues>({
     defaultValues: {
-      searchQuery: searchParams.get('q') as string
+      searchQuery: searchQuery
     }
   });
 
-  const searchQuery = watch('searchQuery');
+  const queryValue = watch('searchQuery');
 
   if (!pathname.startsWith('/repos')) {
     return null;
@@ -28,12 +32,9 @@ export function SearchForm() {
   function onSubmit({ searchQuery }: FormValues) {
     if (!pathname.startsWith('/repos')) return;
 
-    const reposPathname = pathname as `/repos/${string}`;
     const trimmedQuery = searchQuery.trim();
     if (trimmedQuery !== '') {
-      const sp = new URLSearchParams(searchParams);
-      sp.set('q', trimmedQuery);
-      router.push(`${reposPathname}?${sp.toString()}`);
+      void setSearchQuery(trimmedQuery);
     }
   }
 
@@ -47,11 +48,14 @@ export function SearchForm() {
             type="text"
             {...register('searchQuery', { required: true })}
           />
-          {searchQuery && searchQuery.trim() !== '' && (
+          {queryValue && queryValue.trim() !== '' && (
             <button
               className="absolute top-0 right-0 rounded-l-none btn btn-ghost btn-sm"
               type="button"
-              onClick={() => reset()}
+              onClick={() => {
+                reset();
+                void setSearchQuery(null);
+              }}
             >
               <GoX color="white" />
             </button>