@tanstack/start package

[muhammad-paksi]

So now Tanstack Start has reached the RC stage. I'm currently migrating my NextJs project to Tanstack. During the process, I have a confusion, I asked AI for help, and I saw something new to me in the response: the package @tanstack/router. Have a look below.

import { createFileRoute, redirect, notFound } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'
import { getRequestHeader } from '@tanstack/start/server'

const checkSessionFn = createServerFn({ method: 'GET' }).handler(async () => {
  const authHeader = getRequestHeader('authorization')
  const cookieHeader = getRequestHeader('cookie')
  ...

Even in the migration process suggested on Migrate from Next.js, I was asked to install @tanstack/react-start but not @tanstack/start.

So, I was intrigued to check out the @tanstack/start page on npm, and I saw that you wrote,

🤫 we're cooking up something special!

May I know what you guys are planning to do?

[amasen02]

The confusion comes from a package reorganization that happened between early alpha prototypes and the current Release Candidate (RC) architecture.

---

1. Why AI suggested @tanstack/start

In the very first experimental alphas (early 2024), TanStack Start was structured as a single monolithic package named @tanstack/start. Most LLMs whose training cutoff covers that period learned those old import paths:

// ⚠️ Outdated early alpha syntax (what the AI suggested)
import { createServerFn } from '@tanstack/start'
import { getRequestHeader } from '@tanstack/start/server'

2. The Current RC Architecture

To support multiple frontend frameworks (React, Solid, and upcoming Vue/Svelte adapters)—mirroring how TanStack Query and Table work—the team decoupled Start into dedicated framework adapters:

• React projects: install and import from @tanstack/react-start
• Solid projects: install and import from @tanstack/solid-start
• Build plugins: @tanstack/start-plugin (integrated via Vite / Nitro)

The bare @tanstack/start package on npm is an official placeholder reserved by the core team for the future unified CLI / meta-starter once all adapters stabilize.

---

3. Current RC Equivalents for Your Next.js Migration

Here is how those exact session/header checks are written in @tanstack/react-start:

import { createFileRoute, redirect } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'
import { getWebRequest } from '@tanstack/react-start/server'

// Define the server function
export const checkSessionFn = createServerFn({ method: 'GET' }).handler(async () => {
  // Access standard Web Request headers
  const request = getWebRequest()
  const authHeader = request?.headers.get('authorization')
  const cookieHeader = request?.headers.get('cookie')

  if (!authHeader && !cookieHeader) {
    throw redirect({
      to: '/login',
    })
  }

  return { user: 'authenticated' }
})

// Use it in your route loader
export const Route = createFileRoute('/dashboard')({
  loader: async () => await checkSessionFn(),
  component: DashboardComponent,
})

function DashboardComponent() {
  return <div>Welcome to Dashboard</div>
}

Key takeaways:

1. Stick with @tanstack/react-start as shown in the official docs—do not install @tanstack/start.
2. Import createServerFn directly from @tanstack/react-start.
3. Use getWebRequest() from @tanstack/react-start/server to access incoming request headers, cookies, and URLs using standard Web APIs (Headers, Request).