cra-to-next-migration
installsforks
How to install cra-to-next-migration?
vercel-labs/migration-skills/cra-to-next-migration
$npx -y skills add vercel-labs/migration-skills --skill cra-to-next-migrationcra-to-next-migration is an agent skill published from vercel-labs/migration-skills, installable through the skills CLI.
SKILL.md
| 1 | # CRA to Next.js Migration Guide |
| 2 | |
| 3 | Comprehensive migration guide for converting Create React App projects to Next.js, covering routing, data fetching, components, styling, and deployment. Contains 148 rules across 17 categories, prioritized by migration impact. After a successful migration the application should work the same as it did before the migration. |
| 4 | |
| 5 | ## When to Apply |
| 6 | |
| 7 | Reference these guidelines when: |
| 8 | |
| 9 | - Migrating an existing CRA application to Next.js |
| 10 | - Converting React Router routes to file-based routing |
| 11 | - Adopting Server Components in a client-heavy app |
| 12 | - Moving from client-side rendering to SSR/SSG |
| 13 | - Updating environment variables for Next.js |
| 14 | - Optimizing images and fonts with Next.js built-ins |
| 15 | |
| 16 | ## Version Policy |
| 17 | |
| 18 | **Use Next.js 16.x or later. Do NOT use Next.js 14.x or 15.x.** |
| 19 | |
| 20 | Before starting migration, check the current latest version: |
| 21 | |
| 22 | ```bash |
| 23 | npm info next version |
| 24 | ``` |
| 25 | |
| 26 | Use the latest version in your package.json with a caret for minor/patch updates. The minimum supported version for this migration guide is `^16.0.0`. |
| 27 | |
| 28 | ## Rule Categories by Priority |
| 29 | |
| 30 | | Priority | Category | Impact | Prefix | Rules | |
| 31 | | -------- | --------------------- | -------- | --------------- | ----- | |
| 32 | | 1 | Project Setup | CRITICAL | `setup-` | 6 | |
| 33 | | 2 | Dependencies | CRITICAL | `deps-` | 1 | |
| 34 | | 3 | Routing | CRITICAL | `routing-` | 17 | |
| 35 | | 4 | Data Fetching | CRITICAL | `data-` | 11 | |
| 36 | | 5 | Components | HIGH | `components-` | 9 | |
| 37 | | 6 | Environment Variables | HIGH | `env-` | 6 | |
| 38 | | 7 | Styling | HIGH | `styling-` | 12 | |
| 39 | | 8 | Public Assets | MEDIUM | `assets-` | 5 | |
| 40 | | 9 | Images | MEDIUM | `images-` | 8 | |
| 41 | | 10 | Fonts | MEDIUM | `fonts-` | 6 | |
| 42 | | 11 | SEO & Metadata | MEDIUM | `seo-` | 9 | |
| 43 | | 12 | API Routes | MEDIUM | `api-` | 9 | |
| 44 | | 13 | State Management | MEDIUM | `state-` | 8 | |
| 45 | | 14 | Integrations | MEDIUM | `integrations-` | 1 | |
| 46 | | 15 | Testing | LOW | `testing-` | 9 | |
| 47 | | 16 | Build & Deploy | LOW | `build-` | 7 | |
| 48 | | 17 | Common Gotchas | HIGH | `gotchas-` | 24 | |
| 49 | |
| 50 | ## Quick Reference |
| 51 | |
| 52 | ### 1. Project Setup (CRITICAL) |
| 53 | |
| 54 | - `setup-initial-structure` - Convert CRA folder structure to Next.js App Router |
| 55 | - `setup-package-json` - Update dependencies and scripts |
| 56 | - `setup-next-config` - Create and configure next.config.js |
| 57 | - `setup-typescript` - Migrate TypeScript configuration |
| 58 | - `setup-eslint` - Update ESLint for Next.js |
| 59 | - `setup-gitignore` - Update .gitignore for Next.js |
| 60 | |
| 61 | ### 2. Dependencies (CRITICAL) |
| 62 | |
| 63 | - `deps-react19-compatibility` - Upgrade dependencies for React 19 compatibility |
| 64 | |
| 65 | ### 3. Routing (CRITICAL) |
| 66 | |
| 67 | - `routing-basic-pages` - Convert components to file-based routes |
| 68 | - `routing-dynamic-routes` - Use [param] syntax for dynamic segments |
| 69 | - `routing-catch-all-routes` - Use [...slug] for catch-all routes |
| 70 | - `routing-optional-catch-all` - Use [[...slug]] for optional catch-all |
| 71 | - `routing-route-groups` - Use (group) folders for organization |
| 72 | - `routing-parallel-routes` - Use @slot for parallel routes |
| 73 | - `routing-intercepting-routes` - Use (..) for intercepting routes |
| 74 | - `routing-link-component` - Replace react-router Link with next/link |
| 75 | - `routing-programmatic-navigation` - Replace useNavigate with useRouter |
| 76 | - `routing-use-params` - Replace useParams with Next.js params |
| 77 | - `routing-use-search-params` - Replace useSearchParams properly |
| 78 | - `routing-nested-layouts` - Convert nested routes to layouts |
| 79 | - `routing-loading-states` - Add loading.tsx for suspense |
| 80 | - `routing-error-boundaries` - Add error.tsx for error handling |
| 81 | - `routing-not-found` - Add not-found.tsx for 404 pages |
| 82 | - `routing-hash-based` - Handle hash-based routing for client-only apps |
| 83 | - `routing-protected-routes` - Implement protected route patterns |
| 84 | |
| 85 | ### 4. Data Fetching (CRITICAL) |
| 86 | |
| 87 | - `data-useeffect-to-rsc` - Convert useEffect fetches to Server Components |
| 88 | - `data-useeffect-to-ssr` - Convert useEffect to getServerSideProps |
| 89 | - `data-useeffect-to-ssg` - Convert useEffect to getStaticProps |
| 90 | - `data-client-fetch` - Keep client fetches with proper patterns |
| 91 | - `data-server-actions` - Use Server Actions for mutations |
| 92 | - `data-revalidation` - Configure data revalidation strategies |
| 93 | - `data-streaming` - Use Suspense for streaming data |
| 94 | - `data-parallel-f |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
