How to change and add query strings in the app folder of Next.js?

In the app folder, router.push(href: string) accepts as a parameter only the href as a string. You need to set query parameters yourself, as they show in this example.

You set it this way:

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";

export default function ExampleClientComponent() {
  const router = useRouter();

  const createQueryString = (name, value) => {
    const params = new URLSearchParams();
    params.set(name, value);

    return params.toString();
  };

  return (
    <>
      {/* using useRouter */}
      <button
        onClick={() => {
          router.push("/posts" + "?" + createQueryString("sort", "asc"));
        }}
      >
        ASC
      </button>

      {/* using <Link> */}
      <Link href={"/posts" + "?" + createQueryString("sort", "desc")}>DESC</Link>
    </>
  );
}

You would read it with the searchParams passed to your page component:

// app/posts/page.js

export default function Page({ searchParams }) {
  return <div>{searchParams.sort}</div>;
}

Or using the useSearchParams function in any client component:

"use client";

import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  return <div>{searchParams.get("sort")}</div>;
}

I wrote a function for using query strings

export const createQueryString = (pathname, router, name: string, value: string) => {
   let searchParams = new URLSearchParams(window.location.search)
   if (value) {
      if (!Array.isArray(value)) {
         if (!searchParams.has(name)) searchParams.append(name, value)
         else searchParams.set(name, value)
      } else {
         if (!searchParams.has(name)) searchParams.append(name, value.join())
         else searchParams.set(name, value.join())
      }
   } else if (searchParams.has(name)) searchParams.delete(name)
   const newUrl = pathname + '?' + searchParams.toString()
   router.push(newUrl)
}

and in my component, I called it. pass pathname and router from 'next/navigation' to createQueryString function

import { createQueryString } from 'helpers'
import { usePathname, useRouter } from 'next/navigation'

const TablePagination = ({ pagination }: Props) => {
   const router = useRouter()
   const pathname = usePathname()
   return (
      <Pagination
         count={50}
         rowsPerPage={10}
         page={pagination.page - 1}
         onPageChange={(event, page) => createQueryString(pathname, router, 'page', `${page + 1}`)}
         onRowsPerPageChange={(event) =>
            createQueryString(pathname, router, 'take', event.target.value)
         }
      />
   )
}

this helper function handle multipe queries at once:

 const createQueryString = useCallback(
(query)=> {
  const params = new URLSearchParams(searchParams);
  for(const [name, value] of Object.entries(query)){
    if(name !== null && value !== undefined) {
      params.set(name, value);
    }
  }
 
 return params.toString();
}, [searchParams]

);

and use it in client component like this:

 const query = {
  category: 'cars',
  section: 'vehicles',
};

router.push(`/?${createQueryString(query)}`);

just make sure that router is imported from 'next-navigation' or 'next-intl/client'