App Route ~Catch-all Segments~
Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...segmentName].
For example, pages/shop/[...slug].js will match /shop/clothes, but also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.
For example:
pages/shop/[...slug].js /shop/a { slug: ['a'] }
pages/shop/[...slug].js /shop/a/b { slug: ['a', 'b'] }
pages/shop/[...slug].js /shop/a/b/c { slug: ['a', 'b', 'c'] }
Catch-all segments ([...slug]) are extremely useful when URL hierarchies are deep and their exact depth is unknown. They are primarily used in the following three scenarios:
Hierarchical structures for documentation or blogs These are ideal for handling deep hierarchies—such as “category / subcategory / article title”—in a single template, as seen on documentation sites. Example: app/docs/[...slug]/page.tsx
E-commerce Site Filtering Used for structures where product categories, brands, sizes, etc., are concatenated as URL segments. Example: /shop/clothes/tops/t-shirts Advantage: Since each segment (clothes, tops...) can be retrieved as an array, it’s easy to reuse them directly as database query conditions.
Building CMSs and File Browsers This is well-suited for systems where users can freely create folders (hierarchies), such as tools like Notion or file management systems like Google Drive.
