lifecyclemigrate-from-nextjs
FeaturedStep-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.
Web & Frontend 14,776 stars
1755 forks Updated yesterday MIT
Install
Quality Score: 99/100
Stars 20%
Recency 20%
Frontmatter 20%
Documentation 15%
Issue Health 10%
License 10%
Description 5%
Skill Content
# Migrate from Next.js App Router to TanStack Start
This is a step-by-step migration checklist. Complete tasks in order.
> **CRITICAL**: TanStack Start is isomorphic by default. ALL code runs in both environments unless you use `createServerFn`. This is the opposite of Next.js Server Components, where code is server-only by default.
> **CRITICAL**: TanStack Start uses `createServerFn`, NOT `"use server"` directives. Do not carry over any `"use server"` or `"use client"` directives.
> **CRITICAL**: Types are FULLY INFERRED in TanStack Router/Start. Never cast, never annotate inferred values.
## Pre-Migration
- [ ] **Create a migration branch**
```bash
git checkout -b migrate-to-tanstack-start
```
- [ ] **Install TanStack Start**
```bash
npm i @tanstack/react-start @tanstack/react-router
npm i -D vite @vitejs/plugin-react
```
- [ ] **Remove Next.js**
```bash
npm uninstall next @next/font @next/image
```
## Concept Mapping
| Next.js App Router | TanStack Start |
| -------------------------------- | ------------------------------------------------------------------------- |
| `app/page.tsx` | `src/routes/index.tsx` |
| `app/layout.tsx` | `src/routes/__root.tsx` |
| `app/posts/[id]/page.tsx` | `src/routes/posts/$postId.tsx` ...
Details
- Author
- TanStack
- Repository
- TanStack/router
- Created
- 7 years ago
- Last Updated
- yesterday
- Language
- TypeScript
- License
- MIT
Integrates with
Similar Skills
Semantically similar based on skill content — not just same category
Web & Frontend Listed
lifecyclemigrate-from-nextjs
Step-by-step migration from Next.js App Router to TanStack Start: route definition conversion, API mapping, server function conversion from Server Actions, middleware conversion, data fetching pattern changes.
0 Updated 3 months ago
guillempuche AI & Automation Listed
tanstack-start
TanStack Start, Router, Query, and Server Functions patterns and best practices for this project.
57 Updated today
dlupiak Web & Frontend Solid
bun-tanstack-start
TanStack Start full-stack React framework with Bun runtime. Use for TanStack Router, server functions, vinxi, or encountering SSR, build, preset errors.
185 Updated 1 weeks ago
secondsky