Why Programmatic navigation (useRouter) in NextJS? - Purpose & Use Cases

The Big Idea

Discover how to make your Next.js app feel lightning fast by navigating pages without reloads!

The Scenario

Imagine building a website where you want to move users to different pages after they click buttons or complete forms, but you have to reload the whole page every time.

The Problem

Manually reloading pages or using plain links breaks the smooth flow of your app, causes delays, and can lose user data or state. It feels clunky and slow, like flipping through a book by tearing out pages.

The Solution

Next.js's useRouter hook lets you change pages instantly in your app without full reloads, keeping everything fast and smooth like turning pages in a well-made digital book.

Before vs After

✗ Before

window.location.href = '/dashboard';

✓ After

import { useRouter } from 'next/router';

const router = useRouter();
router.push('/dashboard');

What It Enables

This lets your app feel fast and responsive, improving user experience by navigating pages seamlessly without losing app state.

Real Life Example

After a user logs in, you want to send them to their profile page immediately without refreshing the whole site, keeping their data and app state intact.

Key Takeaways

Manual page reloads are slow and disrupt user flow.

useRouter enables smooth, instant navigation inside Next.js apps.

It improves speed, user experience, and keeps app state intact during navigation.