Docs/Slug Routes
SLUG ROUTES

Slug Routes

Elegance supports dynamic path segments for pages that need to respond to variable URLs like blog posts, documentation pages, or user profiles.

Defining a Slug Route

A slug route is a directory whose name is wrapped in square brackets with a spread prefix:

text
/pages/[blog]/page.tsx

The page receives the matched segment as a typed parameter:

tsx
export default function page({ blog }: { blog: string }) { return <div>Reading: {blog}</div> }

Static vs Dynamic

By default, slug routes are dynamic, meaning they're matched at request time against incoming URLs. If you want Elegance to pre-generate a fixed set of paths at build time instead, export isDynamic = false alongside a getEnumeratedRoutes function:

tsx
export const isDynamic = false; export async function getEnumeratedRoutes(): Promise<string[]> { return ["cake", "pie"]; } export default function page({ blog }: { blog: string }) { return <div>Reading: {blog}</div> }

For /pages/[...blog]/page.tsx, this produces /blog/cake and /blog/pie as fully static pages at build time. getEnumeratedRoutes can be async, so fetching from a CMS or database is fine.

Segment Types

Elegance supports three kinds of dynamic segments, which can be freely combined in a path:

Standard `[param]`

Matches exactly one path segment.

text
/pages/[...user]/page.tsx > /alice, /bob

Catch-all `[...param]`

Matches one or more segments, including slashes.

text
/pages/docs/[...filename]/page.tsx > /docs/intro, /docs/api/overview

Optional `:[param]`

Matches zero or one segment. The parameter will be undefined if the segment is absent.

text
/pages/:[lang]/page.tsx > /, /en, /fr

These can be combined:

text
/pages/[...user]/:[tab]/page.tsx > /alice, /alice/posts, /bob/followers

Enumerated Routes and Incremental Builds

When using isDynamic = false, Elegance re-runs getEnumeratedRoutes on every incremental build. even if your page file hasn't changed. This is intentional: the set of valid paths is usually driven by external data (a database, a CMS, the filesystem), and Elegance has no way to know when that data changes.

Paths that disappear between builds have their output files cleaned up automatically.