Routing

SvelteKit uses file-based routing where the file structure in the routes directory determines the URL structure.

Special Files

  • +layout.svelte - Root layout component
  • +layout.server.ts - Server-side layout data
  • +layout.ts - Client-side layout data
  • +page.svelte - Page component
  • +page.server.ts - Server-side page load
  • +server.ts - API routes
  • +error.svelte - Error page

Route Organisation

 1routes/
 2├── (auth)/           # Layout group (not in URL)
 3│   ├── login/
 4│   │   └── +page.svelte
 5│   ├── sign-up/
 6│   │   └── +page.svelte
 7│   └── reset-password/
 8│       └── +page.svelte
 9├── (web)/            # Web pages layout group
10│   ├── [blog]/    	  # Dynamic route parameter
11│   │   └── +page.svelte
12│   ├── [...page]/    # Catch-all dynamic route
13│   │   └── +page.svelte
14│   └── search/
15│       └── +page.svelte
16├── (server)/         # Server routes
17│   ├── robots.txt/
18│   │   └── +server.ts
19│   └── sitemap.xml/
20│       └── +server.ts
21└── api/              # API endpoints
22    └── forms/
23        └── +server.ts
Last modified: 27/10/2025 2022-2025 ©ainsley.dev, All rights reserved.