CRA to App Router in 5 Steps: A Case Study with Graphite
summary
Graphite migrates a sprawling TypeScript monorepo from CRA to Next.js in 5 PRs using the new App Router. Concrete changes: add local SSL proxy to restore HTTPS, swap in SVGr and refactor SVG imports, rename pages to router pages and add layout.tsx/page.tsx, add next.config.js (disable images), inject SPA rewrite, update webpack and tests, guard window/document for SSR, add initial empty render to avoid hydration mismatches, and hash inline scripts for CSP compliance.
AI-written summary · about
chapters (11)
- 0:00Next.js migration at Graphite
- 0:46Migrating from CRA to Next.js
- 1:50Next.js vs SPAs differences
- 2:54Performance benefits of Next.js
- 5:03Five-step migration process
- 5:24HTTPS in local setup
- 6:05Handling SVG imports
- 6:46Refactoring folder structure
- 7:06Core migration changes
- 8:32Server-side rendering fixes
- 9:36Conclusion
related talks
10mGradual Migration Strategies for Next.js
57mRemix Your React Router Applications
10mRouting Reimagined: Upgrading to React Router v7
40mThe Remix Evolution: How React Router v7 Enables Fast and Resilient Apps
14mLearn Once, Route Anywhere
54mExploring the World of Remix: A Guide to Building Resilient and Performant Web Apps
19mMoving from a React SPA to Next
04mIntroducing Next.js App Router