Client-Side Navigation in Next.js

In this tutorial, you will learn client-side navigation in Next.js.

What is client-side navigation?

It means transitions are handled within the browser, without a full page reload.

we will use <Link> and <useRouter> for client-side navigation.

Is Client-Side Navigation Faster?

Yes, there are many reasons to show that client-side navigation is faster.

1. Page transitions feel like a single-page app (SPA)

2. It has no full HTML re-render.

3. It uses prefetching to improve speed.

4. It has minimal network requests.

Example:


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

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

  return (
    <>
      <button onClick={() => router.push("/products")}>Products</button>
      <button onClick={() => router.push("/services")}>Services</button>
    </>
  );
}

When Next.js Automatically Uses Client-Side Navigation

There are below points when Next.js automatically uses client-side navigation.

1. When using <Link href=””>

2. When using router functions (push, replace, etc.)

3. When switching between pages in the same Next.js app

Next.js Client-side navigation methods

1. <Link>: It is used for simple navigation.

2. router.push(): It is used for redirecting after actions.

3. router.replace(): It is used to redirect without history.

4. router.back(): It is used to go backward.