# Your First Route

Neutron maps files in `src/routes` to URLs.

## Static route

Static mode is the default. Create `src/routes/about.tsx`:

```tsx
export default function About() {
  return (
    <main>
      <h1>About</h1>
      <p>This route is rendered to HTML at build time.</p>
    </main>
  );
}
```

The file is available at `/about`. Add
`export const config = { mode: "static" }` when you want the mode to be
explicit.

## App route

Use app mode for client-side navigation and hydration:

```tsx
import { useLoaderData } from "@neutron-build/core";

export const config = { mode: "app" };

export async function loader() {
  return { user: "Alice" };
}

export default function Dashboard() {
  const data = useLoaderData<typeof loader>();
  return <h1>Welcome, {data.user}</h1>;
}
```

The loader runs on the server. `useLoaderData<typeof loader>()` carries its
return type into the component without a separate interface.

## Next

- [Loaders](/docs/data/loaders)
- [Actions](/docs/data/actions)
- [Route conventions](/docs/routing/file-conventions)