DevelopmentAvançado

CRA to Next.js Migration Guide

porvercel-labs·vercel-labs· v1.0.0 · atualizado em 2026-04-11

Score

Comprehensive guide for migrating Create React App (CRA) projects to Next.js. Use when migrating a CRA app, converting React Router to file-based routing, or adopting Next.js patterns like Server Components, App Router, or image optimization.

reactnextjsmigrationfrontendssrssgcreate-react-app

Linguagens

TypeScriptJavaScriptHTMLCSS

0Stars

0Forks

0Usos

Fork

Documento do Skill

SKILL.mdcra-to-next-migration/workflow

Setup Next.js Project: — Initialize a new Next.js project with the desired configuration (App Router, TypeScript, ESLint).

Migrate Dependencies: — Update dependencies in `package.json` to ensure compatibility with Next.js and React 19.

Convert Routing: — Replace React Router with Next.js file-based routing, including dynamic routes and layouts.

Implement Data Fetching: — Migrate data fetching logic from `useEffect` to Server Components or `getServerSideProps` / `getStaticProps` as appropriate.

Update Components: — Add `'use client'` directive for client components and ensure props are serializable.

Configure Styling: — Configure CSS Modules, Sass, or Tailwind CSS for styling.

Test and Verify: — Thoroughly test the migrated application to ensure functionality and performance.

Deploy: — Deploy the Next.js application to Vercel or another hosting platform.

Telemetria de Agentes

Execuções

total

Taxa de Sucesso

últimos 30d

Latência Média

0.0s

p50

Alucinação

0.0%

detecção

Tokens Entrada

avg 0/exec

Tokens Saída

avg 0/exec

Uso por Plataforma

Skills Relacionados

Similar a ←Magento 2 Hyva Specialist

60%

Similar a ←Wix Site Component Builder

60%

Similar a ←Wix Site Widget Builder

60%

Similar a ←Wix Site Plugin Builder

60%

Similar a ←SolidJS Development

60%

Similar a ←Vuetify0 Skill

60%

Similar a ←Nextjs15 Performance

60%

Similar a ←Next.js 16 Complete Guide

60%

Similar a ←PrimeVue Setup and Usage

60%

Similar a ←Next.js Shadcn UI Builder

60%

Similar a ←XState v5 Skill

60%

Similar a ←Hyvä Alpine Component

60%

Similar a ←Hyva CMS Component Creator

60%

Similar a ←Hyvä Child Theme Creator

60%

Similar a ←WebGPU Three.js with TSL

60%

Similar a ←GSAP Fundamentals

60%

Similar a ←Contrast Checker

60%

Similar a ←Tiptap Editor API Patterns

60%

Similar a ←Vite React Best Practices

60%

Similar a ←Gpui Async

60%

Similar a ←Next.js Best Practices

60%

Similar a ←React + Vite Expert

60%

Similar a ←Gpui Layout And Style

60%

Similar a ←Angular Performance

60%

Árvore do Skill

CRA to Next.js Migration Guide

cra-to-next-migration

Fases Cognitivas6

1.SENSE

2.CONTEXTUALIZE

3.RECOMMEND

4.ACT

5.EVALUATE

6.REFLECT

Triggers7

migrate cra to nextjsconvert create react app to nextjsupgrade react app to nextjsmove from cra to nextjsconvert react router to nextjs routingadopt nextjs in existing react appmigrate react application to nextjs framework

Avaliar este Skill

Score Breakdown

⭐Avaliação Humana0%

🤖Sucesso de Agentes0%

🕐Atualidade100%

🔗Saúde de Dependências100%

🕸️Centralidade no Grafo0%

🛡️Segurança50%

CompositeScore = α·Humano + β·Agente + γ·Recência + δ·Deps + ε·Centralidade + ζ·Segurança

Instalação

$ synaptic mcp download cra-to-next-migration

$ synaptic skills detail cra-to-next-migration

$ synaptic skills live cra-to-next-migration

Dependências

next react react-dom @types/react @types/node eslint eslint-config-next

Links

GitHub Repository