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.