Chapter 2

Routing & Navigation in Next.js

Learn how pages connect and how users move inside a Next.js app.

What is Routing?

Routing means moving between different pages. In Next.js, routes are created automatically using folders and files.

app/page.tsx → /
app/about/page.tsx → /about
app/contact/page.tsx → /contact

1. Link Navigation (Recommended)

Use Link for client-side navigation (no reload).

import Link from "next/link";

export default function Page() {
  return <Link href="/about">Go to About</Link>;
}

Try Live Link → About Page

2. useRouter (Programmatic Navigation)

Used when navigation happens after a click or condition.

import { useRouter } from "next/navigation";

const router = useRouter();

function handleClick() {
  router.push("/about");
}

3. usePathname (Current Route)

Used to detect the current active page.

import { usePathname } from "next/navigation";

const pathname = usePathname();

console.log(pathname);

Current Path: /chapter/2

Loading Search Parameters...

Summary

Next.js navigation tools:
• Link → normal navigation
• useRouter → logic-based navigation
• usePathname → current page detection
• useSearchParams → URL data handling

Pro Tip

Always prefer Link for navigation and use useRouter only for actions like button clicks or conditional routing.