Next.js Lesson 3: Pages & Navigation

Next.js file-based routing means every file in app/ becomes a URL. The Link component handles navigation without full page reloads.

File-Based Routing

// File path → URL
app/page.tsx              → /
app/about/page.tsx        → /about
app/blog/page.tsx         → /blog
app/blog/[slug]/page.tsx  → /blog/any-post-slug
app/shop/[...path]/page.tsx → /shop/a/b/c (catch-all)
app/(auth)/login/page.tsx → /login  (group, no URL impact)

Link Component

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      {/* Prefetches the page when link is visible! */}
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/blog/my-first-post">First Post</Link>
      
      {/* Programmatic navigation */}
    </nav>
  );
}

useRouter & usePathname

"use client"; // required for hooks
import { useRouter, usePathname } from "next/navigation";

export default function BackButton() {
  const router = useRouter();
  const pathname = usePathname();  // current URL
  
  return (
    <div>
      <p>Current: {pathname}</p>
      <button onClick={() => router.push("/")}>Home</button>
      <button onClick={() => router.back()}>Back</button>
      <button onClick={() => router.refresh()}>Refresh</button>
    </div>
  );
}