diff --git a/.changeset/typesafety.md b/.changeset/typesafety.md
new file mode 100644
index 0000000000..b4e20296db
--- /dev/null
+++ b/.changeset/typesafety.md
@@ -0,0 +1,151 @@
+---
+"@react-router/dev": minor
+"react-router": minor
+---
+
+### Typesafety improvements
+
+React Router now generates types for each of your route modules.
+You can access those types by importing them from `./+types/<route filename without extension>`.
+For example:
+
+```ts
+// app/routes/product.tsx
+import type * as Route from "./+types/product";
+
+export function loader({ params }: Route.LoaderArgs) {}
+
+export default function Component({ loaderData }: Route.ComponentProps) {}
+```
+
+This initial implementation targets type inference for:
+
+- `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
+- `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
+- `ActionData` : Action data from `action` and/or `clientAction` within your route module
+
+These types are then used to create types for route export args and props:
+
+- `LoaderArgs`
+- `ClientLoaderArgs`
+- `ActionArgs`
+- `ClientActionArgs`
+- `HydrateFallbackProps`
+- `ComponentProps` (for the `default` export)
+- `ErrorBoundaryProps`
+
+In the future, we plan to add types for the rest of the route module exports: `meta`, `links`, `headers`, `shouldRevalidate`, etc.
+We also plan to generate types for typesafe `Link`s:
+
+```tsx
+<Link to="/products/:id" params={{ id: 1 }} />
+//        ^^^^^^^^^^^^^          ^^^^^^^^^
+// typesafe `to` and `params` based on the available routes in your app
+```
+
+#### Setup
+
+React Router will generate types into a `.react-router/` directory at the root of your app.
+This directory is fully managed by React Router and is derived based on your route config (`routes.ts`).
+
+👉 **Add `.react-router/` to `.gitignore`**
+
+```txt
+.react-router
+```
+
+You should also ensure that generated types for routes are always present before running typechecking,
+especially for running typechecking in CI.
+
+👉 **Add `react-router typegen` to your `typecheck` command in `package.json`**
+
+```json
+{
+  "scripts": {
+    "typecheck": "react-router typegen && tsc"
+  }
+}
+```
+
+To get TypeScript to use those generated types, you'll need to add them to `include` in `tsconfig.json`.
+And to be able to import them as if they files next to your route modules, you'll also need to configure `rootDirs`.
+
+👉 **Configure `tsconfig.json` for generated types**
+
+```json
+{
+  "include": [".react-router/types/**/*"],
+  "compilerOptions": {
+    "rootDirs": [".", "./.react-router/types"]
+  }
+}
+```
+
+#### `typegen` command
+
+You can manually generate types with the new `typegen` command:
+
+```sh
+react-router typegen
+```
+
+However, manual type generation is tedious and types can get out of sync quickly if you ever forget to run `typegen`.
+Instead, we recommend that you setup our new TypeScript plugin which will automatically generate fresh types whenever routes change.
+That way, you'll always have up-to-date types.
+
+#### TypeScript plugin
+
+To get automatic type generation, you can use our new TypeScript plugin.
+
+👉 **Add the TypeScript plugin to `tsconfig.json`**
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [{ "name": "@react-router/dev" }]
+  }
+}
+```
+
+We plan to add some other goodies to our TypeScript plugin soon, including:
+
+- Automatic `jsdoc` for route exports that include links to official docs
+- Autocomplete for route exports
+- Warnings for non-HMR compliant exports
+
+##### VSCode
+
+TypeScript looks for plugins registered in `tsconfig.json` in the local `node_modules/`,
+but VSCode ships with its own copy of TypeScript that is installed outside of your project.
+For TypeScript plugins to work, you'll need to tell VSCode to use the local workspace version of TypeScript.
+For security reasons, [VSCode won't use the workspace version of TypeScript](https://code.visualstudio.com/docs/typescript/typescript-compiling#_using-the-workspace-version-of-typescript) until you manually opt-in.
+
+Your project should have a `.vscode/settings.json` with the following settings:
+
+```json
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
+```
+
+That way [VSCode will ask you](https://code.visualstudio.com/updates/v1_45#_prompt-users-to-switch-to-the-workspace-version-of-typescript) if you want to use the workspace version of TypeScript the first time you open a TS file in that project.
+
+> [!IMPORTANT]  
+> You'll need to install dependencies first so that the workspace version of TypeScript is available.
+
+👉 **Select "Allow" when VSCode asks if you want to use the workspace version of TypeScript**
+
+Otherwise, you can also manually opt-in to the workspace version:
+
+1. Open up any TypeScript file in your project
+2. Open up the VSCode Command Palette (<kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>)
+3. Search for `Select TypeScript Version`
+4. Choose `Use Workspace Version`
+5. Quit and reopen VSCode
+
+##### Troubleshooting
+
+In VSCode, open up any TypeScript file in your project and then use <kbd>CMD</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> to select `Open TS Server log`.
+There should be a log for `[react-router] setup` that indicates that the plugin was resolved correctly.
+Then look for any errors in the log.
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000000..25fa6215fd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/contributors.yml b/contributors.yml
index 2082053191..cff1a1df41 100644
--- a/contributors.yml
+++ b/contributors.yml
@@ -15,6 +15,7 @@
 - alany411
 - alberto
 - alexandernanberg
+- alexanderson1993
 - alexlbr
 - AmRo045
 - amsal
diff --git a/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md b/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md
index 1959f16183..c86a9c818f 100644
--- a/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md
+++ b/decisions/0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md
@@ -2,7 +2,7 @@
 
 Date: 2022-07-11
 
-Status: accepted
+Status: Superseded by [#0012](./0012-type-inference.md)
 
 ## Context
 
diff --git a/decisions/0012-type-inference.md b/decisions/0012-type-inference.md
new file mode 100644
index 0000000000..17069ed710
--- /dev/null
+++ b/decisions/0012-type-inference.md
@@ -0,0 +1,275 @@
+# Type inference
+
+Date: 2024-09-20
+
+Status: accepted
+
+Supersedes [#0003](./0003-infer-types-for-useloaderdata-and-useactiondata-from-loader-and-action-via-generics.md)
+
+## Context
+
+Now that Remix is being merged upstream into React Router, we have an opportunity to revisit our approach to typesafety.
+
+### Type inference
+
+There are three major aspects to typesafety in a framework like React Router:
+
+1. **Type inference from the route config**
+
+   Some types are defined in the route config (`routes.ts`) but need to be inferred within a route module.
+
+   For example, let's look at URL path parameters.
+   Remix had no mechanism for inferring path parameters as that information is not present _within_ a route module.
+   If a route's URL path was `/products/:id`, you'd have to manually specify `"id"` as a valid path parameter within that route module:
+
+   ```ts
+   const params = useParams<"id">();
+   params.id;
+   ```
+
+   This generic was nothing more than a convenient way to do a type cast.
+   You could completely alter the URL path for a route module, typechecking would pass, but then you would get runtime errors.
+
+2. **Type inference within a route**
+
+   Some types are defined within a route module but need to be inferred across route exports.
+
+   For example, loader data is defined by the return type of `loader` but needs to be accessed within the `default` component export:
+
+   ```ts
+   export function loader() {
+     // define here 👇
+     return { planet: "world" };
+   }
+
+   export default function Component() {
+     // access here 👇
+     const data = useLoaderData<typeof loader>();
+   }
+   ```
+
+   Unlike the `useParams` generic, this isn't just a type cast.
+   The `useLoaderData` generic ensures that types account for serialization across the network.
+   However, it still requires you to add `typeof loader` every time.
+
+   Not only that, but complex routes get very tricky to type correctly.
+   For example, `clientLoader`s don't run during the initial SSR render, but you can force the `clientLoader` data to always be present in your route component if you set `clientLoader.hydrate = true` _and_ provide a `HydrateFallback`.
+   Here are a couple cases that trip up most users:
+
+   | `loader` | `clientLoader` | `clientLoader.hydrate` | `HydrateFallback` | Generic for `useLoaderData`            |
+   | -------- | -------------- | ---------------------- | ----------------- | -------------------------------------- |
+   | ✅       | ❌             | `false`                | ❌                | `typeof loader`                        |
+   | ❌       | ✅             | `false`                | ❌                | `typeof clientLoader \| undefined`     |
+   | ✅       | ✅             | `false`                | ❌                | `typeof loader \| typeof clientLoader` |
+   | ✅       | ✅             | `true`                 | ❌                | `typeof loader \| typeof clientLoader` |
+   | ✅       | ✅             | `true`                 | ✅                | `typeof clientLoader`                  |
+
+   The generic for `useLoaderData` starts to feel a lot like doing your taxes: there's only one right answer, Remix knows what it is, but you're going to get quizzed on it anyway.
+
+3. **Type inference across routes**
+
+   Some types are defined in one route module but need to be inferred in another route module.
+   This is common when wanting to access loader data of matched routes like when using `useMatches` or `useRouteLoaderData`.
+
+   ```ts
+   import type { loader as otherLoader } from "../other-route.ts";
+   // hope the other route is also matched 👇 otherwise this will error at runtime
+   const otherData = useRouteLoaderData<typeof otherLoader>();
+   ```
+
+   Again, its up to you to wire up the generics with correct types.
+   In this case you need to know both types defined in the route config (to know which routes are matched) and types defined in other route modules (to know the loader data for those routes).
+
+In practice, Remix's generics work fine most of the time.
+But they are mostly boilerplate and can become error-prone as the app scales.
+An ideal solution would infer types correctly on your behalf, doing away with tedious generics.
+
+## Goals
+
+- Type inference from the route config (`routes.ts`)
+- Type inference within a route
+- Type inference across routes
+- Same code path for type inference whether using programmatic routing or file-based routing
+- Compatibility with standard tooling for treeshaking, HMR, etc.
+- Minimal impact on runtime API design
+
+## Decisions
+
+### Route exports API
+
+Keep the route module export API as is.
+Route modules should continue to export separate values for `loader`, `clientLoader`, `action`, `ErrorBoundary`, `default` component, etc.
+That way standard transforms like treeshaking and React Fast Refresh (HMR) work out-of-the-box.
+
+Additionally, this approach introduces no breaking changes allowing Remix users to upgrade to React Router v7 more easily.
+
+### Pass path params, loader data, and action data as props
+
+Hooks like `useParams`, `useLoaderData`, and `useActionData` are defined once in `react-router` and are meant to be used in _any_ route.
+Without any coupling to a specific route, inferring route-specific types becomes impossible and would necessitate user-supplied generics.
+
+Instead, each route export should be provided route-specific args:
+
+```ts
+// Imagine that we *somehow* had route-specific types for:
+// - LoaderArgs
+// - ClientLoaderArgs
+// - DefaultProps
+
+export function loader({ params }: LoaderArgs) {}
+
+export function clientLoader({ params, serverLoader }: ClientLoaderArgs) {}
+
+export default function Component({
+  params,
+  loaderData,
+  actionData,
+}: DefaultProps) {
+  // ...
+}
+```
+
+We'll keep those hooks around for backwards compatibility, but eventually the aim is to deprecate and remove them.
+We can design new, typesafe alternatives for any edge cases.
+
+### Typegen
+
+While React Router will default to programmatic routing, it can easily be configured for file-based routing.
+That means that sometimes route URLs will only be represented as file paths.
+Unfortunately, TypeScript cannot use the filesystem as part of its type inference nor type checking.
+The only tenable way to infer types based on file paths is through code generation.
+
+We _could_ have typegen just for file-based routing, but then we'd need to maintain a separate code path for type inference in programmatic routing.
+To keep things simple, React Router treats any value returned by `routes.ts` the same; it will not make assumptions about _how_ those routes were constructed and will run typegen in all cases.
+
+To that end, React Router will generate types for each route module into a special, gitignored `.react-router` directory.
+For example:
+
+```txt
+- .react-router/
+  - types/
+    - app/
+      - routes/
+        - +types.product.ts
+- app/
+  - routes/
+    - product.tsx
+```
+
+The path within `.react-router/types` purposefully mirrors the path to the corresponding route module.
+By setting things up like this, we can use `tsconfig.json`'s [rootDirs](https://www.typescriptlang.org/tsconfig/#rootDirs) option to let you conveniently import from the typegen file as if it was a sibling:
+
+```ts
+// app/routes/product.tsx
+import { LoaderArgs, DefaultProps } from "./+types.product";
+```
+
+TypeScript will even give you import autocompletion for the typegen file and the `+` prefix helps to distinguish it as a special file.
+Big thanks to Svelte Kit for showing us that [`rootDirs` trick](https://svelte.dev/blog/zero-config-type-safety#virtual-files)!
+
+### TypeScript plugin
+
+Typegen solutions often receive criticism due to typegen'd files becoming out of sync during development.
+This happens because many typegen solutions require you to then rerun a script to update the typegen'd files.
+
+Instead, our typegen will automatically run within a TypeScript plugin.
+That means you should never need to manually run a typegen command during development.
+It also means that you don't need to run our dev server for typegen to take effect.
+The only requirement is that your editor is open.
+
+Additionally, TypeScript plugins work with any LSP-compatible editor.
+That means that this single plugin will work in VS Code, Neovim, or any other popular editor.
+
+Even more exciting is that a TS plugin sets the stage for tons of other DX goodies:
+
+- jsdoc and links to official documentation when you hover a route export
+- Snippet-like autocomplete for route exports
+- In-editor warnings when you forget to name your React components, which would cause HMR to fail
+- ...and more...
+
+## Rejected solutions
+
+### `defineRoute`
+
+Early on, we considered changing the route module API from many exports to a single `defineRoute` export:
+
+```tsx
+export default defineRoute({
+  loader() {
+    return { planet: "world" };
+  },
+  Component({ loaderData }) {
+    return <h1>Hello, {loaderData.planet}!</h1>;
+  },
+});
+```
+
+That way `defineRoute` could do some TypeScript magic to infer `loaderData` based on `loader` (type inference within a route).
+With some more work, we envisioned that `defineRoute` could return utilities like a typesafe `useRouteLoaderData` (type inference across routes).
+
+However, there were still many drawbacks with this design:
+
+1. Type inference across function arguments depends on the ordering of those arguments.
+   That means that if you put `Component` before `loader` type inference is busted and you'll get gnarly type errors.
+
+2. Any mechanism expressible solely as code in a route module cannot infer types from the route config (`routes.ts`).
+   That means no type inference for things like path params nor for `<Link to="..." />`.
+
+3. Transforms that expect to operate on module exports can no longer access parts of the route.
+   For example, bundlers would only see one big export so they would bail out of treeshaking route modules.
+   Similarly, React-based HMR via React Fast Refresh looks for React components as exports of a module.
+   It would be possible to augment React component detection for HMR to look within a function call like `defineRoute`, but it significantly ups the complexity.
+
+### `defineLoader` and friends
+
+Instead of a single `defineRoute` function as described above, we could have a `define*` function for each route export:
+
+```tsx
+import { defineLoader } from "./+types.product";
+
+export const loader = defineLoader(() => {
+  return { planet: "world" };
+});
+```
+
+That would address the most of the drawbacks of the `defineRoute` approach.
+However, this adds significant noise to the code.
+It also means we're introducing a runtime API that only exists for typesafety.
+
+Additionally, utilities like `defineLoader` are implemented with an `extends` generic that [does not pin point incorrect return statements](https://tsplay.dev/WJP7ZN):
+
+```ts
+const defineLoader = <T extends Loader>(loader: T): T => loader;
+
+export const loader = defineLoader(() => {
+  //                               ^^^^^^^
+  // Argument of type '() => "string" | 1' is not assignable to parameter of type 'Loader'.
+  //   Type 'string | number' is not assignable to type 'number'.
+  //     Type 'string' is not assignable to type 'number'.(2345)
+
+  if (Math.random() > 0.5) return "string"; // 👈 don't you wish the error was here instead?
+  return 1;
+});
+```
+
+### Zero-effort typesafety
+
+Svelte Kit has a ["zero-effort" type safety approach](https://svelte.dev/blog/zero-config-type-safety) that uses a TypeScript language service plugin to automatically inject types for framework-specific exports.
+Initially, this seemed like a good fit for React Router too, but we ran into a couple drawbacks:
+
+1. Tools like `typescript-eslint` that need to statically inspect the types of your TS files without running a language server would not be aware of the injected types.
+   There's an open issue for [`typescript-eslint` interop with Svelte Kit](https://github.com/sveltejs/language-tools/issues/2073)
+
+2. Running `tsc` would perform typechecking without any knowledge of our custom language service.
+   To fix this, we would need to wrap `tsc` in our own CLI that programmatically calls the TS typechecker.
+   For Svelte Kit, this isn't as big of an issue since they already need their own typecheck command for the Svelte language: `svelte-check`.
+   But since React Router is pure TypeScript, it would be more natural to invoke `tsc` directly in your `package.json` scripts.
+
+## Summary
+
+By leaning into automated typegen within a TypeScript plugin, we radically simplify React Router's runtime APIs while providing strong type inference across the entire framework.
+We can continue to support programmatic routing _and_ file-based routing in `routes.ts` while providing typesafety with the same approach and same code path.
+We can design our runtime APIs without introducing bespoke ways to inform TypeScript of the route hierarchy.
+
+The initial implementation will be focused on typesafety for path params, loader data, and action data.
+That said, this foundation lets us add type inference for things like `<Link to="..." />` and search params in the future.
diff --git a/docs/deploying/cloudflare-spa.md b/docs/deploying/cloudflare-spa.md
index bd4a5d0858..4ebdbb00a1 100644
--- a/docs/deploying/cloudflare-spa.md
+++ b/docs/deploying/cloudflare-spa.md
@@ -1,3 +1,9 @@
 ---
 title: Cloudflare SPA
 ---
+
+# Deploying to Cloudflare with SPA
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/cloudflare.md b/docs/deploying/cloudflare.md
index 0c9647029e..b65995059d 100644
--- a/docs/deploying/cloudflare.md
+++ b/docs/deploying/cloudflare.md
@@ -1,3 +1,9 @@
 ---
 title: Cloudflare
 ---
+
+# Deploying to Cloudflare with SPA
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/custom-node.md b/docs/deploying/custom-node.md
index 3491593f3f..d3021a698b 100644
--- a/docs/deploying/custom-node.md
+++ b/docs/deploying/custom-node.md
@@ -1,3 +1,9 @@
 ---
 title: Custom Node.js
 ---
+
+# Deploying to a Custom Node.js Runtime
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/custom-spa.md b/docs/deploying/custom-spa.md
index 61d3c8b41e..a61ea93b02 100644
--- a/docs/deploying/custom-spa.md
+++ b/docs/deploying/custom-spa.md
@@ -1,3 +1,9 @@
 ---
 title: Custom SPA
 ---
+
+# Deploying to a Custom SPA
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/custom-wintercg.md b/docs/deploying/custom-wintercg.md
index 2a2645ad33..64bea3c003 100644
--- a/docs/deploying/custom-wintercg.md
+++ b/docs/deploying/custom-wintercg.md
@@ -1,3 +1,9 @@
 ---
 title: Custom WinterCG
 ---
+
+# Deploying to a Custom WinterCG
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/netlify.md b/docs/deploying/netlify.md
index 0683e9a393..e42f70ec01 100644
--- a/docs/deploying/netlify.md
+++ b/docs/deploying/netlify.md
@@ -1,3 +1,9 @@
 ---
 title: Netlify
 ---
+
+# Deploying to Netlify
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/vercel-spa.md b/docs/deploying/vercel-spa.md
index cb735a4014..b27959d881 100644
--- a/docs/deploying/vercel-spa.md
+++ b/docs/deploying/vercel-spa.md
@@ -1,3 +1,9 @@
 ---
 title: Vercel SPA
 ---
+
+# Deploying to Vercel SPA
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/deploying/vercel.md b/docs/deploying/vercel.md
index 44418fb5b6..5580a6b41b 100644
--- a/docs/deploying/vercel.md
+++ b/docs/deploying/vercel.md
@@ -1,3 +1,9 @@
 ---
 title: Vercel
 ---
+
+# Deploying to Vercel
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/discussion/code-splitting.md b/docs/discussion/code-splitting.md
index 1fb68f766f..d88568985b 100644
--- a/docs/discussion/code-splitting.md
+++ b/docs/discussion/code-splitting.md
@@ -2,3 +2,9 @@
 title: Automatic Code Splitting
 new: true
 ---
+
+# Automatic Code Splitting
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/discussion/race-conditions.md b/docs/discussion/race-conditions.md
index 4b536f25ca..ff258279e9 100644
--- a/docs/discussion/race-conditions.md
+++ b/docs/discussion/race-conditions.md
@@ -2,3 +2,9 @@
 title: Race Conditions
 new: true
 ---
+
+# Race Conditions
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/discussion/route-matching.md b/docs/discussion/route-matching.md
index 982a5af492..ede7f00732 100644
--- a/docs/discussion/route-matching.md
+++ b/docs/discussion/route-matching.md
@@ -2,3 +2,9 @@
 title: Route Matching
 new: true
 ---
+
+# Route Matching
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/discussion/route-module-limitations.md b/docs/discussion/route-module-limitations.md
index 366a46bdf9..ed3cd0a287 100644
--- a/docs/discussion/route-module-limitations.md
+++ b/docs/discussion/route-module-limitations.md
@@ -4,3 +4,7 @@ new: true
 ---
 
 # Route Module Limitations
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/misc/form-validation.md b/docs/misc/form-validation.md
index f1bf81160d..6f5d015e94 100644
--- a/docs/misc/form-validation.md
+++ b/docs/misc/form-validation.md
@@ -2,3 +2,9 @@
 title: Form Validation
 new: true
 ---
+
+# Form Validation
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/misc/manual-deployment.md b/docs/misc/manual-deployment.md
index 3e65bff910..b218dbd8d1 100644
--- a/docs/misc/manual-deployment.md
+++ b/docs/misc/manual-deployment.md
@@ -4,6 +4,10 @@ title: Manual Deployment
 
 # Manual Deployment
 
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
+
 - static files
 - running the server
 - polyfilling globals
diff --git a/docs/misc/react-server-components.md b/docs/misc/react-server-components.md
index bbbc081604..23d42aa911 100644
--- a/docs/misc/react-server-components.md
+++ b/docs/misc/react-server-components.md
@@ -5,4 +5,6 @@ new: true
 
 # React Server Components
 
-They work!
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/misc/server-rendering.md b/docs/misc/server-rendering.md
index 6c50da8f5a..037a642a57 100644
--- a/docs/misc/server-rendering.md
+++ b/docs/misc/server-rendering.md
@@ -4,3 +4,7 @@ new: true
 ---
 
 # Server Rendering
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/misc/streaming.md b/docs/misc/streaming.md
index 5566b24c4a..c3dc663bbb 100644
--- a/docs/misc/streaming.md
+++ b/docs/misc/streaming.md
@@ -2,3 +2,9 @@
 title: Streaming
 new: true
 ---
+
+# Streaming
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/misc/view-transitions.md b/docs/misc/view-transitions.md
index e84f45ee8c..e1b9683c82 100644
--- a/docs/misc/view-transitions.md
+++ b/docs/misc/view-transitions.md
@@ -2,3 +2,9 @@
 title: View Transitions
 new: true
 ---
+
+# View Transitions
+
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/start/actions.md b/docs/start/actions.md
index d1b22d5e03..c67f40a37f 100644
--- a/docs/start/actions.md
+++ b/docs/start/actions.md
@@ -5,6 +5,10 @@ order: 6
 
 # Actions
 
+<docs-warning>
+  The types for route modules are still in development, this API may change.
+</docs-warning>
+
 Data mutations are done through Route actions. When the action completes, all loader data on the page is revalidated to keep your UI in sync with the data without writing any code to do it.
 
 Route actions defined with `action` are only called on the server while actions defined with `clientAction` are run in the browser.
@@ -15,31 +19,37 @@ Client actions only run in the browser and take priority over a server action wh
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import { defineRoute$, Form } from "react-router";
-
-export default defineRoute$({
-  clientAction({ request }) {
-    let formData = await request.formData();
-    let title = await formData.get("title");
-    let project = await someApi.updateProject({ title });
-    return project;
-  },
-
-  Component({ data, actionData }) {
-    return (
-      <div>
-        <h1>Project</h1>
-        <Form method="post">
-          <input type="text" name="title" />
-          <button type="submit">Submit</button>
-        </Form>
-        {actionData ? (
-          <p>{actionData.title} updated</p>
-        ) : null}
-      </div>
-    );
-  },
-});
+import type {
+  DefaultProps,
+  ClientActionArgs,
+} from "./+types.project";
+import { Form } from "react-router";
+
+export async function clientAction({
+  request,
+}: ClientActionArgs) {
+  let formData = await request.formData();
+  let title = await formData.get("title");
+  let project = await someApi.updateProject({ title });
+  return project;
+}
+
+export default function Project({
+  clientActionData,
+}: DefaultProps) {
+  return (
+    <div>
+      <h1>Project</h1>
+      <Form method="post">
+        <input type="text" name="title" />
+        <button type="submit">Submit</button>
+      </Form>
+      {clientActionData ? (
+        <p>{clientActionData.title} updated</p>
+      ) : null}
+    </div>
+  );
+}
 ```
 
 ## Server Actions
@@ -48,31 +58,35 @@ Server actions only run on the server and are removed from client bundles.
 
 ```tsx filename=app/project.tsx
 // route('/projects/:projectId', './project.tsx')
-import { defineRoute$, Form } from "react-router";
-
-export default defineRoute$({
-  action({ request }) {
-    let formData = await request.formData();
-    let title = await formData.get("title");
-    let project = await someApi.updateProject({ title });
-    return project;
-  },
-
-  Component({ data, actionData }) {
-    return (
-      <div>
-        <h1>Project</h1>
-        <Form method="post">
-          <input type="text" name="title" />
-          <button type="submit">Submit</button>
-        </Form>
-        {actionData ? (
-          <p>{actionData.title} updated</p>
-        ) : null}
-      </div>
-    );
-  },
-});
+import type {
+  DefaultProps,
+  ActionArgs,
+} from "./+types.project";
+import { Form } from "react-router";
+
+export async function action({ request }: ActionArgs) {
+  let formData = await request.formData();
+  let title = await formData.get("title");
+  let project = await someApi.updateProject({ title });
+  return project;
+}
+
+export default function Project({
+  actionData,
+}: DefaultProps) {
+  return (
+    <div>
+      <h1>Project</h1>
+      <Form method="post">
+        <input type="text" name="title" />
+        <button type="submit">Submit</button>
+      </Form>
+      {actionData ? (
+        <p>{actionData.title} updated</p>
+      ) : null}
+    </div>
+  );
+}
 ```
 
 ## Calling Actions
@@ -153,4 +167,4 @@ fetcher.submit(
 );
 ```
 
-See the [Using Fetchers](../guides/fetchers) guide for more information.
+See the [Using Fetchers](../misc/fetchers) guide for more information.
diff --git a/docs/start/data-loading.md b/docs/start/data-loading.md
index 69c8f6bf16..11479af1b0 100644
--- a/docs/start/data-loading.md
+++ b/docs/start/data-loading.md
@@ -5,6 +5,10 @@ order: 5
 
 # Data Loading
 
+<docs-warning>
+  The types for route modules are still in development, this API may change.
+</docs-warning>
+
 Data is provided to the route via `loader` and `clientLoader`, and accessed in the `data` prop of the Route Component.
 
 ## Client Data Loading
@@ -13,26 +17,31 @@ Data is provided to the route via `loader` and `clientLoader`, and accessed in t
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import { defineRoute$ } from "react-router";
-
-export default defineRoute$({
-  params: ["pid"],
-
-  async clientLoader({ params }) {
-    const res = await fetch(`/api/products/${params.pid}`);
-    const product = await res.json();
-    return { product };
-  },
-
-  component: function Product({ data }) {
-    return (
-      <div>
-        <h1>{data.product.name}</h1>
-        <p>{data.product.description}</p>
-      </div>
-    );
-  },
-});
+import type {
+  DefaultProps,
+  ClientLoaderArgs,
+} from "./+types.product";
+import { useLoaderData } from "react-router";
+
+export async function clientLoader({
+  params,
+}: ClientLoaderArgs) {
+  const res = await fetch(`/api/products/${params.pid}`);
+  const product = await res.json();
+  return { product };
+}
+
+export default function Product({
+  clientLoaderData,
+}: DefaultProps) {
+  const { name, description } = clientLoaderData.product;
+  return (
+    <div>
+      <h1>{name}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
 ```
 
 ## Server Data Loading
@@ -41,59 +50,64 @@ When server rendering, the `loader` method is used to fetch data on the server f
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import { defineRoute$ } from "react-router";
+import type {
+  DefaultProps,
+  LoaderArgs,
+} from "./+types.product";
 import { fakeDb } from "../db";
 
-export default defineRoute$({
-  params: ["pid"],
-
-  async loader({ params }) {
-    const product = await fakeDb.getProduct(params.pid);
-    return { product };
-  },
-
-  Component({ data }) {
-    return (
-      <div>
-        <h1>{data.product.name}</h1>
-        <p>{data.product.description}</p>
-      </div>
-    );
-  },
-});
+export async function loader({ params }: LoaderArgs) {
+  const product = await fakeDb.getProduct(params.pid);
+  return { product };
+}
+
+export default function Product({
+  loaderData,
+}: DefaultProps) {
+  const { name, description } = loaderData.product;
+  return (
+    <div>
+      <h1>{name}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
 ```
 
 Note that the `loader` function is removed from client bundles so you can use server only APIs without worrying about them being included in the browser.
 
 ## React Server Components
 
+<docs-warning>RSC is not supported yet</docs-warning>
+
 RSC is supported by returning components from loaders and actions.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import { defineRoute$ } from "react-router";
+import type {
+  DefaultProps,
+  LoaderArgs,
+} from "./+types.product";
 import Product from "./product";
 import Reviews from "./reviews";
 
-export default defineRoute$({
-  params: ["pid"],
-
-  async loader({ params }) {
-    return {
-      product: <Product id={params.pid} />,
-      reviews: <Reviews productId={params.pid} />,
-    };
-  },
-
-  Component({ data }) {
-    return (
-      <div>
-        {data.product}
-        {data.reviews}
-      </div>
-    );
-  },
-});
+export async function loader({ params }: LoaderArgs) {
+  return {
+    product: <Product id={params.pid} />,
+    reviews: <Reviews productId={params.pid} />,
+  };
+}
+
+export default function ProductPage({
+  loaderData,
+}: DefaultProps) {
+  return (
+    <div>
+      {loaderData.product}
+      {loaderData.reviews}
+    </div>
+  );
+}
 ```
 
 ## Static Data Loading
@@ -102,36 +116,38 @@ When pre-rendering, the `loader` method is used to fetch data at build time.
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import { defineRoute$ } from "react-router";
-
-export default defineRoute$({
-  params: ["pid"],
-
-  async loader({ params }) {
-    let product = await getProductFromCSVFile(params.pid);
-    return { product };
-  },
-
-  Component({ data }) {
-    return (
-      <div>
-        <h1>{data.product.name}</h1>
-        <p>{data.product.description}</p>
-      </div>
-    );
-  },
-});
+import type {
+  DefaultProps,
+  LoaderArgs,
+} from "./+types.product";
+
+export async function loader({ params }: LoaderArgs) {
+  let product = await getProductFromCSVFile(params.pid);
+  return { product };
+}
+
+export default function Product({
+  loaderData,
+}: DefaultProps) {
+  const { name, description } = loaderData.product;
+  return (
+    <div>
+      <h1>{name}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
 ```
 
 The URLs to pre-render are specified in the Vite plugin.
 
 ```ts filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [
-    app({
+    reactRouter({
       async prerender() {
         let products = await readProductsFromCSVFile();
         return products.map(
@@ -151,31 +167,38 @@ Note that when server rendering, any URLs that aren't pre-rendered will be serve
 
 ```tsx filename=app/product.tsx
 // route("products/:pid", "./product.tsx");
-import { defineRoute$ } from "react-router";
+import type {
+  DefaultProps,
+  ClientLoader,
+  LoaderArgs,
+} from "./+types.product";
 import { fakeDb } from "../db";
 
-export default defineRoute$({
-  // SSR loads directly from the database
-  async loader({ params }) {
-    return fakeDb.getProduct(params.pid);
-  },
-
-  // client navigations fetch directly from the browser,
-  // skipping the react router server
-  async clientLoader({ params }) {
-    const res = await fetch(`/api/products/${params.pid}`);
-    return res.json();
-  },
-
-  Component({ data }) {
-    return (
-      <div>
-        <h1>{data.name}</h1>
-        <p>{data.description}</p>
-      </div>
-    );
-  },
-});
+export async function loader({ params }: LoaderArgs) {
+  return fakeDb.getProduct(params.pid);
+}
+
+export async function clientLoader({
+  params,
+}: ClientLoader) {
+  const res = await fetch(`/api/products/${params.pid}`);
+  return res.json();
+}
+
+export default function Product({
+  loaderData,
+  clientLoaderData,
+}: DefaultProps) {
+  const { name, description } =
+    clientLoaderData.product || loaderData.product;
+
+  return (
+    <div>
+      <h1>{name}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
 ```
 
 For more advanced use cases with `clientLoader` like caching, refer to [Advanced Data Fetching][advanced_data_fetching].
diff --git a/docs/start/deploying.md b/docs/start/deploying.md
index aa4b542481..daf89b8be8 100644
--- a/docs/start/deploying.md
+++ b/docs/start/deploying.md
@@ -6,6 +6,10 @@ new: true
 
 # Deploying
 
+<docs-warning>
+  This document is a work in progress, and will be moved to to the deployment guides.
+</docs-warning>
+
 React Router can be deployed two ways:
 
 - Fullstack Hosting
@@ -100,7 +104,7 @@ This template includes:
 
 ### Manual Fullstack Deployment
 
-If you want to deploy to your own server or a different hosting provider, see the [Manual Deployment](../guides/manual-deployment.md) guide.
+If you want to deploy to your own server or a different hosting provider, see the [Manual Deployment](../misc/manual-deployment) guide.
 
 ## Static Hosting
 
diff --git a/docs/start/installation.md b/docs/start/installation.md
index 9264076e5f..8cc424879d 100644
--- a/docs/start/installation.md
+++ b/docs/start/installation.md
@@ -10,7 +10,7 @@ order: 1
 Most projects start with a template. Let's use a basic template maintained by React Router with `degit`:
 
 ```shellscript nonumber
-npx degit @remix-run/templates/basic my-app
+npx degit remix-run/react-router/templates/basic#dev my-app
 ```
 
 Now change into the new directory and start the app
@@ -33,8 +33,8 @@ First create a new directory and install dependencies:
 mkdir my-new-app
 cd my-new-app
 npm init -y
-npm install react react-dom react-router
-npm install -D vite @react-router/dev
+npm install react react-dom react-router@pre @react-router/node@pre @react-router/serve@pre
+npm install -D vite @react-router/dev@pre
 ```
 
 Now create the following files:
@@ -97,14 +97,25 @@ export const routes: RouteConfig = [index("./home.tsx")];
 ```
 
 ```tsx filename=vite.config.ts
-import react from "@react-router/dev/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [reactRouter()],
 });
 ```
 
+```json filename=package.json
+{
+  "type": "module",
+  "scripts": {
+    "dev": "react-router dev",
+    "build": "react-router build",
+    "start": "react-router-serve ./build/server/index.js"
+  }
+}
+```
+
 And finally run the app:
 
 ```shellscript nonumber
@@ -117,4 +128,4 @@ React Router's full feature-set is easiest to use with the React Router Vite plu
 
 Refer to [Manual Usage][manual_usage] for more information.
 
-[manual_usage]: ../guides/manual-usage
+[manual_usage]: ../misc/manual-usage
diff --git a/docs/start/rendering.md b/docs/start/rendering.md
index 91353b5efb..ab251b0d0f 100644
--- a/docs/start/rendering.md
+++ b/docs/start/rendering.md
@@ -16,11 +16,12 @@ All routes are always client side rendered as the user navigates around the app.
 ## Server Side Rendering
 
 ```ts filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
+
 export default defineConfig({
   plugins: [
-    app({
+    reactRouter({
       // defaults to false
       ssr: true,
     }),
@@ -33,11 +34,12 @@ Server side rendering requires a deployment that supports it. Though it's a glob
 ## Static Pre-rendering
 
 ```ts filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
+
 export default defineConfig({
   plugins: [
-    app({
+    reactRouter({
       // return a list of URLs to prerender at build time
       async prerender() {
         return ["/", "/about", "/contact"];
@@ -51,24 +53,24 @@ Pre-rendering is a build-time operation that generates static HTML and client na
 
 ## React Server Components
 
+<docs-warning>RSC is not supported yet, this is a future API that we plan to support</docs-warning>
+
 You can return elements from loaders and actions to keep them out of browser bundles.
 
 ```tsx
-export default defineRoute$({
-  async loader() {
-    return {
-      products: <Products />,
-      reviews: <Reviews />,
-    };
-  },
-
-  Component({ data }) {
-    return (
-      <div>
-        {data.products}
-        {data.reviews}
-      </div>
-    );
-  },
-});
+export async function loader() {
+  return {
+    products: <Products />,
+    reviews: <Reviews />,
+  };
+}
+
+export default function App({ data }) {
+  return (
+    <div>
+      {data.products}
+      {data.reviews}
+    </div>
+  );
+}
 ```
diff --git a/docs/start/route-module.md b/docs/start/route-module.md
index 064f14eaaf..bfed78d77a 100644
--- a/docs/start/route-module.md
+++ b/docs/start/route-module.md
@@ -5,6 +5,10 @@ order: 3
 
 # Route Module
 
+<docs-warning>
+  The types for route modules are still in development, this API is stale and needs to be updated.
+</docs-warning>
+
 The files referenced in `routes.ts` are the entry points for all of your routes:
 
 ```tsx filename=app/routes.ts
diff --git a/docs/start/routing.md b/docs/start/routing.md
index deff697fa5..f27ceba1c1 100644
--- a/docs/start/routing.md
+++ b/docs/start/routing.md
@@ -106,19 +106,17 @@ export const routes: RouteConfig = [
 ```
 
 ```tsx filename=app/dashboard.tsx
-import { defineRoute$, Outlet } from "react-router";
-
-export default defineRoute$({
-  component: function Dashboard() {
-    return (
-      <div>
-        <h1>Dashboard</h1>
-        {/* will either be home.tsx or settings.tsx */}
-        <Outlet />
-      </div>
-    );
-  },
-});
+import { Outlet } from "react-router";
+
+export default function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      {/* will either be home.tsx or settings.tsx */}
+      <Outlet />
+    </div>
+  );
+}
 ```
 
 ## Layout Routes
@@ -185,25 +183,25 @@ route("teams/:teamId", "./team.tsx");
 ```
 
 ```tsx filename=app/team.tsx
-import { defineRoute$ } from "react-router";
-
-export default defineRoute$({
-  // ensures this route is configured correctly in routes.ts
-  // and provides type hints for the rest of this route
-  params: ["teamId"],
-
-  async loader({ params }) {
-    // params.teamId will be available
-  },
+import type {
+  LoaderArgs,
+  ActionArgs,
+  DefaultProps,
+} from "./+types.team";
+
+async function loader({ params }: LoaderArgs) {
+  //                    ^? { teamId: string }
+}
 
-  async action({ params }) {
-    // params.teamId will be available
-  },
+async function action({ params }: ActionArgs) {
+  //                    ^? { teamId: string }
+}
 
-  Component({ params }) {
-    console.log(params.teamId); // "hotspur"
-  },
-});
+export default function Component({
+  params,
+}: DefaultProps) {
+  console.log(params.teamId); // "hotspur"
+}
 ```
 
 You can have multiple dynamic segments in one route path:
@@ -213,13 +211,11 @@ route("c/:categoryId/p/:productId", "./product.tsx");
 ```
 
 ```tsx filename=app/product.tsx
-export default defineRoute$({
-  params: ["categoryId", "productId"],
+import type { LoaderArgs } from "./+types.product";
 
-  async loader({ params }) {
-    // params.categoryId and params.productId will be available
-  },
-});
+async function loader({ params }: LoaderArgs) {
+  //                    ^? { categoryId: string; productId: string }
+}
 ```
 
 ## Optional Segments
@@ -279,6 +275,5 @@ function Wizard() {
 
 Note that these routes do not participate in data loading, actions, code splitting, or any other route module features, so their use cases are more limited than those of the route module.
 
-[file-route-conventions]: ../guides/file-route-conventions
-[outlet]: ../components/outlet
-[code_splitting]: ../discussion/code-splitting
+[file-route-conventions]: ../misc/file-route-conventions
+[outlet]: ../../api/react-router/Outlet
diff --git a/docs/tutorials/advanced-data-fetching.md b/docs/tutorials/advanced-data-fetching.md
index 9620b8df5e..5240b193d9 100644
--- a/docs/tutorials/advanced-data-fetching.md
+++ b/docs/tutorials/advanced-data-fetching.md
@@ -5,4 +5,6 @@ new: true
 
 # Advanced Data Fetching
 
-TODO!
+<docs-warning>
+  This document is a work in progress. There's not much to see here (yet).
+</docs-warning>
diff --git a/docs/upgrading/future.md b/docs/upgrading/future.md
deleted file mode 100644
index dcfbfea06c..0000000000
--- a/docs/upgrading/future.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Current Future Flags
-order: 1
-new: true
----
-
-# Future Flags
-
-The following future flags are stable and ready to adopt. To read more about future flags see [Development Strategy](../guides/api-development-strategy)
-
-## Update to latest v6.x
-
-First update to the latest minor version of v6.x to have the latest future flags.
-
-👉 **Update to latest v6**
-
-```shellscript nonumber
-npm install react-router-dom@6
-```
-
-## v7_relativeSplatPath
-
-**Background**
-
-Changes the relative path matching and linking for multi-segment splats paths like `dashboard/*` (vs. just `*`). [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md#minor-changes-2) for more information.
-
-👉 **Enable the flag**
-
-Enabling the flag depends on the type of router:
-
-```tsx
-<BrowserRouter
-  future={{
-    v7_relativeSplatPath: true,
-  }}
-/>
-```
-
-```tsx
-createBrowserRouter(routes, {
-  future: {
-    v7_relativeSplatPath: true,
-  },
-});
-```
-
-**Update your Code**
-
-If you have any routes with a path + a splat like `<Route path="dashboard/*">` and has relative links like `<Link to="relative">` or `<Link to="../relative">` beneath it, you will need to update your code.
-
-👉 **Split the `<Route>` into two**
-
-Split any multi-segment splat `<Route>` into a parent route with the path and a child route with the splat:
-
-```diff
-<Routes>
-  <Route path="/" element={<Home />} />
--  <Route path="dashboard/*" element={<Dashboard />} />
-+  <Route path="dashboard">
-+    <Route path="*" element={<Dashboard />} />
-+  </Route>
-</Routes>
-
-// or
-createBrowserRouter([
-  { path: "/", element: <Home /> },
-  {
--    path: "dashboard/*",
--    element: <Dashboard />,
-+    path: "dashboard",
-+    children: [{ path: "*", element: <Dashboard /> }],
-  },
-]);
-```
-
-👉 **Update relative links**
-
-Update any `<Link>` elements within that route tree to include the extra `..` relative segment to continue linking to the same place:
-
-```diff
-function Dashboard() {
-  return (
-    <div>
-      <h2>Dashboard</h2>
-      <nav>
--        <Link to="/">Dashboard Home</Link>
--        <Link to="team">Team</Link>
--        <Link to="projects">Projects</Link>
-+        <Link to="../">Dashboard Home</Link>
-+        <Link to="../team">Team</Link>
-+        <Link to="../projects">Projects</Link>
-      </nav>
-
-      <Routes>
-        <Route path="/" element={<DashboardHome />} />
-        <Route path="team" element={<DashboardTeam />} />
-        <Route
-          path="projects"
-          element={<DashboardProjects />}
-        />
-      </Routes>
-    </div>
-  );
-}
-```
-
-## v7_startTransition
-
-**Background**
-
-This uses `React.useTransition` instead of `React.useState` for Router state updates. View the [CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#v7_starttransition) for more information.
-
-👉 **Enable the flag**
-
-```tsx
-<BrowserRouter
-  future={{
-    v7_startTransition: true,
-  }}
-/>
-
-// or
-<RouterProvider
-  future={{
-    v7_startTransition: true,
-  }}
-/>
-```
-
-👉 **Update your Code**
-
-You don't need to update anything unless you are using `React.lazy` _inside_ of a component.
-
-Using `React.lazy` inside of a component is incompatible with `React.useTransition` (or other code that makes promises inside of components). Move `React.lazy` to the module scope and stop making promises inside of components. This is not a limitation of React Router but rather incorrect usage of React.
-
-## v7_fetcherPersist
-
-<docs-warning>If you are not using a `createBrowserRouter` you can skip this</docs-warning>
-
-**Background**
-
-The fetcher lifecycle is now based on when it returns to an idle state rather than when its owner component unmounts: [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#persistence-future-flag-futurev7_fetcherpersist) for more information.
-
-**Enable the Flag**
-
-```tsx
-createBrowserRouter(routes, {
-  future: {
-    v7_fetcherPersist: true,
-  },
-});
-```
-
-**Update your Code**
-
-It's unlikely to affect your app. You may want to check any usage of `useFetchers` as they may persist longer than they did before. Depending on what you're doing, you may render something longer than before.
-
-## v7_normalizeFormMethod
-
-<docs-warning>If you are not using a `createBrowserRouter` you can skip this</docs-warning>
-
-This normalizes `formMethod` fields as uppercase HTTP methods to align with the `fetch()` behavior. [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#futurev7_normalizeformmethod) for more information.
-
-👉 **Enable the Flag**
-
-```tsx
-createBrowserRouter(routes, {
-  future: {
-    v7_normalizeFormMethod: true,
-  },
-});
-```
-
-**Update your Code**
-
-If any of your code is checking for lowercase HTTP methods, you will need to update it to check for uppercase HTTP methods (or call `toLowerCase()` on it).
-
-👉 **Compare `formMethod` to UPPERCASE**
-
-```diff
--useNavigation().formMethod === "post"
--useFetcher().formMethod === "get";
-+useNavigation().formMethod === "POST"
-+useFetcher().formMethod === "GET";
-```
-
-## v7_partialHydration
-
-<docs-warning>If you are not using a `createBrowserRouter` you can skip this</docs-warning>
-
-This allows SSR frameworks to provide only partial hydration data. It's unlikely you need to worry about this, just turn the flag on. [View the CHANGELOG](https://github.com/remix-run/react-router/blob/main/CHANGELOG.md#partial-hydration) for more information.
-
-👉 **Enable the Flag**
-
-```tsx
-createBrowserRouter(routes, {
-  future: {
-    v7_partialHydration: true,
-  },
-});
-```
-
-## v7_skipActionStatusRevalidation
-
-<docs-warning>If you are not using a `createBrowserRouter` you can skip this</docs-warning>
-
-When this flag is enabled, loaders will no longer revalidate by default after an action throws/returns a `Response` with a `4xx`/`5xx` status code. You may opt-into revalidation in these scenarios via `shouldRevalidate` and the `actionStatus` parameter.
-
-👉 **Enable the Flag**
-
-```tsx
-createBrowserRouter(routes, {
-  future: {
-    v7_skipActionStatusRevalidation: true,
-  },
-});
-```
-
-**Update your Code**
-
-In most cases, you probably won't have to make changes to your app code. Usually, if an action errors, it's unlikely data was mutated and needs revalidation. If any of your code _does_ mutate data in action error scenarios you have 2 options:
-
-👉 **Option 1: Change the `action` to avoid mutations in error scenarios**
-
-```js
-// Before
-async function action() {
-  await mutateSomeData();
-  if (detectError()) {
-    throw new Response(error, { status: 400 });
-  }
-  await mutateOtherData();
-  // ...
-}
-
-// After
-async function action() {
-  if (detectError()) {
-    throw new Response(error, { status: 400 });
-  }
-  // All data is now mutated after validations
-  await mutateSomeData();
-  await mutateOtherData();
-  // ...
-}
-```
-
-👉 **Option 2: Opt-into revalidation via `shouldRevalidate` and `actionStatus`**
-
-```js
-async function action() {
-  await mutateSomeData();
-  if (detectError()) {
-    throw new Response(error, { status: 400 });
-  }
-  await mutateOtherData();
-}
-
-async function loader() { ... }
-
-function shouldRevalidate({ actionStatus, defaultShouldRevalidate }) {
-  if (actionStatus != null && actionStatus >= 400) {
-    // Revalidate this loader when actions return a 4xx/5xx status
-    return true;
-  }
-  return defaultShouldRevalidate;
-}
-```
diff --git a/docs/upgrading/remix.md b/docs/upgrading/remix.md
index a64dbe2f74..05d033622f 100644
--- a/docs/upgrading/remix.md
+++ b/docs/upgrading/remix.md
@@ -21,6 +21,8 @@ export interface FutureConfig {
 
 ### Codemod
 
+<docs-warning>This codemod is still in development, this doc is a hypothetical of what it might look like.</docs-warning>
+
 You can use the following command that will automatically:
 
 - update your Remix dependencies to their corresponding React Router v7 dependencies
diff --git a/docs/upgrading/vite-component-routes.md b/docs/upgrading/vite-component-routes.md
index 861a99fea5..cf330450c6 100644
--- a/docs/upgrading/vite-component-routes.md
+++ b/docs/upgrading/vite-component-routes.md
@@ -33,18 +33,18 @@ First install the React Router vite plugin:
 npm install -D @react-router/dev
 ```
 
-Then swap out the React plugin for React Router. The `react` key accepts the same options as the React plugin.
+Then swap out the React plugin for React Router.
 
 ```diff filename=vite.config.ts
 -import react from '@vitejs/plugin-react'
-+import { plugin as app } from "@react-router/vite";
++import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 
 export default defineConfig({
   plugins: [
--    react(reactOptions)
-+    app({ react: reactOptions })
+-    react()
++    reactRouter()
   ],
 });
 ```
@@ -189,7 +189,6 @@ export const routes: RouteConfig = [
 And then create the catchall route module and render your existing root App component within it.
 
 ```tsx filename=src/catchall.tsx
-import { defineRoute } from "react-router";
 import App from "./App";
 
 export default function Component() {
@@ -260,12 +259,12 @@ The first few routes you migrate are the hardest because you often have to acces
 If you want to enable server rendering and static pre-rendering, you can do so with the `ssr` and `prerender` options in the bundler plugin.
 
 ```ts filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [
-    app({
+    reactRouter({
       ssr: true,
       async prerender() {
         return ["/", "/about", "/contact"];
diff --git a/docs/upgrading/vite-router-provider.md b/docs/upgrading/vite-router-provider.md
index b8c98ff956..030e2a873b 100644
--- a/docs/upgrading/vite-router-provider.md
+++ b/docs/upgrading/vite-router-provider.md
@@ -31,18 +31,18 @@ First install the React Router vite plugin:
 npm install -D @react-router/dev
 ```
 
-Then swap out the React plugin for React Router. The `react` key accepts the same options as the React plugin.
+Then swap out the React plugin for React Router.
 
 ```diff filename=vite.config.ts
 -import react from '@vitejs/plugin-react'
-+import { plugin as app } from "@react-router/vite";
++import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 
 export default defineConfig({
   plugins: [
--    react(reactOptions)
-+    app({ react: reactOptions })
+-    react()
++    reactRouter()
   ],
 });
 ```
@@ -232,12 +232,12 @@ The first few routes you migrate are the hardest because you often have to acces
 If you want to enable server rendering and static pre-rendering, you can do so with the `ssr` and `prerender` options in the bundler plugin. For SSR you'll need to also deploy the server build to a server. See [Deploying](./deploying) for more information.
 
 ```ts filename=vite.config.ts
-import { plugin as app } from "@react-router/vite";
+import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [
-    app({
+    reactRouter({
       ssr: true,
       async prerender() {
         return ["/", "/pages/about"];
diff --git a/packages/react-router-dev/__tests__/cli-test.ts b/packages/react-router-dev/__tests__/cli-test.ts
index 045490f0d6..aecfb7160f 100644
--- a/packages/react-router-dev/__tests__/cli-test.ts
+++ b/packages/react-router-dev/__tests__/cli-test.ts
@@ -142,7 +142,11 @@ describe("remix CLI", () => {
             $ react-router reveal entry.server
             $ react-router reveal entry.client --no-typescript
             $ react-router reveal entry.server --no-typescript
-            $ react-router reveal entry.server --config vite.react-router.config.ts"
+            $ react-router reveal entry.server --config vite.react-router.config.ts
+
+          Generate types for route modules:
+
+           $ react-router typegen"
       `);
     });
   });
diff --git a/packages/react-router-dev/cli/commands.ts b/packages/react-router-dev/cli/commands.ts
index 0eac22f476..1c7e7e9578 100644
--- a/packages/react-router-dev/cli/commands.ts
+++ b/packages/react-router-dev/cli/commands.ts
@@ -11,6 +11,7 @@ import type { RoutesFormat } from "../config/format";
 import { loadPluginContext } from "../vite/plugin";
 import { transpile as convertFileToJS } from "./useJavascript";
 import * as profiler from "../vite/profiler";
+import * as Typegen from "../typescript/typegen";
 
 export async function routes(
   reactRouterRoot?: string,
@@ -190,3 +191,12 @@ async function createClientEntry(
   let contents = await fse.readFile(inputFile, "utf-8");
   return contents;
 }
+
+export async function typegen(root: string) {
+  let ctx = await loadPluginContext({ root });
+  await Typegen.writeAll({
+    rootDirectory: root,
+    appDirectory: ctx.reactRouterConfig.appDirectory,
+    routes: ctx.reactRouterConfig.routes,
+  });
+}
diff --git a/packages/react-router-dev/cli/run.ts b/packages/react-router-dev/cli/run.ts
index 587ca6d116..5751d49a68 100644
--- a/packages/react-router-dev/cli/run.ts
+++ b/packages/react-router-dev/cli/run.ts
@@ -68,6 +68,10 @@ ${colors.logoBlue("react-router")}
     $ react-router reveal entry.client --no-typescript
     $ react-router reveal entry.server --no-typescript
     $ react-router reveal entry.server --config vite.react-router.config.ts
+
+  ${colors.heading("Generate types for route modules")}:
+
+   $ react-router typegen
 `;
 
 /**
@@ -170,6 +174,9 @@ export async function run(argv: string[] = process.argv.slice(2)) {
     case "dev":
       await commands.dev(input[1], flags);
       break;
+    case "typegen":
+      await commands.typegen(input[1]);
+      break;
     default:
       // `react-router ./my-project` is shorthand for `react-router dev ./my-project`
       await commands.dev(input[0], flags);
diff --git a/packages/react-router-dev/package.json b/packages/react-router-dev/package.json
index 671d7cf2b9..7acf8e2124 100644
--- a/packages/react-router-dev/package.json
+++ b/packages/react-router-dev/package.json
@@ -12,6 +12,7 @@
     "directory": "packages/react-router-dev"
   },
   "license": "MIT",
+  "main": "./dist/typescript/plugin.ts",
   "exports": {
     "./routes": {
       "types": "./dist/routes.d.ts",
@@ -47,6 +48,7 @@
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
     "chalk": "^4.1.2",
+    "chokidar": "^4.0.0",
     "dedent": "^1.5.3",
     "es-module-lexer": "^1.3.1",
     "exit-hook": "2.2.1",
@@ -54,14 +56,15 @@
     "gunzip-maybe": "^1.4.2",
     "jsesc": "3.0.2",
     "lodash": "^4.17.21",
+    "pathe": "^1.1.2",
     "picocolors": "^1.0.0",
     "picomatch": "^2.3.1",
     "prettier": "^2.7.1",
     "react-refresh": "^0.14.0",
     "semver": "^7.3.7",
     "set-cookie-parser": "^2.6.0",
-    "vite-node": "^1.6.0",
-    "valibot": "^0.41.0"
+    "valibot": "^0.41.0",
+    "vite-node": "^1.6.0"
   },
   "devDependencies": {
     "@react-router/serve": "workspace:*",
diff --git a/packages/react-router-dev/rollup.config.js b/packages/react-router-dev/rollup.config.js
index 176d127017..f5f36f8ad9 100644
--- a/packages/react-router-dev/rollup.config.js
+++ b/packages/react-router-dev/rollup.config.js
@@ -29,13 +29,14 @@ module.exports = function rollup() {
         `${SOURCE_DIR}/routes.ts`,
         `${SOURCE_DIR}/vite.ts`,
         `${SOURCE_DIR}/vite/cloudflare.ts`,
+        `${SOURCE_DIR}/typescript/plugin.ts`,
       ],
       output: {
         banner: createBanner("@react-router/dev", version),
         dir: OUTPUT_DIR,
         format: "cjs",
         preserveModules: true,
-        exports: "named",
+        exports: "auto",
       },
       plugins: [
         babel({
diff --git a/packages/react-router-dev/typescript/plugin.ts b/packages/react-router-dev/typescript/plugin.ts
new file mode 100644
index 0000000000..63de259c53
--- /dev/null
+++ b/packages/react-router-dev/typescript/plugin.ts
@@ -0,0 +1,22 @@
+// For compatibility with the TS language service plugin API, this entrypoint:
+// - MUST only export the typescript plugin as its default export
+// - MUST be compiled to CJS
+// - MUST be listed as `main` in `package.json`
+
+import type ts from "typescript/lib/tsserverlibrary";
+import * as Path from "pathe";
+
+import * as Typegen from "./typegen";
+
+export default function init() {
+  function create(info: ts.server.PluginCreateInfo) {
+    const { logger } = info.project.projectService;
+    logger.info("[react-router] setup");
+
+    const rootDirectory = Path.normalize(info.project.getCurrentDirectory());
+    Typegen.watch(rootDirectory);
+
+    return info.languageService;
+  }
+  return { create };
+}
diff --git a/packages/react-router-dev/typescript/typegen.ts b/packages/react-router-dev/typescript/typegen.ts
new file mode 100644
index 0000000000..bde4fd87de
--- /dev/null
+++ b/packages/react-router-dev/typescript/typegen.ts
@@ -0,0 +1,189 @@
+import fs from "node:fs";
+
+import Chokidar from "chokidar";
+import dedent from "dedent";
+import * as Path from "pathe";
+import * as Pathe from "pathe/utils";
+
+import {
+  configRoutesToRouteManifest,
+  type RouteManifest,
+  type RouteManifestEntry,
+} from "../config/routes";
+import * as ViteNode from "../vite/vite-node";
+import { findEntry } from "../vite/config";
+import { loadPluginContext } from "../vite/plugin";
+
+type Context = {
+  rootDirectory: string;
+  appDirectory: string;
+  routes: RouteManifest;
+};
+
+function getDirectory(ctx: Context) {
+  return Path.join(ctx.rootDirectory, ".react-router/types");
+}
+
+export function getPath(ctx: Context, route: RouteManifestEntry): string {
+  return Path.join(
+    getDirectory(ctx),
+    "app",
+    Path.dirname(route.file),
+    "+types." + Pathe.filename(route.file) + ".d.ts"
+  );
+}
+
+export async function watch(rootDirectory: string) {
+  const vitePluginCtx = await loadPluginContext({ root: rootDirectory });
+  const routesTsPath = Path.join(
+    vitePluginCtx.reactRouterConfig.appDirectory,
+    "routes.ts"
+  );
+
+  const routesViteNodeContext = await ViteNode.createContext({
+    root: rootDirectory,
+  });
+  async function getRoutes(): Promise<RouteManifest> {
+    const routes: RouteManifest = {};
+    const rootRouteFile = findEntry(
+      vitePluginCtx.reactRouterConfig.appDirectory,
+      "root"
+    );
+    if (rootRouteFile) {
+      routes.root = { path: "", id: "root", file: rootRouteFile };
+    }
+
+    routesViteNodeContext.devServer.moduleGraph.invalidateAll();
+    routesViteNodeContext.runner.moduleCache.clear();
+
+    const result = await routesViteNodeContext.runner.executeFile(routesTsPath);
+    return {
+      ...routes,
+      ...configRoutesToRouteManifest(result.routes),
+    };
+  }
+
+  const ctx: Context = {
+    rootDirectory,
+    appDirectory: vitePluginCtx.reactRouterConfig.appDirectory,
+    routes: await getRoutes(),
+  };
+  await writeAll(ctx);
+
+  const watcher = Chokidar.watch(ctx.appDirectory, { ignoreInitial: true });
+  watcher.on("all", async (event, path) => {
+    path = Path.normalize(path);
+    ctx.routes = await getRoutes();
+
+    const routeConfigChanged = Boolean(
+      routesViteNodeContext.devServer.moduleGraph.getModuleById(path)
+    );
+    if (routeConfigChanged) {
+      await writeAll(ctx);
+      return;
+    }
+
+    const isRoute = Object.values(ctx.routes).find(
+      (route) => path === Path.join(ctx.appDirectory, route.file)
+    );
+    if (isRoute && (event === "add" || event === "unlink")) {
+      await writeAll(ctx);
+      return;
+    }
+  });
+}
+
+export async function writeAll(ctx: Context): Promise<void> {
+  fs.rmSync(getDirectory(ctx), { recursive: true, force: true });
+  Object.values(ctx.routes).forEach((route) => {
+    if (!fs.existsSync(Path.join(ctx.appDirectory, route.file))) return;
+    const typesPath = getPath(ctx, route);
+    const content = getModule(ctx.routes, route);
+    fs.mkdirSync(Path.dirname(typesPath), { recursive: true });
+    fs.writeFileSync(typesPath, content);
+  });
+}
+
+function getModule(routes: RouteManifest, route: RouteManifestEntry): string {
+  return dedent`
+    // React Router generated types for route:
+    // ${route.file}
+
+    import * as T from "react-router/types"
+
+    export type Params = {${formattedParamsProperties(routes, route)}}
+
+    type Route = typeof import("./${Pathe.filename(route.file)}")
+
+    export type LoaderData = T.CreateLoaderData<Route>
+    export type ActionData = T.CreateActionData<Route>
+
+    export type LoaderArgs = T.CreateServerLoaderArgs<Params>
+    export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, Route>
+    export type ActionArgs = T.CreateServerActionArgs<Params>
+    export type ClientActionArgs = T.CreateClientActionArgs<Params, Route>
+
+    export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
+    export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
+    export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+  `;
+}
+
+function formattedParamsProperties(
+  routes: RouteManifest,
+  route: RouteManifestEntry
+) {
+  const urlpath = routeLineage(routes, route)
+    .map((route) => route.path)
+    .join("/");
+  const params = parseParams(urlpath);
+  const indent = "  ".repeat(3);
+  const properties = Object.entries(params).map(([name, values]) => {
+    if (values.length === 1) {
+      const isOptional = values[0];
+      return indent + (isOptional ? `${name}?: string` : `${name}: string`);
+    }
+    const items = values.map((isOptional) =>
+      isOptional ? "string | undefined" : "string"
+    );
+    return indent + `${name}: [${items.join(", ")}]`;
+  });
+
+  // prettier-ignore
+  const body =
+    properties.length === 0 ? "" :
+    "\n" + properties.join("\n") + "\n";
+
+  return body;
+}
+
+function routeLineage(routes: RouteManifest, route: RouteManifestEntry) {
+  const result: RouteManifestEntry[] = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes[route.parentId];
+  }
+  result.reverse();
+  return result;
+}
+
+function parseParams(urlpath: string) {
+  const result: Record<string, boolean[]> = {};
+
+  let segments = urlpath.split("/");
+  segments
+    .filter((s) => s.startsWith(":"))
+    .forEach((param) => {
+      param = param.slice(1); // omit leading `:`
+      let isOptional = param.endsWith("?");
+      if (isOptional) {
+        param = param.slice(0, -1); // omit trailing `?`
+      }
+
+      result[param] ??= [];
+      result[param].push(isOptional);
+      return;
+    });
+  return result;
+}
diff --git a/packages/react-router-dev/vite/config.ts b/packages/react-router-dev/vite/config.ts
index ff560b1892..0bedfc4bf9 100644
--- a/packages/react-router-dev/vite/config.ts
+++ b/packages/react-router-dev/vite/config.ts
@@ -1,5 +1,4 @@
 import type * as Vite from "vite";
-import type { ViteNodeRunner } from "vite-node/client";
 import { execSync } from "node:child_process";
 import path from "node:path";
 import fse from "fs-extra";
@@ -7,6 +6,7 @@ import colors from "picocolors";
 import pick from "lodash/pick";
 import omit from "lodash/omit";
 import PackageJson from "@npmcli/package-json";
+import type * as ViteNode from "./vite-node";
 
 import {
   type RouteManifest,
@@ -293,14 +293,14 @@ export async function resolveReactRouterConfig({
   routeConfigChanged,
   viteUserConfig,
   viteCommand,
-  viteNodeRunner,
+  routesViteNodeContext,
 }: {
   rootDirectory: string;
   reactRouterUserConfig: ReactRouterConfig;
   routeConfigChanged: boolean;
   viteUserConfig: Vite.UserConfig;
   viteCommand: Vite.ConfigEnv["command"];
-  viteNodeRunner: ViteNodeRunner;
+  routesViteNodeContext: ViteNode.Context;
 }) {
   let vite = importViteEsmSync();
 
@@ -439,7 +439,9 @@ export async function resolveReactRouterConfig({
 
     setAppDirectory(appDirectory);
     let routeConfigExport: RouteConfig = (
-      await viteNodeRunner.executeFile(path.join(appDirectory, routeConfigFile))
+      await routesViteNodeContext.runner.executeFile(
+        path.join(appDirectory, routeConfigFile)
+      )
     ).routes;
 
     let routeConfig = await routeConfigExport;
@@ -593,7 +595,7 @@ export async function resolveEntryFiles({
 
 const entryExts = [".js", ".jsx", ".ts", ".tsx"];
 
-function findEntry(dir: string, basename: string): string | undefined {
+export function findEntry(dir: string, basename: string): string | undefined {
   for (let ext of entryExts) {
     let file = path.resolve(dir, basename + ext);
     if (fse.existsSync(file)) return path.relative(dir, file);
diff --git a/packages/react-router-dev/vite/plugin.ts b/packages/react-router-dev/vite/plugin.ts
index f978634928..ac1c8ea260 100644
--- a/packages/react-router-dev/vite/plugin.ts
+++ b/packages/react-router-dev/vite/plugin.ts
@@ -4,9 +4,6 @@ import type * as Vite from "vite";
 import { type BinaryLike, createHash } from "node:crypto";
 import * as path from "node:path";
 import * as url from "node:url";
-import { ViteNodeServer } from "vite-node/server";
-import { ViteNodeRunner } from "vite-node/client";
-import { installSourcemapsSupport } from "vite-node/source-map";
 import * as fse from "fs-extra";
 import babel from "@babel/core";
 import {
@@ -56,6 +53,7 @@ import {
   resolvePublicPath,
 } from "./config";
 import * as WithProps from "./with-props";
+import * as ViteNode from "./vite-node";
 
 export async function resolveViteConfig({
   configFile,
@@ -502,8 +500,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
   let viteConfig: Vite.ResolvedConfig | undefined;
   let cssModulesManifest: Record<string, string> = {};
   let viteChildCompiler: Vite.ViteDevServer | null = null;
-  let routeConfigViteServer: Vite.ViteDevServer | null = null;
-  let viteNodeRunner: ViteNodeRunner | null = null;
+  let routesViteNodeContext: ViteNode.Context | null = null;
   let cache: Cache = new Map();
 
   let ssrExternals = isInReactRouterMonorepo()
@@ -537,14 +534,14 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
     let rootDirectory =
       viteUserConfig.root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 
-    invariant(viteNodeRunner);
+    invariant(routesViteNodeContext);
     let reactRouterConfig = await resolveReactRouterConfig({
       rootDirectory,
       reactRouterUserConfig,
       routeConfigChanged,
       viteUserConfig,
       viteCommand,
-      viteNodeRunner,
+      routesViteNodeContext,
     });
 
     let { entryClientFilePath, entryServerFilePath } = await resolveEntryFiles({
@@ -878,40 +875,15 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
         viteConfigEnv = _viteConfigEnv;
         viteCommand = viteConfigEnv.command;
 
-        routeConfigViteServer = await vite.createServer({
+        routesViteNodeContext = await ViteNode.createContext({
+          root: viteUserConfig.root,
           mode: viteConfigEnv.mode,
           server: {
             watch: viteCommand === "build" ? null : undefined,
-            preTransformRequests: false,
-            hmr: false,
           },
           ssr: {
             external: ssrExternals,
           },
-          optimizeDeps: {
-            noDiscovery: true,
-          },
-          configFile: false,
-          envFile: false,
-          plugins: [],
-        });
-        await routeConfigViteServer.pluginContainer.buildStart({});
-
-        let viteNodeServer = new ViteNodeServer(routeConfigViteServer);
-
-        installSourcemapsSupport({
-          getSourceMap: (source) => viteNodeServer.getSourceMap(source),
-        });
-
-        viteNodeRunner = new ViteNodeRunner({
-          root: routeConfigViteServer.config.root,
-          base: routeConfigViteServer.config.base,
-          fetchModule(id) {
-            return viteNodeServer.fetchModule(id);
-          },
-          resolveId(id, importer) {
-            return viteNodeServer.resolveId(id, importer);
-          },
         });
 
         await updatePluginContext();
@@ -1179,6 +1151,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
                   plugin !== null &&
                   "name" in plugin &&
                   plugin.name !== "react-router" &&
+                  plugin.name !== "react-router-route-exports" &&
                   plugin.name !== "react-router-hmr-updates"
               ),
           ],
@@ -1259,12 +1232,14 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
             filepath === normalizePath(viteConfig.configFile);
 
           let routeConfigChanged = Boolean(
-            routeConfigViteServer?.moduleGraph.getModuleById(filepath)
+            routesViteNodeContext?.devServer?.moduleGraph.getModuleById(
+              filepath
+            )
           );
 
           if (routeConfigChanged || appFileAddedOrRemoved) {
-            routeConfigViteServer?.moduleGraph.invalidateAll();
-            viteNodeRunner?.moduleCache.clear();
+            routesViteNodeContext?.devServer?.moduleGraph.invalidateAll();
+            routesViteNodeContext?.runner?.moduleCache.clear();
           }
 
           if (
@@ -1413,7 +1388,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
       },
       async buildEnd() {
         await viteChildCompiler?.close();
-        await routeConfigViteServer?.close();
+        await routesViteNodeContext?.devServer?.close();
       },
     },
     {
@@ -1678,12 +1653,10 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
     {
       name: "react-router-route-exports",
       async transform(code, id, options) {
-        if (options?.ssr) return;
-
         let route = getRoute(ctx.reactRouterConfig, id);
         if (!route) return;
 
-        if (!ctx.reactRouterConfig.ssr) {
+        if (!options?.ssr && !ctx.reactRouterConfig.ssr) {
           let serverOnlyExports = esModuleLexer(code)[1]
             .map((exp) => exp.n)
             .filter((exp) => SERVER_ONLY_ROUTE_EXPORTS.includes(exp));
@@ -1714,7 +1687,9 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = (_config) => {
         let [filepath] = id.split("?");
 
         let ast = parse(code, { sourceType: "module" });
-        removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
+        if (!options?.ssr) {
+          removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
+        }
         WithProps.transform(ast);
         return generate(ast, {
           sourceMaps: true,
diff --git a/packages/react-router-dev/vite/vite-node.ts b/packages/react-router-dev/vite/vite-node.ts
new file mode 100644
index 0000000000..1261bae36a
--- /dev/null
+++ b/packages/react-router-dev/vite/vite-node.ts
@@ -0,0 +1,57 @@
+import { ViteNodeServer } from "vite-node/server";
+import { ViteNodeRunner } from "vite-node/client";
+import { installSourcemapsSupport } from "vite-node/source-map";
+import type * as Vite from "vite";
+
+import { importViteEsmSync, preloadViteEsm } from "./import-vite-esm-sync";
+
+export type Context = {
+  devServer: Vite.ViteDevServer;
+  server: ViteNodeServer;
+  runner: ViteNodeRunner;
+};
+
+export async function createContext(
+  viteConfig: Vite.InlineConfig = {}
+): Promise<Context> {
+  await preloadViteEsm();
+  const vite = importViteEsmSync();
+
+  const devServer = await vite.createServer(
+    vite.mergeConfig(
+      {
+        server: {
+          preTransformRequests: false,
+          hmr: false,
+        },
+        optimizeDeps: {
+          noDiscovery: true,
+        },
+        configFile: false,
+        envFile: false,
+        plugins: [],
+      },
+      viteConfig
+    )
+  );
+  await devServer.pluginContainer.buildStart({});
+
+  const server = new ViteNodeServer(devServer);
+
+  installSourcemapsSupport({
+    getSourceMap: (source) => server.getSourceMap(source),
+  });
+
+  const runner = new ViteNodeRunner({
+    root: devServer.config.root,
+    base: devServer.config.base,
+    fetchModule(id) {
+      return server.fetchModule(id);
+    },
+    resolveId(id, importer) {
+      return server.resolveId(id, importer);
+    },
+  });
+
+  return { devServer, server, runner };
+}
diff --git a/packages/react-router/lib/router/router.ts b/packages/react-router/lib/router/router.ts
index f0bd699c6c..d3cbc4fe5f 100644
--- a/packages/react-router/lib/router/router.ts
+++ b/packages/react-router/lib/router/router.ts
@@ -1968,9 +1968,7 @@ export function createRouter(init: RouterInit): Router {
     }
 
     revalidatingFetchers.forEach((rf) => {
-      if (fetchControllers.has(rf.key)) {
-        abortFetcher(rf.key);
-      }
+      abortFetcher(rf.key);
       if (rf.controller) {
         // Fetchers use an independent AbortController so that aborting a fetcher
         // (via deleteFetcher) does not abort the triggering navigation that
@@ -2011,6 +2009,7 @@ export function createRouter(init: RouterInit): Router {
         abortPendingFetchRevalidations
       );
     }
+
     revalidatingFetchers.forEach((rf) => fetchControllers.delete(rf.key));
 
     // If any loaders returned a redirect Response, start a new REPLACE navigation
@@ -2038,7 +2037,6 @@ export function createRouter(init: RouterInit): Router {
     let { loaderData, errors } = processLoaderData(
       state,
       matches,
-      matchesToLoad,
       loaderResults,
       pendingActionResult,
       revalidatingFetchers,
@@ -2107,7 +2105,8 @@ export function createRouter(init: RouterInit): Router {
     href: string | null,
     opts?: RouterFetchOptions
   ) {
-    if (fetchControllers.has(key)) abortFetcher(key);
+    abortFetcher(key);
+
     let flushSync = (opts && opts.flushSync) === true;
 
     let routesToUse = inFlightDataRoutes || dataRoutes;
@@ -2370,9 +2369,7 @@ export function createRouter(init: RouterInit): Router {
           existingFetcher ? existingFetcher.data : undefined
         );
         state.fetchers.set(staleKey, revalidatingFetcher);
-        if (fetchControllers.has(staleKey)) {
-          abortFetcher(staleKey);
-        }
+        abortFetcher(staleKey);
         if (rf.controller) {
           fetchControllers.set(staleKey, rf.controller);
         }
@@ -2438,7 +2435,6 @@ export function createRouter(init: RouterInit): Router {
     let { loaderData, errors } = processLoaderData(
       state,
       matches,
-      matchesToLoad,
       loaderResults,
       undefined,
       revalidatingFetchers,
@@ -2863,8 +2859,8 @@ export function createRouter(init: RouterInit): Router {
     fetchLoadMatches.forEach((_, key) => {
       if (fetchControllers.has(key)) {
         cancelledFetcherLoads.add(key);
-        abortFetcher(key);
       }
+      abortFetcher(key);
     });
   }
 
@@ -2941,9 +2937,10 @@ export function createRouter(init: RouterInit): Router {
 
   function abortFetcher(key: string) {
     let controller = fetchControllers.get(key);
-    invariant(controller, `Expected fetch controller: ${key}`);
-    controller.abort();
-    fetchControllers.delete(key);
+    if (controller) {
+      controller.abort();
+      fetchControllers.delete(key);
+    }
   }
 
   function markFetchersDone(keys: string[]) {
@@ -5154,7 +5151,6 @@ function processRouteLoaderData(
 function processLoaderData(
   state: RouterState,
   matches: AgnosticDataRouteMatch[],
-  matchesToLoad: AgnosticDataRouteMatch[],
   results: Record<string, DataResult>,
   pendingActionResult: PendingActionResult | undefined,
   revalidatingFetchers: RevalidatingFetcher[],
diff --git a/packages/react-router/lib/router/utils.ts b/packages/react-router/lib/router/utils.ts
index f6396d2e5d..8715cec2b6 100644
--- a/packages/react-router/lib/router/utils.ts
+++ b/packages/react-router/lib/router/utils.ts
@@ -120,10 +120,6 @@ interface DataFunctionArgs<Context> {
   context?: Context;
 }
 
-// TODO: (v7) Change the defaults from any to unknown in and remove Remix wrappers:
-//   ActionFunction, ActionFunctionArgs, LoaderFunction, LoaderFunctionArgs
-//   Also, make them a type alias instead of an interface
-
 /**
  * Arguments passed to loader functions
  */
diff --git a/packages/react-router/lib/server-runtime/single-fetch.ts b/packages/react-router/lib/server-runtime/single-fetch.ts
index 246aa0e124..b7d5cf9bbd 100644
--- a/packages/react-router/lib/server-runtime/single-fetch.ts
+++ b/packages/react-router/lib/server-runtime/single-fetch.ts
@@ -282,7 +282,7 @@ export function getSingleFetchRedirect(
   };
 }
 
-type Serializable =
+export type Serializable =
   | undefined
   | null
   | boolean
diff --git a/packages/react-router/lib/types.ts b/packages/react-router/lib/types.ts
new file mode 100644
index 0000000000..01fd21b1d4
--- /dev/null
+++ b/packages/react-router/lib/types.ts
@@ -0,0 +1,260 @@
+import type { AppLoadContext } from "./server-runtime/data";
+import type { Serializable } from "./server-runtime/single-fetch";
+
+export type Expect<T extends true> = T;
+// prettier-ignore
+type Equal<X, Y> =
+  (<T>() => T extends X ? 1 : 2) extends
+  (<T>() => T extends Y ? 1 : 2) ? true : false
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+type Fn = (...args: any[]) => unknown;
+
+type RouteModule = {
+  loader?: Fn;
+  clientLoader?: Fn;
+  action?: Fn;
+  clientAction?: Fn;
+  HydrateFallback?: unknown;
+  default?: unknown;
+  ErrorBoundary?: unknown;
+};
+
+type VoidToUndefined<T> = Equal<T, void> extends true ? undefined : T;
+
+// prettier-ignore
+type DataFrom<T> =
+  IsAny<T> extends true ? undefined :
+  T extends Fn ? VoidToUndefined<Awaited<ReturnType<T>>> :
+  undefined
+
+type ServerDataFrom<T> = Serialize<DataFrom<T>>;
+type ClientDataFrom<T> = DataFrom<T>;
+
+// prettier-ignore
+type IsHydrate<ClientLoader> =
+  ClientLoader extends { hydrate: true } ? true :
+  ClientLoader extends { hydrate: false } ? false :
+  false
+
+export type CreateLoaderData<T extends RouteModule> = _CreateLoaderData<
+  ServerDataFrom<T["loader"]>,
+  ClientDataFrom<T["clientLoader"]>,
+  IsHydrate<T["clientLoader"]>,
+  T extends { HydrateFallback: Fn } ? true : false
+>;
+
+// prettier-ignore
+type _CreateLoaderData<
+  ServerLoaderData,
+  ClientLoaderData,
+  ClientLoaderHydrate extends boolean,
+  HasHydrateFallback
+> =
+  [HasHydrateFallback, ClientLoaderHydrate]  extends [true, true] ?
+    IsDefined<ClientLoaderData> extends true ? ClientLoaderData :
+    undefined
+  :
+  [IsDefined<ClientLoaderData>, IsDefined<ServerLoaderData>] extends [true, true] ? ServerLoaderData | ClientLoaderData :
+  IsDefined<ClientLoaderData> extends true ?
+    ClientLoaderHydrate extends true ? ClientLoaderData :
+    ClientLoaderData | undefined
+  :
+  IsDefined<ServerLoaderData> extends true ? ServerLoaderData :
+  undefined
+
+export type CreateActionData<T extends RouteModule> = _CreateActionData<
+  ServerDataFrom<T["action"]>,
+  ClientDataFrom<T["clientAction"]>
+>;
+
+// prettier-ignore
+type _CreateActionData<ServerActionData, ClientActionData> = Awaited<
+  [IsDefined<ServerActionData>, IsDefined<ClientActionData>] extends [true, true] ? ServerActionData | ClientActionData :
+  IsDefined<ClientActionData> extends true ? ClientActionData :
+  IsDefined<ServerActionData> extends true ? ServerActionData :
+  undefined
+>
+
+type DataFunctionArgs<Params> = {
+  request: Request;
+  params: Params;
+  context?: AppLoadContext;
+};
+
+// prettier-ignore
+type Serialize<T> =
+  // First, let type stay as-is if its already serializable...
+  T extends Serializable ? T :
+
+  // ...then don't allow functions to be serialized...
+  T extends (...args: any[]) => unknown ? undefined :
+
+  // ...lastly handle inner types for all container types allowed by `turbo-stream`
+
+  // Promise
+  T extends Promise<infer U> ? Promise<Serialize<U>> :
+
+  // Map & Set
+  T extends Map<infer K, infer V> ? Map<Serialize<K>, Serialize<V>> :
+  T extends Set<infer U> ? Set<Serialize<U>> :
+
+  // Array
+  T extends [] ? [] :
+  T extends readonly [infer F, ...infer R] ? [Serialize<F>, ...Serialize<R>] :
+  T extends Array<infer U> ? Array<Serialize<U>> :
+  T extends readonly unknown[] ? readonly Serialize<T[number]>[] :
+
+  // Record
+  T extends Record<any, any> ? {[K in keyof T]: Serialize<T[K]>} :
+
+  undefined
+
+export type CreateServerLoaderArgs<Params> = DataFunctionArgs<Params>;
+
+export type CreateClientLoaderArgs<
+  Params,
+  T extends RouteModule
+> = DataFunctionArgs<Params> & {
+  serverLoader: () => Promise<ServerDataFrom<T["loader"]>>;
+};
+
+export type CreateServerActionArgs<Params> = DataFunctionArgs<Params>;
+
+export type CreateClientActionArgs<
+  Params,
+  T extends RouteModule
+> = DataFunctionArgs<Params> & {
+  serverAction: () => Promise<ServerDataFrom<T["action"]>>;
+};
+
+export type CreateHydrateFallbackProps<Params> = {
+  params: Params;
+};
+
+export type CreateComponentProps<Params, LoaderData, ActionData> = {
+  params: Params;
+  loaderData: LoaderData;
+  actionData?: ActionData;
+};
+
+export type CreateErrorBoundaryProps<Params, LoaderData, ActionData> = {
+  params: Params;
+  error: unknown;
+  loaderData?: LoaderData;
+  actionData?: ActionData;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type __tests = [
+  // ServerDataFrom
+  Expect<Equal<ServerDataFrom<any>, undefined>>,
+  Expect<
+    Equal<
+      ServerDataFrom<() => { a: string; b: Date; c: () => boolean }>,
+      { a: string; b: Date; c: undefined }
+    >
+  >,
+
+  // ClientDataFrom
+  Expect<Equal<ClientDataFrom<any>, undefined>>,
+  Expect<
+    Equal<
+      ClientDataFrom<() => { a: string; b: Date; c: () => boolean }>,
+      { a: string; b: Date; c: () => boolean }
+    >
+  >,
+
+  // LoaderData
+  Expect<Equal<CreateLoaderData<{}>, undefined>>,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: undefined }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        clientLoader: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      undefined | { a: string; b: Date; c: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: () => { d: string; e: Date; f: () => boolean };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: () => { d: string; e: Date; f: () => boolean };
+        HydrateFallback: () => unknown;
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: (() => { d: string; e: Date; f: () => boolean }) & {
+          hydrate: true;
+        };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: (() => { d: string; e: Date; f: () => boolean }) & {
+          hydrate: true;
+        };
+        HydrateFallback: () => unknown;
+      }>,
+      { d: string; e: Date; f: () => boolean }
+    >
+  >,
+
+  // ActionData
+  Expect<Equal<CreateActionData<{}>, undefined>>,
+  Expect<
+    Equal<
+      CreateActionData<{
+        action: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: undefined }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateActionData<{
+        clientAction: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      CreateActionData<{
+        action: () => { a: string; b: Date; c: () => boolean };
+        clientAction: () => { d: string; e: Date; f: () => boolean };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >
+];
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 06a8118c9a..215eb32c85 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -28,6 +28,9 @@
       "import": "./dist/index.mjs",
       "require": "./dist/main.js"
     },
+    "./types": {
+      "types": "./dist/lib/types.d.ts"
+    },
     "./dom": {
       "types": "./dist/dom-export.d.ts",
       "import": "./dist/dom-export.mjs",
diff --git a/packages/react-router/rollup.config.js b/packages/react-router/rollup.config.js
index 3aecb2f14b..08b2c1ad0b 100644
--- a/packages/react-router/rollup.config.js
+++ b/packages/react-router/rollup.config.js
@@ -93,6 +93,37 @@ module.exports = function rollup() {
         }),
       ].concat(PRETTY ? prettier({ parser: "babel" }) : []),
     },
+    {
+      input: `${SOURCE_DIR}/lib/types.ts`,
+      output: {
+        file: `${OUTPUT_DIR}/lib/types.mjs`,
+        format: "esm",
+        banner: createBanner("React Router", version),
+      },
+      external: isBareModuleId,
+      plugins: [
+        nodeResolve({ extensions: [".tsx", ".ts"] }),
+        babel({
+          babelHelpers: "bundled",
+          exclude: /node_modules/,
+          presets: [
+            ["@babel/preset-env", { loose: true }],
+            "@babel/preset-react",
+            "@babel/preset-typescript",
+          ],
+          plugins: [
+            "babel-plugin-dev-expression",
+            babelPluginReplaceVersionPlaceholder(),
+          ],
+          extensions: [".ts", ".tsx"],
+        }),
+        typescript({
+          // eslint-disable-next-line no-restricted-globals
+          tsconfig: path.join(__dirname, "tsconfig.dom.json"),
+          noEmitOnError: !WATCH,
+        }),
+      ],
+    },
   ];
 
   // JS modules for <script type=module>
diff --git a/playground/compiler-express/.gitignore b/playground/compiler-express/.gitignore
index 86cec25fd4..752e5fe866 100644
--- a/playground/compiler-express/.gitignore
+++ b/playground/compiler-express/.gitignore
@@ -2,3 +2,5 @@ node_modules
 
 /build
 .env
+
+.react-router/
diff --git a/playground/compiler-express/app/routes.ts b/playground/compiler-express/app/routes.ts
new file mode 100644
index 0000000000..45021a3415
--- /dev/null
+++ b/playground/compiler-express/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export const routes: RouteConfig = [index("routes/_index.tsx")];
diff --git a/playground/compiler-express/package.json b/playground/compiler-express/package.json
index 46de93e4b8..33e0243b91 100644
--- a/playground/compiler-express/package.json
+++ b/playground/compiler-express/package.json
@@ -8,7 +8,7 @@
     "build": "react-router build",
     "dev": "node ./server.js",
     "start": "cross-env NODE_ENV=production node ./server.js",
-    "typecheck": "tsc"
+    "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
     "@react-router/express": "workspace:*",
diff --git a/playground/compiler-express/tsconfig.json b/playground/compiler-express/tsconfig.json
index a2d574ae2c..a331d01af8 100644
--- a/playground/compiler-express/tsconfig.json
+++ b/playground/compiler-express/tsconfig.json
@@ -5,7 +5,8 @@
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    "./.react-router/types/**/*"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
@@ -25,6 +26,8 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-    "noEmit": true
+    "noEmit": true,
+    "plugins": [{ "name": "@react-router/dev" }],
+    "rootDirs": [".", "./.react-router/types"]
   }
 }
diff --git a/playground/compiler-spa/.gitignore b/playground/compiler-spa/.gitignore
index 86cec25fd4..752e5fe866 100644
--- a/playground/compiler-spa/.gitignore
+++ b/playground/compiler-spa/.gitignore
@@ -2,3 +2,5 @@ node_modules
 
 /build
 .env
+
+.react-router/
diff --git a/playground/compiler-spa/app/routes.ts b/playground/compiler-spa/app/routes.ts
new file mode 100644
index 0000000000..45021a3415
--- /dev/null
+++ b/playground/compiler-spa/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes";
+
+export const routes: RouteConfig = [index("routes/_index.tsx")];
diff --git a/playground/compiler-spa/package.json b/playground/compiler-spa/package.json
index a8d4b67ea8..503fac9554 100644
--- a/playground/compiler-spa/package.json
+++ b/playground/compiler-spa/package.json
@@ -8,7 +8,7 @@
     "build": "react-router build",
     "dev": "react-router dev",
     "preview": "vite preview",
-    "typecheck": "tsc"
+    "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
     "@react-router/node": "workspace:*",
diff --git a/playground/compiler-spa/tsconfig.json b/playground/compiler-spa/tsconfig.json
index de9996e8f1..85199772ff 100644
--- a/playground/compiler-spa/tsconfig.json
+++ b/playground/compiler-spa/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "./.react-router/types/**/*"],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["@react-router/node", "vite/client"],
@@ -18,6 +18,8 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-    "noEmit": true
+    "noEmit": true,
+    "plugins": [{ "name": "@react-router/dev" }],
+    "rootDirs": [".", "./.react-router/types"]
   }
 }
diff --git a/playground/compiler/.gitignore b/playground/compiler/.gitignore
index 86cec25fd4..8bafc41e1c 100644
--- a/playground/compiler/.gitignore
+++ b/playground/compiler/.gitignore
@@ -2,3 +2,5 @@ node_modules
 
 /build
 .env
+
+.react-router/
\ No newline at end of file
diff --git a/playground/compiler/.vscode/settings.json b/playground/compiler/.vscode/settings.json
new file mode 100644
index 0000000000..3662b3700e
--- /dev/null
+++ b/playground/compiler/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file
diff --git a/playground/compiler/app/routes.ts b/playground/compiler/app/routes.ts
index f8e97096fa..0ce8ee5dca 100644
--- a/playground/compiler/app/routes.ts
+++ b/playground/compiler/app/routes.ts
@@ -1,7 +1,6 @@
-import { type RouteConfig, route, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
 export const routes: RouteConfig = [
   index("routes/_index.tsx"),
-  route("/chunkable", "routes/chunkable.tsx"),
-  route("/unchunkable", "routes/unchunkable.tsx"),
+  route("products/:id", "routes/product.tsx"),
 ];
diff --git a/playground/compiler/app/routes/_index.tsx b/playground/compiler/app/routes/_index.tsx
index a4aaa631a5..65ba5f272d 100644
--- a/playground/compiler/app/routes/_index.tsx
+++ b/playground/compiler/app/routes/_index.tsx
@@ -1,24 +1,9 @@
-import { Link, type MetaFunction } from "react-router";
+import type * as Route from "./+types._index";
 
-export const meta: MetaFunction = () => {
-  return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
-  ];
-};
+export function loader({ params }: Route.LoaderArgs) {
+  return { planet: "world", date: new Date(), fn: () => 1 };
+}
 
-export default function Index() {
-  return (
-    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
-      <h1>Welcome to React Router</h1>
-      <ul>
-        <li>
-          <Link to="/chunkable">Go to Chunkable</Link>
-        </li>
-        <li>
-          <Link to="/unchunkable">Go to Un-chunkable</Link>
-        </li>
-      </ul>
-    </div>
-  );
+export default function Index({ loaderData }: Route.ComponentProps) {
+  return <h1>Hello, {loaderData.planet}!</h1>;
 }
diff --git a/playground/compiler/app/routes/product.tsx b/playground/compiler/app/routes/product.tsx
new file mode 100644
index 0000000000..a2fb85e1f4
--- /dev/null
+++ b/playground/compiler/app/routes/product.tsx
@@ -0,0 +1,9 @@
+import type * as Route from "./+types.product";
+
+export function loader({ params }: Route.LoaderArgs) {
+  return { name: `Super cool product #${params.id}` };
+}
+
+export default function Component({ loaderData }: Route.ComponentProps) {
+  return <h1>{loaderData.name}</h1>;
+}
diff --git a/playground/compiler/package.json b/playground/compiler/package.json
index 8dfd304392..1c0efa9e8a 100644
--- a/playground/compiler/package.json
+++ b/playground/compiler/package.json
@@ -8,7 +8,7 @@
     "build": "react-router build",
     "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
-    "typecheck": "tsc"
+    "typecheck": "react-router typegen && tsc"
   },
   "dependencies": {
     "@react-router/node": "workspace:*",
diff --git a/playground/compiler/tsconfig.json b/playground/compiler/tsconfig.json
index a2d574ae2c..a331d01af8 100644
--- a/playground/compiler/tsconfig.json
+++ b/playground/compiler/tsconfig.json
@@ -5,7 +5,8 @@
     "**/.server/**/*.ts",
     "**/.server/**/*.tsx",
     "**/.client/**/*.ts",
-    "**/.client/**/*.tsx"
+    "**/.client/**/*.tsx",
+    "./.react-router/types/**/*"
   ],
   "compilerOptions": {
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
@@ -25,6 +26,8 @@
     "paths": {
       "~/*": ["./app/*"]
     },
-    "noEmit": true
+    "noEmit": true,
+    "plugins": [{ "name": "@react-router/dev" }],
+    "rootDirs": [".", "./.react-router/types"]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1e2357a039..318d5e6b4c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,7 +171,7 @@ importers:
         version: 7.34.1(eslint@8.57.0)
       eslint-plugin-react-hooks:
         specifier: next
-        version: 5.0.0-canary-a4939017f-20240320(eslint@8.57.0)
+        version: 5.1.0-rc-5dcb0097-20240918(eslint@8.57.0)
       fs-extra:
         specifier: ^10.1.0
         version: 10.1.0
@@ -669,6 +669,9 @@ importers:
       chalk:
         specifier: ^4.1.2
         version: 4.1.2
+      chokidar:
+        specifier: ^4.0.0
+        version: 4.0.0
       dedent:
         specifier: ^1.5.3
         version: 1.5.3(babel-plugin-macros@3.1.0)
@@ -690,6 +693,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
       picocolors:
         specifier: ^1.0.0
         version: 1.0.0
@@ -768,7 +774,7 @@ importers:
         version: 16.4.5
       esbuild-register:
         specifier: ^3.3.2
-        version: 3.5.0(esbuild@0.19.12)
+        version: 3.5.0(esbuild@0.17.19)
       execa:
         specifier: 5.1.1
         version: 5.1.1
@@ -2287,6 +2293,7 @@ packages:
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
 
   '@humanwhocodes/module-importer@1.0.1':
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
@@ -2294,6 +2301,7 @@ packages:
 
   '@humanwhocodes/object-schema@2.0.3':
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
+    deprecated: Use @eslint/object-schema instead
 
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -3527,6 +3535,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  chokidar@4.0.0:
+    resolution: {integrity: sha512-mxIojEAQcuEvT/lyXq+jf/3cO/KoA6z4CeNDGGevTybECPOMFCnQy3OPahluUkbqgPNGw5Bi78UC7Po6Lhy+NA==}
+    engines: {node: '>= 14.16.0'}
+
   ci-info@3.8.0:
     resolution: {integrity: sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==}
     engines: {node: '>=8'}
@@ -4140,11 +4152,11 @@ packages:
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
 
-  eslint-plugin-react-hooks@5.0.0-canary-a4939017f-20240320:
-    resolution: {integrity: sha512-MVCG/rH+6+Q+rBDe1/HUXO8fBOR/9Ud/nnzArqEONGgTTgKe6yUWzp3rxiLAPqWSZ/mXkt0RvqcftwiNTOoIJw==}
+  eslint-plugin-react-hooks@5.1.0-rc-5dcb0097-20240918:
+    resolution: {integrity: sha512-Kx+m5yAm0w1RSpzo0vQ4aN7kIlM9bcAvWyCRWqS5HjxxnzChMAYg4a3fQlwxFvwZ3WkoHA9HecJUBRTf49L5ew==}
     engines: {node: '>=10'}
     peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
   eslint-plugin-react@7.34.1:
     resolution: {integrity: sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==}
@@ -4465,10 +4477,12 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.0.3:
     resolution: {integrity: sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -4641,6 +4655,7 @@ packages:
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -6201,6 +6216,10 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  readdirp@4.0.1:
+    resolution: {integrity: sha512-GkMg9uOTpIWWKbSsgwb5fA4EavTR+SG/PMPoAY8hkhHfEEY0/vqljY+XHqtDf2cr2IJtoNRDbrrEpZUiZCkYRw==}
+    engines: {node: '>= 14.16.0'}
+
   rechoir@0.6.2:
     resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
     engines: {node: '>= 0.10'}
@@ -6314,6 +6333,7 @@ packages:
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rndm@1.2.0:
@@ -11126,6 +11146,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chokidar@4.0.0:
+    dependencies:
+      readdirp: 4.0.1
+
   ci-info@3.8.0: {}
 
   cjs-module-lexer@1.2.2: {}
@@ -11672,10 +11696,10 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  esbuild-register@3.5.0(esbuild@0.19.12):
+  esbuild-register@3.5.0(esbuild@0.17.19):
     dependencies:
       debug: 4.3.4
-      esbuild: 0.19.12
+      esbuild: 0.17.19
     transitivePeerDependencies:
       - supports-color
 
@@ -11905,7 +11929,7 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-react-hooks@5.0.0-canary-a4939017f-20240320(eslint@8.57.0):
+  eslint-plugin-react-hooks@5.1.0-rc-5dcb0097-20240918(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
 
@@ -14675,6 +14699,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  readdirp@4.0.1: {}
+
   rechoir@0.6.2:
     dependencies:
       resolve: 1.22.8
diff --git a/templates/.gitignore b/templates/.gitignore
new file mode 100644
index 0000000000..00da837c3f
--- /dev/null
+++ b/templates/.gitignore
@@ -0,0 +1,4 @@
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+pnpm-lock.yml
diff --git a/templates/basic/.gitignore b/templates/basic/.gitignore
new file mode 100644
index 0000000000..80ec311f4f
--- /dev/null
+++ b/templates/basic/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env
diff --git a/templates/basic/README.md b/templates/basic/README.md
new file mode 100644
index 0000000000..08a5fb4148
--- /dev/null
+++ b/templates/basic/README.md
@@ -0,0 +1,40 @@
+# Welcome to React Router!
+
+- 📖 [React Router docs](https://reactrouter.com/dev)
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
diff --git a/templates/basic/app/app.css b/templates/basic/app/app.css
new file mode 100644
index 0000000000..87a5e2fb51
--- /dev/null
+++ b/templates/basic/app/app.css
@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+@theme {
+  --font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}
diff --git a/templates/basic/app/root.tsx b/templates/basic/app/root.tsx
new file mode 100644
index 0000000000..808d4298b0
--- /dev/null
+++ b/templates/basic/app/root.tsx
@@ -0,0 +1,39 @@
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+import type { LinksFunction } from "react-router";
+
+import "./app.css";
+
+export const links: LinksFunction = () => [
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
+  {
+    rel: "preconnect",
+    href: "https://fonts.gstatic.com",
+    crossOrigin: "anonymous",
+  },
+  {
+    rel: "stylesheet",
+    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/templates/basic/app/routes.ts b/templates/basic/app/routes.ts
new file mode 100644
index 0000000000..906cf68f0f
--- /dev/null
+++ b/templates/basic/app/routes.ts
@@ -0,0 +1,4 @@
+import type { RouteConfig } from "@react-router/dev/routes";
+import { index } from "@react-router/dev/routes";
+
+export const routes: RouteConfig = [index("routes/home.tsx")];
diff --git a/templates/basic/app/routes/home.tsx b/templates/basic/app/routes/home.tsx
new file mode 100644
index 0000000000..acd216304c
--- /dev/null
+++ b/templates/basic/app/routes/home.tsx
@@ -0,0 +1,96 @@
+import type { MetaFunction } from "react-router";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-16">
+        <header className="flex flex-col items-center gap-9">
+          <h1 className="leading text-2xl font-bold text-gray-800 dark:text-gray-100">
+            Welcome to <span className="sr-only">React Router</span>
+          </h1>
+          <div className="w-2xl max-w-[100vw] p-4 aspect-[920/96]">
+            <img
+              src="/logo-light.png"
+              alt="Remix"
+              className="block w-full dark:hidden"
+            />
+            <img
+              src="/logo-dark.png"
+              alt="Remix"
+              className="hidden w-full dark:block"
+            />
+          </div>
+        </header>
+        <nav className="flex flex-col items-center justify-center gap-4 rounded-3xl border border-gray-200 p-6 dark:border-gray-700">
+          <p className="leading-6 text-gray-700 dark:text-gray-200">
+            What&apos;s next?
+          </p>
+          <ul>
+            {resources.map(({ href, text, icon }) => (
+              <li key={href}>
+                <a
+                  className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
+                  href={href}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {icon}
+                  {text}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+}
+
+const resources = [
+  {
+    href: "https://reactrouter.com/dev",
+    text: "React Router Docs",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+        />
+      </svg>
+    ),
+  },
+  {
+    href: "https://rmx.as/discord",
+    text: "Join Discord",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="20"
+        viewBox="0 0 24 20"
+        fill="none"
+        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
+      >
+        <path
+          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
+          strokeWidth="1.5"
+        />
+      </svg>
+    ),
+  },
+];
diff --git a/templates/basic/package.json b/templates/basic/package.json
new file mode 100644
index 0000000000..21d43a35dc
--- /dev/null
+++ b/templates/basic/package.json
@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "react-router dev",
+    "build": "react-router build",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "0.0.0-nightly-8f12ed19a-20240924",
+    "@react-router/serve": "0.0.0-nightly-8f12ed19a-20240924",
+    "@tailwindcss/vite": "^4.0.0-alpha.24",
+    "isbot": "^5.1.17",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "0.0.0-nightly-8f12ed19a-20240924"
+  },
+  "devDependencies": {
+    "@react-router/dev": "0.0.0-nightly-8f12ed19a-20240924",
+    "@types/react": "^18.3.9",
+    "@types/react-dom": "^18.3.0",
+    "tailwindcss": "^4.0.0-alpha.24",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
+    "vite-tsconfig-paths": "^5.0.1"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}
diff --git a/templates/basic/public/favicon.ico b/templates/basic/public/favicon.ico
new file mode 100644
index 0000000000..5dbdfcddcb
Binary files /dev/null and b/templates/basic/public/favicon.ico differ
diff --git a/templates/basic/public/logo-dark.png b/templates/basic/public/logo-dark.png
new file mode 100644
index 0000000000..d83f2967dd
Binary files /dev/null and b/templates/basic/public/logo-dark.png differ
diff --git a/templates/basic/public/logo-light.png b/templates/basic/public/logo-light.png
new file mode 100644
index 0000000000..112570f10a
Binary files /dev/null and b/templates/basic/public/logo-light.png differ
diff --git a/templates/basic/tsconfig.json b/templates/basic/tsconfig.json
new file mode 100644
index 0000000000..a2d574ae2c
--- /dev/null
+++ b/templates/basic/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@react-router/node", "vite/client"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true
+  }
+}
diff --git a/templates/basic/vite.config.ts b/templates/basic/vite.config.ts
new file mode 100644
index 0000000000..761cd98178
--- /dev/null
+++ b/templates/basic/vite.config.ts
@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite";
+import { reactRouter } from "@react-router/dev/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ["react", "react-dom"],
+  },
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});