lifecycle/migrate-from-nextjs

Migrate Next.js App Router projects to TanStack Start routes and server functions.

14.9k|1.8k|Updated Jan 14, 2019
One-click install
npx skills add https://github.com/TanStack/router --skill lifecycle-migrate-from-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lifecycle/migrate-from-nextjs
Source: https://github.com/TanStack/router/tree/main/packages/react-start/skills/lifecycle/migrate-from-nextjs
Command: npx skills add https://github.com/TanStack/router --skill lifecycle-migrate-from-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migrates Next.js App Router projects to TanStack Start by aligning route definitions, API routes, and server actions with TanStack Start patterns, enabling isomorphic execution and a unified dev experience.

Core Features & Use Cases

  • Route conversion: map app/pages and app/routes to TanStack Start route definitions and file naming conventions.
  • Server actions to server functions: convert form- and action-based logic into createServerFn-powered endpoints.
  • Middleware and data fetching: rewrite middleware, loaders, and data-fetch patterns for isomorphic execution and correct SSR behavior.
  • Use case: transitioning a real-world app with nested routes, server functions, and middleware to a unified TanStack Start structure.

Quick Start

Begin by listing all Next.js App Router routes, then implement corresponding TanStack Start routes and server functions following the migration guide.

Frequently Asked Questions about lifecycle/migrate-from-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate Next.js App Router routes to TanStack Start?

Migrating Next.js App Router routes to TanStack Start requires mapping your app/pages and app/routes directories to TanStack Start route definitions and file naming conventions. The migration process provides an end-to-end plan with code examples to ensure routing parity.

What is the best way to convert Next.js server actions to TanStack Start server functions?

Converting Next.js server actions to TanStack Start server functions involves transforming form- and action-based logic into createServerFn-powered endpoints. This adaptation maintains your data mutation workflows while enabling isomorphic execution across the unified TanStack structure.

How does middleware and data fetching migration work from Next.js to TanStack Start?

Migrating middleware and data fetching from Next.js to TanStack Start requires rewriting your middleware, loaders, and data-fetch patterns. This ensures correct SSR behavior and isomorphic execution within the TanStack Start architecture.

Can I achieve isomorphic execution and SSR parity when moving from Next.js to TanStack Start?

Yes, achieving isomorphic execution and SSR parity when moving from Next.js to TanStack Start is the core objective. The migration guide includes a checklist to verify routing parity, safe upgrades, and correct server-side rendering behavior across typical project structures.

What are the limitations of migrating a complex Next.js project structure to TanStack Start?

Migrating complex Next.js project structures with nested routes and middleware to TanStack Start requires careful adaptation of API routes and server functions. Limitations involve ensuring all data-fetch patterns are rewritten correctly to maintain isomorphic execution and routing parity without breaking SSR.