Web development

From folder to URL

About 3 min if you have seen this material before, 12 min or so if it is new to you.

Background

Many web frameworks ask you to maintain a route table mapping URLs to handlers. Next.js uses instead: a page.tsx file's position on disk *is* its URL. There is no route table in this project, and no list of problems anywhere in the code. A folder named in square brackets is a dynamic segment: it matches any value and hands it to the component as a parameter. That is the entire mechanism behind this site's content loop: the slug from the URL is used to look up a YAML file, so dropping a file into content/hep/problems/ produces a working page with no code change at all.

This project's route files are laid out like so:

src/app/
├── page.tsx
└── problems/
    └── [domain]/
        ├── page.tsx
        └── [slug]/
            └── page.tsx

Which URL renders the deepest page.tsx for the problem fermi-coupling-dimension in the hep domain? Give the path, starting with a slash.

Past 30 min on this? That usually means a missing prerequisite rather than a lack of effort — worth reading up before pushing further, starting with Routing fundamentals (Next.js docs).

Want to go deeper?

Routing fundamentals (Next.js docs)