Routing

How each meta-framework maps files and folders to application routes.

Next.js

The App Router uses folder-based conventions under app/, where page.tsx defines a route’s UI, layout.tsx wraps nested segments, and special files like loading.tsx or error.tsx hook into React Suspense boundaries. Dynamic segments use bracket syntax ([id]), and route groups let you organize folders without affecting the URL.

Nuxt

Nuxt derives routes automatically from the pages/ directory, turning .vue files into routes via vue-router under the hood. Dynamic segments use bracket syntax ([id].vue), nested routes come from nested folders with a matching parent file, and catch-alls use [...slug].vue.

SvelteKit

Routes live under src/routes, where each folder maps to a URL segment and a +page.svelte file provides that route’s markup. Special files prefixed with + (+layout.svelte, +page.server.ts) attach layouts and server logic, and dynamic segments use bracket syntax ([slug]).

SolidStart

SolidStart uses a file-based router rooted at src/routes, where file and folder names map directly to URL paths, similar in spirit to SvelteKit and Next.js. Dynamic parameters use bracket notation, and nested layouts are expressed through nested route files.

TanStack Start

TanStack Start builds on TanStack Router, generating a fully type-safe route tree from files under src/routes via a code generator that produces typed path params, search params, and loader data. Routes can also be defined programmatically for cases needing more explicit control than file conventions provide.

Remix

Remix (now React Router v7’s framework mode) maps files under app/routes to URL paths using a flat-file naming convention where dots in filenames denote nested segments. Dynamic segments are prefixed with $, and an optional routes.ts config allows fully custom route definitions.

Astro

Astro treats any .astro, .md, or framework component file under src/pages as a route, with the file path becoming the URL path directly. Dynamic routes use bracket syntax ([slug].astro) and rely on getStaticPaths to enumerate params at build time for static output.

Qwik City

Qwik City follows a file-based router under src/routes, where each folder becomes a URL segment and an index.tsx supplies that segment’s page component. Layouts are defined via layout.tsx files that automatically wrap nested routes, and dynamic segments use bracket syntax.