Programmatic navigation (useRouter) in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when this Next.js component runs?

Consider this Next.js functional component using useRouter. What will the button do when clicked?

NextJS

import { useRouter } from 'next/navigation';

export default function NavigateButton() {
  const router = useRouter();
  return (
    <button onClick={() => router.push('/dashboard')}>Go to Dashboard</button>
  );
}

A The page reloads completely and then goes to '/dashboard'.

B The page navigates to '/dashboard' without a full reload.

C Nothing happens because useRouter is not imported correctly.

D An error occurs because router.push requires a second argument.

💡 Hint

Think about how Next.js handles client-side navigation with useRouter.

The useRouter hook from 'next/navigation' enables client-side navigation. Calling router.push('/dashboard') changes the URL and renders the new page without a full reload.

📝 Syntax

intermediate

Which option correctly uses useRouter to replace the current page?

You want to replace the current page in history with '/profile' using useRouter. Which code snippet is correct?

NextJS

import { useRouter } from 'next/navigation';

export default function ReplacePage() {
  const router = useRouter();
  function handleReplace() {
    // Your code here
  }
  return <button onClick={handleReplace}>Replace with Profile</button>;
}

A router.replace('/profile');

B router.navigate('/profile', { replace: true });

C router.push('/profile', { replace: true });

D router.replacePage('/profile');

💡 Hint

Check the method name and parameters for replacing history entries.

The useRouter hook provides a replace() method to replace the current history entry. The push() method does not accept a replace option. navigate() and replacePage() do not exist.

🔧 Debug

advanced

Why does this code cause a runtime error?

This Next.js component throws an error when clicking the button. What is the cause?

NextJS

import { useRouter } from 'next/router';

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

A useRouter is imported from 'next/router' instead of 'next/navigation', causing a runtime error in Next.js 14+.

B router.push requires an async function, so the arrow function must be async.

C The button must be wrapped in a <Link> component for navigation to work.

D router.push('/home') is missing a second argument for query parameters.

💡 Hint

Check the import source of useRouter in Next.js 14+.

In Next.js 14+, useRouter for client navigation is imported from 'next/navigation'. Importing from 'next/router' causes runtime errors because that package is deprecated for client components.

❓ state_output

advanced

What is the URL after this code runs?

Given this component, what will be the URL after clicking the button?

NextJS

import { useRouter } from 'next/navigation';

export default function QueryNav() {
  const router = useRouter();
  function goToSearch() {
    router.push('/search?query=books&page=2');
  }
  return <button onClick={goToSearch}>Search Books</button>;
}

A The URL does not change because query parameters are not supported in router.push.

B The URL changes to '/search' and query parameters are lost.

C The URL changes to '/search?query=books&page=2' but causes a full page reload.

D The URL changes to '/search?query=books&page=2' with no page reload.

💡 Hint

Consider how router.push handles query strings in URLs.

router.push accepts full URLs including query strings and performs client-side navigation without reload, updating the URL accordingly.

🧠 Conceptual

expert

Why use useRouter from 'next/navigation' instead of 'next/router' in Next.js 14+?

Select the best explanation for preferring useRouter from 'next/navigation' in modern Next.js apps.

A Because 'next/navigation' automatically prefetches all routes without manual calls.

B Because 'next/router' is deprecated and no longer works in any Next.js version.

C Because 'next/navigation' provides a new hook designed for React Server Components and client components with improved performance and simpler API.

D Because 'next/router' only works with class components, which are no longer supported.

💡 Hint

Think about Next.js architecture changes and React Server Components.

'next/navigation' is the modern routing API optimized for React Server Components and client components, offering better integration and performance. 'next/router' is legacy and not recommended for new apps.

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