The useRouter is a hook in Next.js providing programmatic navigation and access to the current route's data. Calling the hook returns an object. From the object you can get access to

  • current path name (pathname)
  • query parameter (query)
  • with push, replace, and other methods, able to navigate between pages/components
  • can control browser history with back, reload, and other methods.

👉 How to use useRouter hook

First, import from the correct packages.

import { useRouter } from 'next/navigation'

NB: next/router is deprecated in Next.js 15.
Since useRouter is a client-side hook, you have to use "use client" at the top of the file.

useRouter hook returns an object of

  • push
  • back
  • forward
  • refresh
  • replace
  • prefetch and
  • hmrRefresh methods Let's describe one by one.

👉 push

It is used to navigate new routes programmatically. It adds a new browser history to the stack. Its syntax is router.push(href, options?). Providing an option is not mandatory.
NB: To know more about optoins read the article. Link props are similar to options
Know more about option or Link props

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();
  const aboutRouteHandler = () => {
    router.push('/about');
  }
  const contactRouteHandler = () => {
    router.push('/contactus', {scroll: false});
  }
  return (
    
      
        {/* Without option */}
        
          Go to About Page
        
      
      
        {/* With option */}
        
          Go to Contact us Page
        
      
    
  );
};

export default AboutPage;

Users can navigate new page, keeping the option to go back to the previous page.

👉 replace

It updates the current history entry and removes the previous entry. Syntax: router.replace(href, options?)

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();
  const aboutRouteHandler = () => {
    router.replace('/about');
  }
  const contactRouteHandler = () => {
    router.replace('/contactus', {scroll: false});
  }
  return (
    
      
        {/* Without option */}
        
          Go to About Page
        
      
      
        {/* With option */}
        
          Go to Contact us Page
        
      
    
  );
};

export default AboutPage;

For using replace method, users are not able to go back to the previous page.

--Where to use:--
After login, form submission users will be redirected to another page. And going back to the login, form page does not make sense.

👉 refresh

refresh the current page without affecting the browsing history. It is used to update and reflect the latest state. It re-fetched data and the server component. Syntax: router.refresh()

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const aboutRouteHandler = () => {
    router.refresh();
  }
  return (
    
      
        {/* Without option */}
        
          Go to About Page
        
       
    
  );
};
export default AboutPage;

👉 prefetch

prefetch cached JS, data, and segment for the specific routes. So that, for the next click, the page can be loaded immediately. Syntax: router.prefetch(href)

'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function AboutPage() {
  const router = useRouter();

  useEffect(() => {
    // যখন AboutPage কম্পোনেন্ট মাউন্ট হবে তখনই প্রিফেচ
    router.prefetch('/contactus');
    router.prefetch('/help');
  }, [router]);

  const handleGo = (path) => {
    router.push(path);
  };

  return (
    
       handleGo('/contactus')}
      >
        Go to Contact Us
      
       handleGo('/help')}
      >
        Get Help
      
    
  );
}

Those pages will be pre-loaded when using useEffect().

_Or we can combine push and prefetch altogether

'use client';
import { useRouter } from 'next/navigation';

export default function AboutPage() {
  const router = useRouter();

  const handleMouseEnter = () => {
    router.prefetch('/contactus');   // Contactus
  };

  const handleClick = () => {
    router.push('/contactus');       /
  };

  return (
    
      
        Go to Contact Us
      
    
  );
}

When mouse enters the button the component get loaded in background. For push method user redirected to the page immediately.

👉 back

back method allows users to go back a step in history.

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const returnPageHandler = () => {
    router.back();
  }
  return (
    
      
        
          Back to Previous Page
        
       
    
  );
};
export default AboutPage;

👉 forward

forward works the same way as the back method does. But goes one step forward from history.

"use client";
import { useRouter } from "next/navigation";
const AboutPage = () => {
  const router = useRouter();

  const nextPageHandler = () => {
    router.forward();
  }
  return (
    
      
        
          Go to Next Page
        
       
    
  );
};
export default AboutPage;

👉 hmrRefresh()

It works only in development mode. Without reloading the page fully, it refreshes the page's data.