sveltekit-structure

SvelteKit uses file-based routing with `+page.svelte` for pages, `+layout.svelte` for layouts, and `+server.js` for API routes. Nest these files in directories to create route hierarchies; layouts automatically wrap child pages and inherit down the routing tree.

Place `+error.svelte` files at any routing level to create error boundaries that catch and display errors for that route and its children. Error boundaries inherit down the layout tree, so root-level `+error.svelte` catches unhandled errors across your entire app.

Use route groups and nested `+layout.svelte` files to create authentication boundaries. Place `+layout.server.js` at each level to load user data and redirect unauthenticated requests, ensuring protected routes only render for authorized users.

`+page.svelte` renders UI components on the client; `+server.js` handles server-only logic like API requests and database access. Use `+server.js` for sensitive operations and `+page.svelte` to display results.

SvelteKit renders pages on the server first, sending HTML to the browser, then hydrates with JavaScript to make pages interactive. Write code that works in both environments—avoid browser-only APIs in `+layout.svelte` or `+page.svelte` during server rendering.

Yes. Wrap route directories in parentheses—`(groupName)`—to organize layouts and shared structure without changing the URL. Groups let you apply different `+layout.svelte` files to separate route sections independently.