lifecycle/migrate-from-nextjs

Migrate Next.js App Router projects to TanStack Start routes and data patterns.

4|1|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill lifecycle-migrate-from-nextjs-lespaceman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lifecycle/migrate-from-nextjs
Source: https://github.com/lespaceman/athena-workflow-marketplace/tree/main/plugins/tanstack-start/skills/upstream/%40tanstack/react-start/skills/lifecycle/migrate-from-nextjs
Command: npx skills add https://github.com/lespaceman/athena-workflow-marketplace --skill lifecycle-migrate-from-nextjs-lespaceman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Migration from Next.js App Router to TanStack Start is often manual and error-prone; this Skill provides a structured approach to translate routes, layouts, actions, and data flows.

Core Features & Use Cases

  • Provides a step-by-step migration plan covering pages, routes, server functions, middleware, and metadata.
  • Demonstrates concrete mapping patterns and incremental adoption to reduce risk in large codebases.
  • Supports validation of migration results and isomorphic behavior with TanStack Start.

Quick Start

Begin by applying the step-by-step migration outline to convert a sample Next.js app from app/ to src/routes/ using TanStack Start conventions.

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?

To migrate Next.js App Router projects to TanStack Start, translate page routes, layouts, and data-fetching patterns from the app/ directory into src/routes/ using Start conventions, replacing Next.js primitives with Start equivalents.

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

The best way to convert Next.js server actions to TanStack Start is enforcing server function usage. This translates server actions and data loading to Start equivalents, maintaining isomorphic execution and server-side logic.

Can I incrementally migrate a large Next.js codebase to TanStack Start?

Yes, you can incrementally migrate a large Next.js codebase to TanStack Start. The approach uses concrete mapping patterns and incremental adoption steps to reduce risk and validate correctness across the project.

How does middleware translation work when moving from Next.js to TanStack Start?

Middleware translation works by mapping Next.js middleware to TanStack Start primitives. The migration scope covers middleware, server functions, and SEO metadata to ensure isomorphic behavior is preserved.

Does this migration approach handle SEO metadata translation from Next.js?

Yes, this migration handles SEO metadata translation from Next.js. The scope covers SEO metadata across a typical project, ensuring data loading and metadata generation correctly map to their TanStack Start equivalents.

How do I validate correctness after migrating Next.js data loading to TanStack Start?

You validate correctness after migrating Next.js data loading by applying the provided migration checklist. This validates correctness and performance, ensuring isomorphic behavior with TanStack Start primitives.