How we migrated from CRA to Next.js AppRouter in 5 pull requests

Description and use

Migrated a CRA project to Next.js AppRouter in five pull requests, improving routing and performance.

Problem

Migrating a Create React App (CRA) project to Next.js AppRouter to improve routing and performance.

Outcome

The migration completed in five pull requests, resulting in a cleaner routing structure, server‑side rendering, and improved performance.

Workflow

• 1. Replace CRA scripts with Next.js CLI and create a new app folder structure.
• 2. Migrate pages and components into the new app directory, converting routes to file‑based routes.
• 3. Update routing logic from React Router to Next.js AppRouter, removing client‑side navigation where possible.
• 4. Refactor data fetching to use Next.js server components and getServerSideProps / getStaticProps.
• 5. Test, fix breaking changes, and merge the final pull request.