Programmatic navigation (useRouter) in NextJS - Step-by-Step Execution

Concept Flow - Programmatic navigation (useRouter)

User triggers event

↓

Call useRouter hook

↓

Invoke router.push('/path')

↓

Next.js changes URL

↓

New page/component loads

↓

Render updated UI

This flow shows how a user action triggers the useRouter hook to navigate to a new page, updating the URL and rendering the new content.

Execution Sample

NextJS

import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();
  return <button onClick={() => router.push('/about')}>Go to About</button>;
}

A button that, when clicked, uses useRouter to navigate programmatically to the '/about' page.

Execution Table

Step	Action	Router State Before	Router Method Called	Router State After	UI Change
1	Component renders	URL: '/'	None	URL: '/'	Button shown on Home page
2	User clicks button	URL: '/'	router.push('/about')	URL: '/about'	Page changes to About content
3	About page loads	URL: '/about'	None	URL: '/about'	About page UI rendered
4	No further action	URL: '/about'	None	URL: '/about'	UI remains on About page

💡 Navigation completes when URL updates to '/about' and About page renders

Variable Tracker

Variable	Start	After Click	Final
router	useRouter hook object	useRouter hook object	useRouter hook object
URL	'/'	'/about'	'/about'

Key Moments - 3 Insights

Why doesn't the page reload when router.push is called?

Because Next.js uses client-side navigation with useRouter, it changes the URL and updates the UI without a full page reload, as shown in execution_table step 2.

What happens if you call router.push with the current URL?

The router will recognize the URL is the same and usually won't trigger a navigation or UI update, so no visible change occurs.

Can useRouter be used outside a component?

No, useRouter is a React hook and must be called inside a functional component, as shown in the sample code.

Visual Quiz - 3 Questions

Look at the execution table, what is the URL after the user clicks the button?

A '/'

B '/about'

C '/home'

D '/contact'

💡 Hint

Check the 'Router State After' column at step 2 in the execution_table.

At which step does the About page UI render?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at the 'UI Change' column in the execution_table for when About page UI appears.

If router.push('/contact') was called instead of '/about', what would change in the execution table?

A The button would disappear

B The URL before click would change

C The URL after click would be '/contact' instead of '/about'

D The router object would be different

💡 Hint

Focus on the 'Router State After' column at step 2 and imagine the URL passed to push.

Concept Snapshot

Programmatic navigation with useRouter:
- Import useRouter from 'next/navigation'
- Call useRouter() inside a component
- Use router.push('/path') to change pages
- Navigation updates URL and UI without reload
- Useful for buttons, events, or redirects

Full Transcript

This example shows how to navigate programmatically in Next.js using the useRouter hook. When the component renders, the URL is '/'. When the user clicks the button, router.push('/about') is called, changing the URL to '/about' and rendering the About page UI without a full reload. The router object remains the same throughout. This method allows smooth client-side navigation triggered by code, not just links.