How to Persist NextJS Query Params using Link Component

# if a user was redirected to signup page, but the user already has an existing account
http://localhost:3000/signup?next=http%3A%2F%2Flocalhost%3A3000%2Fsubscribe

# when the user navigates to sign-in page, the `next` query param should persist

http://localhost:3000/signin?next=http%3A%2F%2Flocalhost%3A3000%2Fsubscribe
123456

http://localhost/3000/users?page=1&page_size=10&sort_by=first_name&sort_order=asc
# navigating to page 2 should retain all the other params aside from `page`
http://localhost/3000/users?page=2&page_size=10&sort_by=first_name&sort_order=asc
1234

// pages/signup.tsx
import Link from "next/link";
import { useRouter } from "next/router";

const SignUpPage = () => {
  const router = useRouter();
  const next = router.query.next as string;
  return (
    <form>
      <h1>Sign up</h1>
      <input type="text" placeholder="username" name="username" />
      <input type="text" placeholder="password" name="password" />
      <button type="submit">Sign up</button>
      <Link href={`/signin?next=${next}`}>Already have an account</Link>
    </form>
  );
};
export default SignUpPage;
123456789101112131415161718

// components/RetainQueryLink.tsx
import Link, { LinkProps } from "next/link";
import { useRouter } from "next/router";
import { PropsWithChildren } from "react";

const RetainQueryLink = ({ href, ...props }: LinkProps & PropsWithChildren) => {
  // 1. use useRouter hook to get access to the current query params
  const router = useRouter();

  // 2. get the pathname
  const pathname = typeof href === "object" ? href.pathname : href;

  // 3. get the query from props
  const query =
    typeof href === "object" && typeof href.query === "object"
      ? href.query
      : {};

  return (
    <Link
      {...props}
      href={{
        pathname: pathname,
        // combine router.query and query props
        query: {
          ...router.query,
          ...query,
        },
      }}
    />
  );
};
export default RetainQueryLink;

123456789101112131415161718192021222324252627282930313233

// pages/signup.tsx
import RetainQueryLink from "../components/RetainQueryLink";

const SignUpPage = () => {
  return (
    <form>
      <h1>Sign up</h1>
      <input type="text" placeholder="username" name="username" />
      <input type="text" placeholder="password" name="password" />
      <button type="submit">Sign up</button>
      <RetainQueryLink href={"/signup"}>
        Already have an account
      </RetainQueryLink>
    </form>
  );
};
export default SignUpPage;
1234567891011121314151617

// pages/users.tsx
import RetainQueryLink from "../components/RetainQueryLink";

const UsersPage = () => {
  const pages = [1, 2, 3, 4, 5];

  return (
    <div>
      Users
      <div>
        <span>Pagination</span>
        {pages.map((page) => {
          return (
            <RetainQueryLink
              key={page}
              href={{
                query: { page },
              }}
            >
              {` ${page} `}
            </RetainQueryLink>
          );
        })}
      </div>
      <pre>Location:{window.location.href}</pre>
    </div>
  );
};
export default UsersPage;
1234567891011121314151617181920212223242526272829

const router = useRouter();
router.push({
  pathname: "/signin",
  query: router.query,
});
123456