Next.js Routing: Pages and Links

Next.js uses file-system routing: the folder structure inside app/ is your URL structure. There's no route configuration to write – create a folder with a page.tsx in it and the URL exists. Links between pages use the <Link> component, which navigates without a full page reload and prefetches pages before you click.

Folders are routes

Pages and links

// app/layout.tsx
import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <Link href="/">Home</Link> · <Link href="/courses">Courses</Link> · <Link href="/about">About</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

// app/page.tsx
export default function Home() {
  return <h1>Learn to code for free</h1>;
}

// app/courses/page.tsx
import Link from "next/link";

export default function Courses() {
  return (
    <main>
      <h1>All courses</h1>
      <Link href="/courses/react">React.js →</Link>
    </main>
  );
}

// app/courses/react/page.tsx
export default function ReactCourse() {
  return <h1>React.js – 31 lessons</h1>;
}

// app/about/page.tsx
export default function About() {
  return <h1>About LearnFrenzy</h1>;
}

URL: /
Home · Courses · About
Learn to code for free

› click “Courses”
URL: /courses
Home · Courses · About
All courses
React.js →

› click “React.js →”
URL: /courses/react
Home · Courses · About
React.js – 31 lessons

› click “About”
URL: /about
Home · Courses · About
About LearnFrenzy

› browser back
URL: /courses/react
Home · Courses · About
React.js – 31 lessons

<Link> renders a normal <a> tag, so the links work without JavaScript and are crawlable by search engines. Once the app has loaded, clicks are handled on the client: Next.js fetches only the new page's content, keeps the layout as it is, and updates the URL. Links visible on screen are prefetched in the background, so navigation usually feels instant.

Highlighting the active link

To know the current URL, use the usePathname hook. Hooks run in the browser, so this small component is a Client Component – marked with "use client" at the top of the file (covered in detail later in the course):

// app/nav-link.tsx
"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

export function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const pathname = usePathname();
  const active = href === "/" ? pathname === "/" : pathname.startsWith(href);
  return (
    <Link href={href} aria-current={active ? "page" : undefined} className={active ? "font-bold underline" : ""}>
      {active ? "▸ " : ""}{children}
    </Link>
  );
}

// app/layout.tsx
import { NavLink } from "./nav-link";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav>
          <NavLink href="/">Home</NavLink> · <NavLink href="/courses">Courses</NavLink>
        </nav>
        {children}
      </body>
    </html>
  );
}

// app/page.tsx
export default function Home() {
  return <h1>Home</h1>;
}

// app/courses/page.tsx
export default function Courses() {
  return <h1>Courses</h1>;
}

URL: /
▸ Home · Courses
Home

› click “Courses”
URL: /courses
Home · ▸ Courses
Courses

Route groups and private folders

Route groups are handy for giving different sections different layouts – for example (marketing) with a big footer and (dashboard) with a sidebar – without changing any URLs.

Practice

Summary