lifecyclemigrate-from-nextjslisted
Install: claude install-skill guillempuche/engranatge
# 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`