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, minimizing code changes and enabling server‑side rendering.

Problem

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

Outcome

The migration was completed in five pull requests with no major regressions, enabling server‑side rendering and improved routing.

Workflow

• 1. Replace CRA’s index.html with Next.js _app.js and _document.js.
• 2. Move public assets to the public folder and adjust imports.
• 3. Convert React Router routes to file‑based routes under app/ directory.
• 4. Update API calls to use Next.js API routes or external endpoints.
• 5. Remove CRA‑specific scripts and update package.json to use Next.js scripts.

Evidence

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

Source

We replaced CRA’s index.html with Next.js _app.js and _document.js

Source

We moved public assets to the public folder and adjusted imports

Source

We converted React Router routes to file‑based routes under app/ directory

Source

We updated API calls to use Next.js API routes or external endpoints

Source

We removed CRA‑specific scripts and updated package.json to use Next.js scripts

Source