Generate pages from data with [param] folders, match many segments with rest params, and tidy URLs with route groups.
Why: you don’t hand-write a page per blog post. Wrap a folder name in square brackets, like [slug], and one file serves every value. Note: read the value from the page state with page.params.
<!-- src/routes/blog/[slug]/+page.svelte -> /blog/anything -->
<script lang="ts">
import { page } from '$app/state'
</script>
<h1>Post: {page.params.slug}</h1>Why: a [...rest] folder matches any number of segments, so one file can serve /docs, /docs/a, and /docs/a/b/c. Useful for docs and file-tree style URLs. Note: the captured value is a slash-joined string.
<!-- src/routes/docs/[...path]/+page.svelte -->
<!-- matches /docs/intro, /docs/api/use-router, ... -->
<script lang="ts">
import { page } from '$app/state'
</script>
<p>Path: {page.params.path}</p>Why: double brackets [[lang]] make a segment optional, so the same page serves both /about and /en/about. Handy for an optional language prefix.
src/routes/[[lang]]/about/+page.svelte matches /about (lang is undefined) matches /en/about (lang is "en")
Why: a folder wrapped in (parentheses) groups routes WITHOUT adding to the URL. Use it to give one set of pages its own layout — e.g. an (app) group with a sidebar and a (marketing) group without one.
src/routes/(marketing)/+layout.svelte layout for marketing pages src/routes/(marketing)/about/+page.svelte -> /about (group hidden) src/routes/(app)/+layout.svelte layout for the app src/routes/(app)/dashboard/+page.svelte -> /dashboard