Next.js: The React Framework (App Router)Entry 5 of 16

Navigation

<Link> navigates on the client without a full page reload and prefetches the target route. useRouter() navigates from code.

nextjs.org<Link>useRouter

Notes

  • <Link href="…"> renders an <a> and prefetches the route when it enters the viewport (in production).
  • useRouter() from next/navigation (not next/router, which is the Pages Router): push, replace, back, refresh.
  • usePathname() returns the current path; use it for active links.
  • useSearchParams() reads the query string. In a statically rendered page, wrap the component that uses it in <Suspense>.
  • All four hooks need a Client Component.

What / Why / When

What

Client-side navigation between routes.

Why

Instant transitions, preserved layouts, prefetched data.

When

Every internal link.

Use case

A nav bar that highlights the active link.

Code compare

Next.js
// app/nav-links.tsx"use client";​import Link from "next/link";import { usePathname, useRouter } from "next/navigation";​const links = [  { href: "/", label: "Home" },  { href: "/posts", label: "Posts" },];​export function NavLinks() {  const pathname = usePathname();  const router = useRouter();​  return (    <nav>      {links.map((link) => (        <Link key={link.href} href={link.href} className={pathname === link.href ? "active" : ""}>          {link.label}        </Link>      ))}      <button onClick={() => router.push("/posts/new")}>New post</button>    </nav>  );}
Angular
import { Component, inject } from "@angular/core";import { Router, RouterLink, RouterLinkActive } from "@angular/router";​@Component({  selector: "app-nav-links",  imports: [RouterLink, RouterLinkActive],  template: `    <nav>      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"        >Home</a      >      <a routerLink="/posts" routerLinkActive="active">Posts</a>      <button (click)="newPost()">New post</button>    </nav>  `,})export class NavLinksComponent {  private router = inject(Router);​  newPost() {    this.router.navigate(["/posts/new"]);  }}

Differences and gotchas

  • Angular's routerLinkActive replaces the manual pathname === href check.
  • Next.js prefetches visible links by default. Angular preloads lazy routes only with a preloading strategy (withPreloading(PreloadAllModules)).
  • Importing useRouter from next/router in the App Router throws; use next/navigation.

Quick reference

Next.jsAngular
<Link href="/posts"><a routerLink="/posts">
useRouter().push()Router.navigate()
usePathname()Router.url
useSearchParams()ActivatedRoute.queryParamMap
Active class by handrouterLinkActive