Migration Patterns

18. Migration Patterns

You will be asked about migrations constantly. Know these patterns.

18.1 Create React App → Next.js App Router

The most common migration request. CRA is end-of-life.

Phases:

1. Add Next.js alongside CRA (incremental adoption)
2. Move routes one by one (/login, /dashboard)
3. Identify SSG vs ISR vs SSR per route
4. Replace API calls with Server Components where possible
5. Add Middleware for auth (replace manual route guards)
6. Migrate to Next.js Image, Font, and Link

18.2 Gatsby → Next.js

• Gatsby's GraphQL data layer → Server Components with direct data fetching
• Gatsby static generation → Next.js SSG/ISR
• Gatsby plugins → Next.js equivalents or direct integrations

18.3 Self-hosted Next.js → Vercel

Common with teams running Next.js on AWS, GCP, or their own servers.

What they gain:

• ISR that actually distributes globally (self-hosted ISR is single-region)
• Preview deployments (impossible on self-hosted without significant tooling)
• Zero-config builds
• Skew protection
• Automatic image optimisation at the CDN level

Migration: Usually zero code changes. Point DNS to Vercel.

18.4 Pages Router → App Router

The most common Next.js-specific migration:

• Incremental — migrate one route at a time
• pages/ and app/ directories coexist
• Data fetching changes: getServerSideProps → async Server Components, getStaticProps → SSG Server Components