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.

Practice

1. What does the useRouter hook from next/navigation allow you to do in a Next.js app?

easy

A. Navigate between pages programmatically using code

B. Automatically reload the page on data change

C. Fetch data from an API endpoint

D. Style components with CSS modules

Solution

1. Step 1: Understand the purpose of useRouter

   The useRouter hook provides methods to change pages in code, not by user clicking links.

2. Step 2: Identify what useRouter does not do

   It does not handle data fetching, styling, or auto-reloading pages.

3. Final Answer:

   Navigate between pages programmatically using code -> Option A

4. Quick Check:

   useRouter = programmatic navigation [OK]

Hint: useRouter lets you move pages by code, not by clicking [OK]

Common Mistakes:

• Confusing useRouter with data fetching hooks
• Thinking useRouter styles components
• Assuming useRouter reloads pages automatically

2. Which of the following is the correct way to import useRouter from Next.js 14+ for programmatic navigation?

easy

A. import { useRouter } from 'next/navigation';

B. import useRouter from 'next/navigation';

C. import { useRouter } from 'next/router';

D. import { useRouter } from 'next/navigation/useRouter';

Solution

1. Step 1: Recall the correct import path for useRouter in Next.js 14+

   In Next.js 14+, useRouter is imported from next/navigation, not next/router.

2. Step 2: Check syntax correctness

   import { useRouter } from 'next/navigation'; uses named import from the correct module. import useRouter from 'next/navigation'; misses braces, causing syntax error. import { useRouter } from 'next/navigation/useRouter'; uses a wrong path.

3. Final Answer:

   import { useRouter } from 'next/navigation'; -> Option A

4. Quick Check:

   Correct import = import { useRouter } from 'next/navigation'; [OK]

Hint: Use named import from 'next/navigation' for useRouter [OK]

Common Mistakes:

• Importing from 'next/router' instead of 'next/navigation'
• Missing curly braces in import
• Using incorrect import paths

3. Given this code snippet in a Next.js component, what will happen when the button is clicked?

import { useRouter } from 'next/navigation';

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

medium

A. The page will navigate to '/about' replacing the current history entry

B. The page will reload but stay on the same URL

C. The page will navigate to '/about' adding a new entry in browser history

D. Nothing happens because router.push is invalid

Solution

1. Step 1: Understand router.push behavior

   The router.push('/about') method navigates to the '/about' page and adds a new entry in the browser history stack.

2. Step 2: Confirm the code triggers navigation on button click

   The button's onClick calls router.push correctly, so navigation happens as expected.

3. Final Answer:

   The page will navigate to '/about' adding a new entry in browser history -> Option C

4. Quick Check:

   router.push adds history entry = The page will navigate to '/about' adding a new entry in browser history [OK]

Hint: router.push adds new history entry and navigates [OK]

Common Mistakes:

• Confusing router.push with router.replace
• Thinking router.push reloads current page
• Assuming router.push does nothing without await

4. Identify the error in this Next.js component using useRouter for navigation:

import { useRouter } from 'next/navigation';

export default function Page() {
  const router = useRouter;
  return (
    <button onClick={() => router.push('/contact')}>Contact</button>
  );
}

medium

A. useRouter should be imported from 'next/router'

B. router.push should be router.replace

C. Button onClick should be onClick={router.push('/contact')}

D. Missing parentheses when calling useRouter hook

Solution

1. Step 1: Check how useRouter is assigned

   The code assigns const router = useRouter; without calling it as a function. It should be useRouter().

2. Step 2: Verify other parts

   router.push is valid for navigation. onClick syntax is correct. Import path is correct.

3. Final Answer:

   Missing parentheses when calling useRouter hook -> Option D

4. Quick Check:

   useRouter must be called as a function [OK]

Hint: Always call useRouter() with parentheses [OK]

Common Mistakes:

• Assigning useRouter without parentheses
• Using router.push incorrectly in onClick
• Importing useRouter from wrong module

5. You want to navigate to a new page without adding a new entry in the browser history (so the back button skips the current page). Which method of useRouter should you use and how?

const router = useRouter();
// Your code here

hard

A. Use router.push('/newpage') to add a new history entry

B. Use router.replace('/newpage') to replace current history entry

C. Use router.reload() to reload current page

D. Use router.back() to go back to previous page

Solution

1. Step 1: Understand difference between push and replace

   router.push() adds a new entry to browser history, while router.replace() swaps the current entry.

2. Step 2: Choose method to avoid adding history entry

   To navigate without adding a new history entry, use router.replace('/newpage').

3. Final Answer:

   Use router.replace('/newpage') to replace current history entry -> Option B

4. Quick Check:

   replace swaps history entry = Use router.replace('/newpage') to replace current history entry [OK]

Hint: Use router.replace() to avoid adding history entry [OK]

Common Mistakes:

• Using router.push when replace is needed
• Confusing reload with navigation
• Using router.back instead of forward navigation