`next/router` to `next/navigation` migration cheatsheet

import { useRouter } from 'next/router'

const { pathname, query, asPath } = useRouter()

import { usePathname } from 'next/navigation'

const pathname = usePathname()

import { useSearchParams } from 'next/navigation'

const searchParams = useSearchParams()

const query = Object.fromEntries(searchParams ?? new URLSearchParams())

Object.fromEntries(new URLSearchParams({ status: ["foo", "bar"]}))
// output: { status: 'foo,bar' }

new URLSearchParams({ status: ["foo", "bar"]}).toString()
// output: `status=foo%2Cbar`

const sp = new URLSearchParams()
sp.append("status", "foo")
sp.append("status", "bar")
sp.toString()
// output: `status=foo&status=bar`

import { useSearchParams, useParams } from 'next/navigation'

const searchParams = useSearchParams()
const params = useParams()

const searchParamsRecord = Object.fromEntries(searchParams ?? new URLSearchParams())

const query = { ...searchParamsRecord, ...params }

import { Link } from 'next/link'

// In the Pages Router, dynamic params will be omitted automatically.
// In the App Router, you have to handle this manually.
<Link href={{
  query: { ...query, foo: "bar" }
}}/>
// This also applies when navigating using router methods e.g. router.push

import { usePathname, useSearchParams } from 'next/navigation'

const pathname = usePathname()
const searchParams = useSearchParams()

const asPath = pathname + "?" + searchParams

import { useRouter } from 'next/router'

const { pathname, query, replace } = useRouter()
replace({ pathname, query: { ...query, foo: "bar" } })

import { useRouter, useSearchParams, usePathname } from 'next/navigation'

const { replace } = useRouter()
const readOnlyParams = useSearchParams()
const pathname = usePathname()

const searchParams = new URLSearchParams(readOnlyParams ?? {})
searchParams.set("foo", "bar")

replace(pathname + "?" + searchParams)