How to use the Next.js Router
New Courses Coming Soon
Join the waiting lists
Learn how to use the `next/router` package to control routes in Next.js
In linking two pages in Next.js using Link we saw how to use the Link component to declaratively handle routing in Next.js apps.
It’s really handy to manage routing in JSX, but sometimes you need to trigger a routing change programatically.
In this case, you can access the Next.js Router directly, provided in the next/router
package, and call its push()
method.
Here’s an example of accessing the router:
import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
//...
}
Once we get the router object by invoking useRouter()
, we can use its methods.
This is the client side router, so methods should only be used in frontend facing code. The easiest way to ensure this is to wrap calls in the
useEffect()
React hook, or insidecomponendDidMount()
in React stateful components.
The ones you’ll likely use the most are push()
and prefetch()
.
push()
allows us to programmatically trigger a URL change, in the frontend:
router.push('/login')
prefetch()
allows us to programmatically prefetch a URL, useful when we don’t have a Link
tag which automatically handles prefetching for us:
router.prefetch('/login')
Full example:
import { useRouter } from 'next/router'
export default () => {
const router = useRouter()
useEffect(() => {
router.prefetch('/login')
})
}
You can also use the router to listen for route change events.
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- THE VALLEY OF CODE your web development manual
- BOOKS 17 coding ebooks you can download for free on JS Python C PHP and lots more
- Interesting links collection
- Follow me on X