FRONTENDO
Emberhold Forge
0
0
Next.js · Routing & Pages
New technique

Folders are URL segments

Every folder under app/ is one more step down the mine shaft: one more piece of the URL.

Next.js has no route table. Instead, the folder structure inside app/ is the list of URLs. You add a page by adding a folder with a page.tsx in it, and you can see every route of the app at a glance in the file tree.

app/
├── page.tsx              → /
├── about/
│   └── page.tsx          → /about
└── halls/
    ├── page.tsx          → /halls
    └── forge/
        └── page.tsx      → /halls/forge
  • Each folder adds one segment to the URL.
  • A folder only becomes a public page when it contains a page.tsx.
  • Other files in the folder - components, helpers, styles - are not routes.