lunx.docs
DocsFrameworksTanStack Start

TanStack Start Adapter

Full-stack React with TanStack Router, type-safe server functions, streaming SSR, and first-class TanStack Query integration. File-based routing with full TypeScript end-to-end.

TanStack Start · Type-safe · Full-stack
100% type-safe

End-to-end TypeScript: route params, search params, loaders, and server functions are all typed.

File-based routing

routes/ directory with _layout.tsx and index.tsx files auto-generate the router tree.

Server functions

createServerFn() runs on the server and is called from client components with full type safety.

TanStack Query

First-class useQuery() and useMutation() integration with automatic prefetching via loaders.

Streaming SSR

Suspense-based streaming with defer() — initial HTML is fast, slow data streams in.

Type-safe links

<Link to='/posts/$id' params={{ id }} /> — path params are checked at compile time.

Setup

bash
npm create lunx-dev@latest my-tanstack-app -- --framework tanstack --ts
cd my-tanstack-app && npm install && npm run dev

Server function

typescriptsrc/functions/posts.ts
import { createServerFn }  from '@tanstack/start'
import { z }               from 'zod'

const PostSchema = z.object({
  title:   z.string().min(1),
  content: z.string().min(10),
})

// Runs on server — validated input, typed output
export const getPost = createServerFn('GET', async (postId: string) => {
  return await db.post.findUniqueOrThrow({ where: { id: postId } })
})

export const createPost = createServerFn('POST', async (input: unknown) => {
  const data = PostSchema.parse(input)
  return await db.post.create({ data })
})

Route with loader

typescriptsrc/routes/posts/$postId.tsx
import { createFileRoute }  from '@tanstack/react-router'
import { getPost }          from '../../functions/posts'

export const Route = createFileRoute('/posts/$postId')({
  // Runs before render — prefetches data server-side
  loader: async ({ params }) => getPost(params.postId),

  component: function PostPage() {
    const post = Route.useLoaderData()  // fully typed from loader return
    return (
      <article>
        <h1>{post.title}</h1>
        <div>{post.content}</div>
      </article>
    )
  }
})
Type-safe navigation
TanStack Router generates TypeScript types for every route. useNavigate(), <Link>, and route params are all checked at compile time — no more runtime 404s from typos in route paths.
PreviousAnalog AdapterNextWaku Adapter