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 with minimal code changes.

Problem

Migrating a Create‑React‑App (CRA) project to Next.js AppRouter while minimizing code changes and pull‑request size.

Outcome

The migration was completed in five pull requests with minimal disruption to the existing codebase, enabling server‑side rendering and improved routing.

Workflow

• 1. Create a new Next.js app with the AppRouter feature flag enabled.
• 2. Move existing React components and pages into the new app/ directory, adjusting import paths.
• 3. Replace CRA’s BrowserRouter with Next.js route files and use the new file‑based routing syntax.
• 4. Update any client‑side only code to use Next.js data fetching methods (e.g., getServerSideProps).
• 5. Verify build and run locally, then merge the changes in five small pull requests.

Evidence

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

Source

The migration was completed in five pull requests with minimal disruption to the existing codebase

Source