lifecyclemigrate-from-nextjs

Featured

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.

Web & Frontend 14,498 stars 1697 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

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
today
Language
TypeScript
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Featured

devtools-app-setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

464 Updated 4 days ago
TanStack
Web & Frontend Solid

frontend-navigation

React Router v7 navigation - route definitions, SSR integration, auth guards, Link/Navigate patterns, layout nesting, and project conventions

27 Updated 1 months ago
aexol-studio
Testing & QA Solid

migrate-to-rstest

Migrate Jest or Vitest test suites and configs to Rstest. Use when asked to move from Jest/Vitest to Rstest, replace framework APIs with `@rstest/core`, translate test config to `rstest.config.ts`, or update test scripts and setup files for Rstest equivalents.

68 Updated today
rstackjs
Web & Frontend Solid

prototype-to-production

Convert design prototypes (HTML, CSS, Figma exports) into production-ready components. Analyzes prototype structure, extracts design tokens, identifies reusable patterns, and generates typed React components. Adapts to existing project tech stack with React + TypeScript as default.

322 Updated today
aiskillstore
Web & Frontend Featured

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

46,279 Updated today
CherryHQ