Next.js Pages and Routing

In the Next.js App Router, folders inside app/ become URLs and a page.tsx file makes a route visible.

Next.jsintermediate6 min read

Next.js uses the file system for routing. A file at app/about/page.tsx is shown at /about.

TSX

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

Linking pages

Use the Link component from next/link for navigation inside your site. It loads pages without a full refresh.

TSX

import Link from "next/link";

<Link href="/about">About</Link>

Folder to URL · Plain text

app/page.tsx           ->  /
app/about/page.tsx     ->  /about
app/blog/page.tsx      ->  /blog

Common mistake: Naming the file index.tsx

In the App Router a route's file must be called page.tsx.

Next.js Pages and Routing · CodeChallenge