useRouter() in Next.js

useRouter() is a client navigation hook in Next.js that lets you control routing programmatically without page reloads.

What is useRouter()?

It gives you navigation control inside client components — letting you move between pages based on logic instead of only clicking links.

How does it work?

const router = useRouter();

router.push("/");

Router methods instantly change routes without a full browser reload.

Router Methods

• push() → Navigate to a new page
• replace() → Replace current history entry
• back() → Go to previous page
• forward() → Move forward in history
• refresh() → Reload server data

Example — Button Navigation

Clicking the button navigates instantly without reloading the page.

Why use useRouter()?

• Navigation after form submission
• Authentication redirects
• Dynamic UI navigation
• Smooth SPA experience

Real-World Example

After login, users are automatically sent to their dashboard without refreshing the browser.

Interview Tip

useRouter enables programmatic client navigation and history control, allowing smooth route changes without full reloads.

Example — Navigation Buttons

Each button controls navigation without a full page reload.

Why use router methods?

• Dynamic navigation after actions
• History control
• Refresh server data
• Smooth SPA experience