skills.rest
rangojs
rangojsOFFICIAL
Explore all skills by this author →
GitHub

migrate-nextjs

Migrate Next.js App Router projects to the @rangojs/router React Server Components framework.

Updated Nov 7, 2025
Search Tags:#refactoring#migration#next.js#router#vite#react server components#rango
One-click install
npx skills add https://github.com/rangojs/rango --skill migrate-nextjs-rangojs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: migrate-nextjs
Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/migrate-nextjs
Command: npx skills add https://github.com/rangojs/rango --skill migrate-nextjs-rangojs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Porting a Next.js App Router application to @rangojs/router requires mapping dozens of file conventions, APIs, and rendering behaviors by hand, and mistakes like shimming next/* imports leave the migration incomplete. This Skill provides a systematic, route-by-route migration playbook with verified API mappings. ## Core Features & Use Cases - Import and API mapping: Replace every next/* import (Link, useRouter, cookies, revalidateTag, NextResponse) with the correct @rangojs/router equivalent, with a strict no-shim policy. - Route tree conversion: Translate file-based routes, dynamic segments, catch-alls, route groups, layouts, parallel routes, and intercepts into the urls()/path()/layout() DSL. - Rendering and caching parity: Map generateStaticParams, ISR, force-dynamic, and experimental_ppr to Prerender, Passthrough, cache(), and the ppr path option, plus tag-based invalidation with updateTag/revalidateTag. - Use Case: You have a Next.js dashboard app with middleware auth, dynamic product pages, and PPR. Follow the phased plan to convert middleware to router.use(), rebuild the route tree, and preserve partial prerendering behavior per route. ## Quick Start Migrate the Next.js app in ./my-app to @rangojs/router, starting with the route tree and replacing all next/* imports.

Frequently Asked Questions about migrate-nextjs

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

FAQPage Schema
How do I migrate a Next.js App Router project to Rango?▼

Work route-by-route, bottom-up: leaf pages first, then layouts, then middleware. Replace every next/* import with its @rangojs/router equivalent, convert file-based routes to path() definitions in a urls tree, and verify each route before moving on.

How do Next.js file-based routes map to Rango route definitions?▼

app/blog/[slug]/page.tsx becomes path("/blog/:slug", BlogPost, { name: "blogPost" }). Required catch-alls [...path] map to :path+ and optional catch-alls [[...slug]] map to :slug*, with the remainder delivered as a single slash-separated string.

Can I keep next/* imports working with shims or aliases during migration?▼

No. The migration explicitly forbids mock next/* modules, Vite aliases, or wrapper components, because shims freeze Next semantics into the app and hide unsupported behavior until runtime. Replace each import at its call site with the real Rango API.

Does Rango support Next.js partial prerendering (experimental_ppr)?▼

Yes, via the ppr path option, which caches the page shell and renders Suspense holes live per request. Existing Suspense trees carry over directly, and loaders with loading() provide guaranteed live holes; an app-level cache store is required.

What is the Rango equivalent of Next.js middleware.ts?▼

Use router.use() for request-wide middleware such as auth guards, since it wraps the entire request including server actions. The DSL middleware() only wraps rendering and does not protect actions on the route.

What are the limitations when moving a Next.js app to Cloudflare Workers with Rango?▼

Node-only APIs, native addons, node:* modules, and Node-specific SDK crypto or HTTP implementations will not run in workerd. The backend-host-swap audit covers runtime compatibility, RLS replacement, secret management, and cutover planning for host or datastore changes.

Related Skills

Explore More Software Engineering Skills→
Alfie728Alfie728

vercel-react-best-practices

Audit Next.js pages for data-fetching waterfalls and bundle bloat.

Community
Advanced
dubocduboc
1

strangler-conductor

Orchestrate API gateway routing, traffic shifts, and parity checks for mainframe cutovers.

Community
Advanced
kkudumukkudumu

ftm-audit

Automate ftm-audit wiring checks from static analysis to runtime verification.

Community
Advanced
guillempucheguillempuche

lifecycle/migrate-from-nextjs

Migrate a Next.js App Router application to TanStack Start.

Community
Advanced