As I said, it’s not related to Next.js. You can do it in React.js too. But preferring URL as state management in Next.js will solve 90% of your problems and save you from making everything client-side

So how do we do that?

Think, what happened when we visited Amazon. We typed something, hit enter, and the same thing appeared in the URL. Do the same for filters. Select something, and it appears in the URL.

Got it?

Yeah, so all we have to do is, whenever a user types something or selects something, we add that selected or typed info in the URL.

There are many ways. Let’s see how we can do that one by one using Next.js

1. Next.js Link

   It’s straightforward. For example,

   <Link
     href={{
       pathname: "/jobs",
       query: { type: "softwaredeveloper" },
     }}
   >
     All Jobs
   </Link>

   And doing this will result in

   Whatever your query is, you specify it inside the , and whenever someone clicks on it, it’ll form the right URL with that corresponding query

2. Next.js Router

   You can use the Next.js hook and route to any page with a query like this

   "use client";
   
   import { useRouter } from "next/navigation";
   
   const MyComponent = () => {
     const router = useRouter();
   
     const handleButtonClick = () => {
       router.push({
         pathname: "/search",
         query: { q: "your_search_query_here" },
       });
     };
   
     return <button onClick={handleButtonClick}>Search</button>;
   };
   
   export default MyComponent;

   And doing this will result in

   Insight

   💡 Yes, you’re right. Using will turn your page/component into a client page/component. So be careful when you want to use it

3. Programmatically

   We can use a built-in JavaScript object, , to create a new URL and navigate to it using or

   Here is a short sweet example of that,

   const handleButtonClick = () => {
     const searchParams = new URLSearchParams(window.location.search);
     searchParams.set("q", "your_search_query_here");
   
     window.location.href = `${window.location.pathname}?${searchParams.toString()}`;
   };

   Learn more about here:

   For a few of you, this might feel a bit too much. But this can come super handy when we’ve to change URL parameters frequently on user actions. For example, when doing a filter. Here is what it would look like

   export const updateSearchParams = (type: string, value: string) => {
     // Get the current URL search params
     const searchParams = new URLSearchParams(window.location.search);
   
     // Set the specified search parameter to the given value
     searchParams.set(type, value);
   
     // Set the specified search parameter to the given value
     const newPathname = `${window.location.pathname}?${searchParams.toString()}`;
   
     return newPathname;
   };
   
   export const deleteSearchParams = (type: string) => {
     // Set the specified search parameter to the given value
     const newSearchParams = new URLSearchParams(window.location.search);
   
     // Delete the specified search parameter
     newSearchParams.delete(type.toLocaleLowerCase());
   
     // Construct the updated URL pathname with the deleted search parameter
     const newPathname = `${
       window.location.pathname
     }?${newSearchParams.toString()}`;
   
     return newPathname;
   };

4. NPM Package

   Yeah yeah, we have a library for that as well. And the one that I like and personally recommend is query-string.

   But why bother using it?

   The above solutions will work perfectly fine if it’s a small application where you don’t have too many things to handle in the URL.

   However, as the application becomes complex, it gets a bit difficult to manage all parameters in the URL.

   For example, if your application might have search, filter, and pagination all in one place. And if the user wants to search for something with a filter and pagination enabled, you have to form a query in that way, i.e.,

   We have to make sure that typing something in the search box doesn’t reset the parameters already present in the URL. Same with filters or pagination. Users should be able to add more parameters with ease.

   This is called preserving URL history/state so we don’t lose the previous information and provide the best UX

   To effectively manage this, I recommend using . This is how you can create URLs while preserving their previous version,

   export function formUrlQuery({ params, key, value }: UrlQueryParams) {
     const currentUrl = qs.parse(params);
   
     currentUrl[key] = value;
   
     return qs.stringifyUrl(
       {
         url: window.location.pathname,
         query: currentUrl,
       },
       { skipNull: true },
     );
   }

   You can call wherever you want, like this,

   /
   const handleUpdateParams = (value: string) => {
     const newUrl = formUrlQuery({
       params: searchParams.toString(),
       key: "location",
       value,
     });
   
     router.push(newUrl);
   };

Sure, there might be more options for achieving the same thing. So as I said, choose the ones that work best for you & your problem case.

But that’s how we do URL as state management in Next.js or even React.js. I hope you understand it!