Next.jsにはファイル名を[id].tsxにするだけで、動的なルーティングに対応できるDynamic Routesがあり、id名すなわちパスパラメータを取得するためにrouter.queryを使うが、このrouter.queryにはクエリパラメータとパスパラメータの両方が含まれる。

// example.com/test?mode=dark
router.query  // { id: "test", mode: dark }

通常であればパラメータ名を指定するので問題ないが、このようにページ遷移後にクエリパラメータを引き継ごうとすると、Dynamic Routesのパスパラメータがクエリパラメータとなって遷移してしまう。

//example.com/test?mode=dark
import Link from "next/link";
export default function Page() {
    <Link href={{
        pathname: "/",
        query: { ...router.query },
    }} >
        <a>トップページに戻る</a>
    </Link>
}
// example.com?mode=dark&id=test (&id=testがいらない！！)

機能的に支障が出ることは少ないが、あまり美しくないのでクエリパラメータのみを引き継ぎたい。

router.pathnameでパスパラメータを当てる前のパスを取得できるので、そこから取得したDynamic Routesのパスパラメータを省いたオブジェクトを作ることで、遷移後もクエリパラメータのみを引き継ぐことができた。

// example.com/[id]?mode=dark
import Link from "next/link";
import { useRouter } from "next/router"; //追加
export default function Page() {
    const router = useRouter(); //追加
    const dynamicRoutesName = router.pathname.split(/\[|\]/)[1]; //パラメータ(パス)を取得
    var queryParams = JSON.parse(JSON.stringify(router.query)); //パラメータ（クエリ+パス）をディープコピー
    delete queryParams[dynamicRoutesName]; //パラメータ(パス)を削除
    return (
        <Link href={{
            pathname: "/",
            query: { ...queryParams },
        }} >
            <a>トップページに戻る</a>
        </Link>
    )
}
// example.com?mode=dark (きれい！!)