Guides · 03

Routing & layouts.

Nimbus uses file-based routing. The shape of your src/routes folder is the shape of your URL tree.

File conventions

index.tsx renders at the segment's URL.
[param].tsx matches a dynamic segment.
_layout.tsx wraps every nested page with shared UI.

Example

text

src/routes/
├── index.tsx           → /
├── about.tsx           → /about
├── _layout.tsx         → wraps everything below
└── posts/
    ├── index.tsx       → /posts
    └── [slug].tsx      → /posts/:slug

Loading data

Export a loader from any route to fetch data before the page renders. The return value is typed and available via the useLoaderData() hook.

export const loader = async ({ params }) => {
  const post = await db.posts.find(params.slug);
  return { post };
};

Streaming

Loaders can return promises directly — Nimbus streams them to the client as soon as they resolve, without blocking the rest of the page.

← PreviousDeploy your first app Next →Integrations