React Workshop Series

Day 1 · Topic 6 of 15Teaching & theory

Foundations & build/Routing — Folders Become URLs

Routing — Folders Become URLs

Slide companion · 38–44

Your takeaway: Predict a URL from an App Router folder, identify the special page.js file, and know that function names do not create routes.

Routing is the GPS for your website

A visitor requests a URL such as /about. The router matches that path to the page UI your app should show.

In the Next.js App Router, route segments come from folders inside src/app. A special page.js file makes the UI for that route publicly accessible.

Folder-to-URL mapConcept only

1src/app/
2├── page.js                 → /
3├── about/
4│   └── page.js             → /about
5└── profile/
6    └── page.js             → /profile

Route segment

A normal route folder adds part of the path

The about folder contributes /about. Nested folders can contribute more segments, such as /about/team.

Special file

`page.js`

The folder alone is not a public page. Its page.js default export provides the UI visitors see at that route.

Folder-to-route map

Build a route by placing page.js

Choose a page, inspect the folder path, then rename its JavaScript function. The file location controls the URL; the function name does not.

Which page do you want to create?

File tree

📁 src

└─ 📁 app

└─ 📄 page.js

Folder to create: No extra folder
Required file path: src/app/page.js
Browser URL: localhost:3000/

src/app/page.jsURL: /

export default function Home() {
  return (
    <h1>Home page</h1>
  )
}

Try renaming the function

Use letters, numbers, _ or $. Watch the URL badge—it stays the same.

The root page file maps to /. It does not need a home folder.

Home route trap

src/app/page.js creates /. If you create src/app/home/page.js, Next.js creates /home, not the home URL.

The file path controls the URL—not the function name

src/app/page.jsConcept only

1// This file is still the / route.
2// Renaming the function does not create /about.
3export default function About() {
4  return <h1>My home page</h1>;
5}

The component function can be called Page, Home, or About; that name is for people reading the code. Because the file above is src/app/page.js, its URL remains /. A real /about route needs src/app/about/page.js.

Two pieces must match

To add a route, put a default-exported React component in the correct special page.js file. A folder without page.js, or a renamed function inside the home page, does not create the route.

How this compares with other approaches

Separate HTML files

Often a new document per page

A basic static site might link to about.html. Servers can also configure cleaner URLs, so the filename is not a universal rule.

React by itself

UI without one required router

React focuses on components. An app can add a routing library or use a framework; React itself does not prescribe one routing setup.

Next.js App Router

An integrated file convention

Organise folders and special files under app; Next.js derives the matching route structure.

Preview: move between routes with `<Link>`

Creating a page gives us a destination. Next.js also provides the built-in <Link> component for internal navigation. It enables client-side transitions that keep shared UI in place, and Next.js can prefetch eligible routes to make navigation feel fast.

Preview only — we return to this in ComponentsConcept only

1import Link from "next/link";
2 
3export default function Navigation() {
4  return <Link href="/">Home</Link>;
5}

Only remember two things for now

Import Link from next/link, then put the target route in href. In the Components topic, we will unpack why <Link> is a built-in Next.js component and place it alongside <Image /> and shared layout.js UI.

Teaching cue: predict firstShow note

Before revealing an answer, point to one file path and ask the room to say the URL together. Then let helpers check one nearby learner's folder tree. This catches the common mistake that the function name creates the route.

Checkpoint — predict before you click

What URL comes from src/app/profile/page.js?
What file supplies the UI for /?
Does renaming function Home to function About change the URL?

Answers: /profile, src/app/page.js, and no.

Read later: Next.js — Layouts and Pages

Day 1 — Routing — Folders Become URLs