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

Description and use

The team migrated an application from Create React App to Next.js AppRouter in five pull requests, improving performance and project structure.

Problem

The team needed to replace the monolithic Create React App (CRA) setup with a more scalable, file‑based routing solution to improve performance and developer experience.

Outcome

The migration completed in five pull requests, resulting in faster page loads, simplified routing, and a cleaner project structure.

Workflow

• 1. Created a new Next.js project with the AppRouter feature enabled.
• 2. Moved the public assets and static files into the Next.js public folder.
• 3. Refactored the existing React components into the new app directory, creating page components for each route.
• 4. Updated the API calls to use Next.js API routes or external endpoints, removing the CRA proxy configuration.
• 5. Adjusted build scripts and removed CRA‑specific dependencies, then merged the changes in five incremental pull requests.

Evidence

We migrated from CRA to Next.js AppRouter in just five pull requests.

Source

The migration involved moving the public assets into the Next.js public folder and refactoring the existing components into the new app directory.

Source

We removed the CRA proxy configuration and updated API calls to use Next.js API routes or external endpoints.

Source