Route Table from Files
Medium · Routing
The App Router builds its URLs from the folders inside app/. Only two file names make a folder publicly reachable: page (a page) and route (a Route Handler / API endpoint). Every other file (layout.tsx, loading.tsx, Button.tsx, utils.ts, ...) can live next to them without becoming a URL. (Special metadata files like sitemap.ts or opengraph-image.tsx also create routes; they do not appear in this exercise.)
Two folder conventions change the URL:
- **Route groups** (name): the folder organizes files (and can have its own layout.tsx), but it is left out of the URL. app/(marketing)/about/page.tsx is /about.
- **Private folders** _name: the folder and everything inside it is ignored by routing. Use them for components and helpers.
Write routeTable(files) that returns { path, kind } for every routable file, sorted by path with plain string comparison (a < b).
- Only files whose path starts with app/ count.
- A file is routable if its name is exactly page.<ext> (kind "page") or route.<ext> (kind "route") with <ext> one of tsx, ts, jsx, js (the default pageExtensions).
- The URL is / plus the remaining folder names joined by / (dynamic folders like [slug] stay as they are). The root is "/".
- The inputs never contain conflicts (two files for the same URL).