Your First Route

View as Markdown

Neutron maps files in src/routes to URLs.

Static route

Static mode is the default. Create src/routes/about.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:

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