Persist query string parameters in NextJS when navigating client side

After some searching i managed to get the result i wanted with the following:

const customRouter = (module.exports = nextRoutes());

customRouter.Router.pushRouteWithQuery = function(route, params, options) {
    if(!params || !Object.keys(params).length) {
        const routeWithParams = QueryStringHelper.generateUrlWithQueryString(route, customRouter.Router.router.query);
        customRouter.Router.pushRoute(routeWithParams, params, options);
    } else {
        const filteredParams = QueryStringHelper.filterAllowedParams(customRouter.Router.router.query);
        const allParams = {
            ...filteredParams,
            ...params
        };

        customRouter.Router.pushRoute(route, allParams, options);
    }
}

And i would then use my newly created method to redirect to another page with the desired query strings:

import { Router } from 'my/module'

Router.pushRouteWithQuery('/home');

And finally the QueryStringHelper:

module.exports = {
    generateUrlWithQueryString,
    getAllowedParams,
    prepareParamsAsQueryString,
    filterAllowedParams
}

function getAllowedParams() {
    const allowedParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'mid', 'gclid', 'source'];

    return allowedParams;
}

function prepareParamsAsQueryString() {
    const params = getAllowedParams();
    let paramsLikeQueryString = [];

    for (let index = 0; index < params.length; index++) {
        const param = params[index];

        paramsLikeQueryString.push(`${param}=:${param}?`);
    }

    return paramsLikeQueryString.join('&');
}

function generateUrlWithQueryString(url, params) {
    if(Object.keys(params).length) {
        const filteredParams = filterAllowedParams(params);

        if (Object.keys(filteredParams).length) {
            if(url[0] != '/')
                url = `/${url}`;

            return `${url}?${serialize(filteredParams)}`;
        }

        return url;
    }

    return url;
}

function filterAllowedParams(params) {
    if(Object.keys(params).length) {
        const filteredParams = Object.keys(params)
            .filter(key => getAllowedParams().includes(key.toLowerCase()))
            .reduce((obj, key) => {
                obj[key] = params[key];
                return obj;
            }, {});

        return filteredParams;
    }

    return params;
}

// INTERNAL
function serialize(obj) {
    var str = [];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
    }

    return str.join("&");
}

What helped us was the URL and URLSearchParams APIs.

We created a few small methods that we use them when using router.push, here is an example of changing routes but persisting the query params:

/**
 *
 * @param currentPath the current asPath the user is on, eg /stuff/example/more-stuff?utm-campaing=test
 * @param newPath the new path we want to push to the router, eg /stuff/example/even-more-stuff
 * @returns the newPath with the query params from the existing path, eg /stuff/example/even-more-stuff?utm-campaing=test
 */
export const changeRouteKeepParams = (
  currentPath: string,
  newPath: string
): string => {
  const hasQueries = currentPath.indexOf('?');
  const searchQuery = hasQueries >= 0 ? currentPath.substring(hasQueries) : '';
  const params = new URLSearchParams(searchQuery);
  const paramsStr = params.toString() !== '' ? `?${params.toString()}` : '';
  return `${newPath}${paramsStr}`;
};

npm install query-string

import Link from 'next/link'
import {useRouter} from 'next/router'
import queryString from 'query-string'

export const Example = () => {
  const router = useRouter()
  const query = queryString.stringify(router.query)
  const url = query ? `${router.pathname}?${query}` : router.pathname

  return <Link href={url}></Link>
}

If you want to use the Link component then you can create a custom link wrapper of next link. Use this wrapper in all the places where you want the Query params to forward with the link -

'use client';

import Link, { LinkProps } from 'next/link';
import { useSearchParams } from 'next/navigation';
import { ReactNode } from 'react';

interface LinkWithQPProps extends LinkProps {
  children?: ReactNode;
  className?: string;
  ref?: any;
  href: any;
}
export function LinkWithQP({
  ref,
  className,
  href,
  children,
}: LinkWithQPProps) {
  const searchParams = useSearchParams();

  const search = `?${searchParams.toString()}`;

  // handle and ids (#contact, #aboutUs) in the href
  const customHref = href.includes('#')
    ? href.split('#')[0] + search + '#' + href.split('#')[1]
    : href + search;
  return (
    <Link ref={ref} className={className} href={customHref}>
      {children}
    </Link>
  );
}

This was very tricky to solve. The other answers on this question above helped me enormously, but many are overly complex, and others introduce bugs around edge cases, e.g. non-http URLs, SSR, etc. Use this instead.

export const preserveParams = (
  dest: string,
  preservedParams?: URLSearchParams,
) => {
  const [destHref, destSearch] = dest.split('?');
  if (!preservedParams) return dest;
  if (!destSearch) return `${destHref}?${preservedParams.toString()}`;
  const destParams = new URLSearchParams([
    ...Array.from(preservedParams.entries()),
    ...Array.from((new URLSearchParams(destSearch)).entries()),
  ]);

  return `${destHref}?${destParams.toString()}`;
};

export function useRouter() {
  const nextRouter = useNextRouter();
  const params = useSearchParams();
  type Push = typeof nextRouter.push;
  const push = (...[href, options]: Parameters<Push>): ReturnType<Push> =>
    nextRouter.push(preserveParams(href, params), options);

  return { ...nextRouter, push };
}

Advantages:

• For Next 13+ ('app' router)
• parsimonious ('DRY')
• robust. e.g. does not depend on magic strings, e.g. 'http', as some solutions above
• performant. Never does unnecessary computation or object instantiation.
• minimal freehand string munging, aside from the split on '?', but the URL RFC guarantees that this is sane and reliable
• preserveParams() function can be used with e.g. a custom Link component, and does not rely on Hooks (and therefore is not itself a Hook)
• if you want to get really fancy you can use a Proxy object instead of just assigning your new push() to the existing object, for perfect compat
• does not depend on window.location, in contrast to solutions above. window is often unavailable in NextJS execution context (e.g. SSR)
• I use the pattern from the moz docs of URLSearchParams so I have high confidence that edge cases are covered

I got the query string from the URL and passed it long wherever I was using the component.

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export const getUrlPathParams = (): string => {
  const [pathParams, setPathParams] = useState("");
  useEffect(() => {
    setPathParams(router?.asPath?.slice(router?.pathname?.length));
  });
  const router = useRouter();
  return pathParams;
};

And an example of using it in a link.

<Link href={"/" + getUrlPathParams()}> Home </Link>

I'm doing the same thing for my external links so that my ad campaign works.