Skip to content

Instantly share code, notes, and snippets.

@yordis
Created May 22, 2024 14:58
Show Gist options
  • Save yordis/09a954af3a226d50abe2fac40a38776e to your computer and use it in GitHub Desktop.
Save yordis/09a954af3a226d50abe2fac40a38776e to your computer and use it in GitHub Desktop.
Routing Structure

Routing

  • Fractal Pattern: repeatable pattern at each level of the routing hierarchy.

This example shows the organization based on Next Reserved Naming to define the routing behavior, you could ignore that and adopt whatever naming convention you prefer when it comes to the naming.

In order to add a new URL Subdirectory, you must create a routes directory. That means that routes directory is reserved when it is a direct child of a routing directory. After that, fractal pattern, keep repeating the same structure at each level of routing.

  • Should I put anything next to routes directory?
    • Yes, we have an ADR where you are collocate shared code between routes in the closest common ancestor directory of the routes.
app/
├── page.tsx                         /
├── routes
│   ├── (marketing)
│   │   └── routes
│   │       └── about
│   │           └── page.tsx          /marketing/about
│   ├── blog
│   │   └── routes
│   │       └── [...slug]
│   │           └── page.ts           /blog/[...slug]
│   ├── dashboard
│   │   ├── page.tsx                  /dashboard
│   │   └── routes
│   │       └── [team]
│   │           └── page.tsx          /dashboard/[team]
│   └── shop
│       └── routes
│           ├── [[...slug]]
│           │   └── page.tsx          /shop/[[...slug]]
│           └── [tag]
│               └── routes
│                   └── [item]
│                       └── page.ts  /shop/[tag]/[item]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment