TanStack-dev · xiaoyu2er · May 6, 2025 · Apr 19, 2025 · Apr 19, 2025 · Apr 21, 2025
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -1,9 +1,5 @@
 'package: arktype-adapter':
   - 'packages/arktype-adapter/**/*'
-'package: create-router':
-  - 'packages/create-router/**/*'
-'package: create-start':
-  - 'packages/create-start/**/*'
 'package: directive-functions-plugin':
   - 'packages/directive-functions-plugin/**/*'
 'package: eslint-plugin-router':

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -15,6 +15,7 @@ concurrency:
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+  SERVER_PRESET: 'node-server'
 
 permissions:
   contents: write

diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -9,6 +9,7 @@ concurrency:
 
 env:
   NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+  SERVER_PRESET: 'node-server'
 
 permissions:
   contents: read

diff --git a/docs/router/framework/react/quick-start.md b/docs/router/framework/react/quick-start.md
@@ -14,7 +14,7 @@ File based route generation (through Vite, and other supported bundlers) is the
 npx create-tsrouter-app@latest my-app --template file-router
 ```
 
-See [create-tsrouter-app](https://github.com/TanStack/create-tsrouter-app) for more options.
+See [create-tsrouter-app](https://github.com/TanStack/create-tsrouter-app/tree/main/cli/create-tsrouter-app) for more options.
 
 ### Manual Setup
 

diff --git a/docs/router/framework/react/routing/file-naming-conventions.md b/docs/router/framework/react/routing/file-naming-conventions.md
@@ -11,6 +11,7 @@ File-based routing requires that you follow a few simple file naming conventions
 | **`$` Token**                      | Route segments with the `$` token are parameterized and will extract the value from the URL pathname as a route `param`.                                                                                                                                                                                                                                                        |
 | **`_` Prefix**                     | Route segments with the `_` prefix are considered to be pathless layout routes and will not be used when matching its child routes against the URL pathname.                                                                                                                                                                                                                    |
 | **`_` Suffix**                     | Route segments with the `_` suffix exclude the route from being nested under any parent routes.                                                                                                                                                                                                                                                                                 |
+| **`-` Prefix**                     | Files and folders with the `-` prefix are excluded from the route tree. They will not be added to the `routeTree.gen.ts` file and can be used to colocate logic in route folders.                                                                                                                                                                                               |
 | **`(folder)` folder name pattern** | A folder that matches this pattern is treated as a **route group**, preventing the folder from being included in the route's URL path.                                                                                                                                                                                                                                          |
 | **`index` Token**                  | Route segments ending with the `index` token (before any file extensions) will match the parent route when the URL pathname matches the parent route exactly. This can be configured via the `indexToken` configuration option, see [options](../../../api/file-based-routing.md#indextoken).                                                                                   |
 | **`.route.tsx` File Type**         | When using directories to organise routes, the `route` suffix can be used to create a route file at the directory's path. For example, `blog.post.route.tsx` or `blog/post/route.tsx` can be used as the route file for the `/blog/post` route. This can be configured via the `routeToken` configuration option, see [options](../../../api/file-based-routing.md#routetoken). |

diff --git a/docs/router/framework/react/routing/route-trees.md b/docs/router/framework/react/routing/route-trees.md
@@ -4,15 +4,12 @@ title: Route Trees
 
 TanStack Router uses a nested route tree to match up the URL with the correct component tree to render.
 
-To build a route tree, TanStack Router supports both:
+To build a route tree, TanStack Router supports:
 
-- File-Based Routing
-- Code-Based Routing
+- [File-Based Routing](./file-based-routing.md)
+- [Code-Based Routing](./code-based-routing.md)
 
-Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reasons, **file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing**
-
-For code-based routing documentation, please see
-the [Code-Based Routing](./code-based-routing.md) guide.
+Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reason, **file-based routing is the preferred and recommended way** to configure TanStack Router. Most of the documentation is written from the perspective of file-based routing.
 
 ## Route Trees
 

diff --git a/docs/router/framework/react/routing/routing-concepts.md b/docs/router/framework/react/routing/routing-concepts.md
@@ -318,6 +318,50 @@ The following table shows which component will be rendered based on the URL:
 - The `posts.$postId.tsx` route is nested as normal under the `posts.tsx` route and will render `<Posts><Post>`.
 - The `posts_.$postId.edit.tsx` route **does not share** the same `posts` prefix as the other routes and therefore will be treated as if it is a top-level route and will render `<PostEditor>`.
 
+## Excluding Files and Folders from Routes
+
+Files and folders can be excluded from route generation with a `-` prefix attached to the file name. This gives you the ability to colocate logic in the route directories.
+
+Consider the following route tree:
+
+```
+routes/
+├── posts.tsx
+├── -posts-table.tsx // 👈🏼 ignored
+├── -components/ // 👈🏼 ignored
+│   ├── header.tsx // 👈🏼 ignored
+│   ├── footer.tsx // 👈🏼 ignored
+│   ├── ...
+```
+
+We can import from the excluded files into our posts route
+
+```tsx
+import { createFileRoute } from '@tanstack/react-router'
+import { PostsTable } from './-posts-table'
+import { PostsHeader } from './-components/header'
+import { PostsFooter } from './-components/footer'
+
+export const Route = createFileRoute('/posts')({
+  loader: () => fetchPosts(),
+  component: PostComponent,
+})
+
+function PostComponent() {
+  const posts = Route.useLoaderData()
+
+  return (
+    <div>
+      <PostsHeader />
+      <PostsTable posts={posts} />
+      <PostsFooter />
+    </div>
+  )
+}
+```
+
+The excluded files will not be added to `routeTree.gen.ts`.
+
 ## Pathless Route Group Directories
 
 Pathless route group directories use `()` as a way to group routes files together regardless of their path. They are purely organizational and do not affect the route tree or component tree in any way.

diff --git a/docs/router/framework/solid/quick-start.md b/docs/router/framework/solid/quick-start.md
@@ -14,7 +14,7 @@ File based route generation (through Vite, and other supported bundlers) is the
 npx create-tsrouter-app@latest my-app --framework solid --template file-router
 ```
 
-See [create-tsrouter-app](https://github.com/TanStack/create-tsrouter-app) for more options.
+See [create-tsrouter-app](https://github.com/TanStack/create-tsrouter-app/tree/main/cli/create-tsrouter-app) for more options.
 
 ### Manual Setup
 

diff --git a/docs/start/config.json b/docs/start/config.json
@@ -209,6 +209,21 @@
           ]
         }
       ]
+    },
+    {
+      "label": "Tutorials",
+      "children": [],
+      "frameworks": [
+        {
+          "label": "react",
+          "children": [
+            {
+              "label": "Reading and Writing a File",
+              "to": "framework/react/reading-writing-file"
+            }
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/docs/start/framework/react/api-routes.md b/docs/start/framework/react/api-routes.md
@@ -7,7 +7,7 @@ API Routes are a powerful feature of TanStack Start that allow you to create ser
 
 By default, API Routes are defined in your `./app/routes/api` directory of your project and are automatically handled by the TanStack Start server.
 
-> 🧠 This means that by default, your API Routes will be prefixed with `/api` and will be served from the same server as your application. You can customize this base path by changing the `server.apiBaseURL` in your TanStack Start config.
+> 🧠 This means that by default, your API Routes will be prefixed with `/api` and will be served from the same server as your application. You can customize this base path by changing the `tsr.apiBase` in your TanStack Start config.
 
 ## File Route Conventions
 

diff --git a/docs/start/framework/react/build-from-scratch.md b/docs/start/framework/react/build-from-scratch.md
@@ -30,16 +30,16 @@ npm init -y
 
 We highly recommend using TypeScript with TanStack Start. Create a `tsconfig.json` file with at least the following settings:
 
-```jsonc
+```json
 {
   "compilerOptions": {
     "jsx": "react-jsx",
     "moduleResolution": "Bundler",
     "module": "ESNext",
     "target": "ES2022",
     "skipLibCheck": true,
-    "strictNullChecks": true,
-  },
+    "strictNullChecks": true
+  }
 }
 ```
 

diff --git a/docs/start/framework/react/hosting.md b/docs/start/framework/react/hosting.md
@@ -63,7 +63,7 @@ Or you can use the `--preset` flag with the `build` command to specify the deplo
 npm run build --preset netlify
 ```
 
-Deploy you application to Netlify using their one-click deployment process, and you're ready to go!
+Deploy your application to Netlify using their one-click deployment process, and you're ready to go!
 
 ### Vercel
 
@@ -86,7 +86,7 @@ Or you can use the `--preset` flag with the `build` command to specify the deplo
 npm run build --preset vercel
 ```
 
-Deploy you application to Vercel using their one-click deployment process, and you're ready to go!
+Deploy your application to Vercel using their one-click deployment process, and you're ready to go!
 
 ### Cloudflare Pages
 
@@ -127,7 +127,7 @@ compatibility_flags = ["nodejs_compat"]
 compatibility_date = "2024-11-13"
 ```
 
-Deploy you application to Cloudflare Pages using their one-click deployment process, and you're ready to go!
+Deploy your application to Cloudflare Pages using their one-click deployment process, and you're ready to go!
 
 ### Node.js
 

diff --git a/docs/start/framework/react/middleware.md b/docs/start/framework/react/middleware.md
@@ -263,7 +263,7 @@ const requestLogger = createMiddleware()
 
 ## Reading/Modifying the Server Response
 
-Middleware that uses the `server` method executes in the same context as server functions, so you can follow the exact same [Server Function Context Utilities](./server-functions#server-function-context) to read and modify anything about the request headers, status codes, etc.
+Middleware that uses the `server` method executes in the same context as server functions, so you can follow the exact same [Server Function Context Utilities](../server-functions#server-function-context) to read and modify anything about the request headers, status codes, etc.
 
 ## Modifying the Client Request
 

diff --git a/docs/start/framework/react/overview.md b/docs/start/framework/react/overview.md
@@ -68,6 +68,15 @@ TanStack Start is not for you if:
 
 TanStack works closely with our partners to provide the best possible developer experience while also providing solutions that work anywhere and are vetted by industry experts. Each of our partners plays a unique role in the TanStack ecosystem:
 
+- **Clerk**
+  <a href="https://go.clerk.com/wOwHtuJ" alt="Clerk Logo">
+  <picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-dark.svg" style="height: 40px;">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
+  <img alt="Clerk logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
+  </picture>
+  </a>
+  The best possible authentication experience for modern web applications, including TanStack Start applications. Clerk provides TanStack Start users with first-class integrations and solutions to auth and collaborates closely with the TanStack team to ensure that TanStack Start provides APIs that are up to date with the latest in auth best practices.
 - **Netlify**
   <a href="https://www.netlify.com?utm_source=tanstack" alt="Netlify Logo">
   <picture>
@@ -77,15 +86,15 @@ TanStack works closely with our partners to provide the best possible developer
   </picture>
   </a>
   The leading hosting platform for web applications that provides a fast, secure, and reliable environment for deploying your web applications. We work closely with Netlify to ensure that TanStack Start applications not only deploy seamlessly to their platform, but also implement best practices for performance, security, and reliability regardless of where you end up deploying.
-- **Clerk**
-  <a href="https://go.clerk.com/wOwHtuJ" alt="Clerk Logo">
+- **Neon**
+  <a href="https://neon.tech?utm_source=tanstack" alt="Neon Logo">
   <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-dark.svg" style="height: 40px;">
-  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
-  <img alt="Convex logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/clerk-logo-light.svg" style="height: 40px;">
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-dark.svg" style="height: 60px;">
+  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-light.svg" style="height: 60px;">
+  <img alt="Neon logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/neon-light.svg" style="height: 60px;">
   </picture>
   </a>
-  The best possible authentication experience for modern web applications, including TanStack Start applications. Clerk provides TanStack Start users with first-class integrations and solutions to auth and collaborates closely with the TanStack team to ensure that TanStack Start provides APIs that are up to date with the latest in auth best practices.
+  A serverless, autoscaling Postgres solution purpose-built for modern full-stack apps. Neon offers rich integration opportunities with TanStack Start, including server functions and database-backed routing. Together, we’re simplifying the database experience for developers using TanStack.
 - **Convex**
   <a href="https://convex.dev?utm_source=tanstack" alt="Convex Logo">
   <picture>
@@ -100,7 +109,7 @@ TanStack works closely with our partners to provide the best possible developer
   <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/sentry-wordmark-light.svg" style="height: 60px;">
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/sentry-wordmark-dark.svg" style="height: 60px;">
-  <img alt="Convex logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/sentry-wordmark-light.svg" style="height: 60px;">
+  <img alt="Sentry logo" src="https://raw.githubusercontent.com/tanstack/tanstack.com/main/app/images/sentry-wordmark-light.svg" style="height: 60px;">
   </picture>
   </a>
   A powerful, full-featured observability platform that integrates seamlessly with TanStack Start. Sentry helps developers monitor and fix crashes in real-time and provides insights into your application's performance and error tracking. Sentry collaborates closely with the TanStack team to ensure that TanStack Start provides APIs that are up to date with the latest in observability best practices.