Cra To Next Migration

Moving from Create React App to Next.js means rewiring your entire mental model, from client-side routing to server components, and this guide gives you 148 prioritized rules to do it systematically. It covers the critical path first (project setup, routing conversion, data fetching patterns) before diving into fonts and deployment minutiae. The gotchas section alone has 24 rules, which tells you this migration has sharp edges. One thing worth noting: it enforces Next.js 16.x or later and explicitly forbids 14.x or 15.x, so you're working with the latest patterns. If you're staring down a CRA codebase that needs SSR or better performance, this is basically a migration checklist with opinions baked in.

skills.sh installs: 929
GitHub stars: 14
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/migration-skills --skill cra-to-next-migration --agent claude-code

Installs into .claude/skills of the current project.

Files

CRA to Next.js Migration Guide

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.

When to Apply

Reference these guidelines when:

Migrating an existing CRA application to Next.js
Converting React Router routes to file-based routing
Adopting Server Components in a client-heavy app
Moving from client-side rendering to SSR/SSG
Updating environment variables for Next.js
Optimizing images and fonts with Next.js built-ins

Version Policy

Use Next.js 16.x or later. Do NOT use Next.js 14.x or 15.x.

Before starting migration, check the current latest version:

npm info next version

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.