Push A Route With A URL Object

There are two ways of using the Next.js router to transition to another route using push.

The first, and perhaps more common, is by passing it a string.

router.push('/search?tag=react')

This is great for simple routes. When routes require query params, this can lead to error-prone string interpolation. That's where the second way comes in.

The second is to use a URL Object instead of a string.

router.push({
  pathname: '/search',
  query: { tag: 'react' }
})

Here we are working with an object. I find objects a bit easier to work with, than strings, when doing programmatic things. Especially when it comes to adding and removing query params.