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

The Problem:

How to modify and append query strings within the app folder in a Next.js application, specifically when working with Next.js version 13.4 or later?

The Solutions:

Solution 1: Using `router.push`

In the `app` directory, `router.push(href: string)` only takes a `href` parameter. To change the query parameters, you can use the `createQueryString` function to create a query string and append it to the `href`:

import { useRouter } from "next/navigation";

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

const ExampleClientComponent = () => {
  const router = useRouter();

  return (
    <>
      <button
        onClick={() => {
          router.push("/posts?" + createQueryString("sort", "asc"));
        }}
      >
        ASC
      </button>
      <Link href={"/posts?" + createQueryString("sort", "desc")}>DESC</Link>
    </>
  );
};

Solution 2: Using `searchParams`

In the page component, you can access the query parameters using `searchParams`:

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

Solution 3: Using `useSearchParams`

You can also use the `useSearchParams` function to access and manipulate the query parameters:

import { useSearchParams } from "next/navigation";

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

Solution 2: Using Query Strings

The createQueryString function was created to manipulate 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)
}

In the component, you can use this function like this:

import { createQueryString } from 'helpers'
import { usePathname, useRouter } from 'next/navigation'
const TablePagination = (: 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)
}
/>
)
}

Video Explanation: