Migrating to Next.js App Router: Lessons Learned

The Next.js App Router represents a fundamental shift in how we build React applications. Here's what I learned migrating a production app.

Why Migrate?

The App Router offers significant benefits:

• **Server Components**: Reduced client bundle size
• **Streaming**: Faster perceived load times
• **Simplified Data Fetching**: No more getServerSideProps
• **Nested Layouts**: Better code organization

Migration Strategy

Don't try to migrate everything at once. The Pages and App routers can coexist.

1. Start with new features in App Router
2. Migrate simple pages first
3. Gradually move complex pages
4. Remove Pages Router when complete

Key Differences

Data Fetching

In Pages Router, you use getServerSideProps or getStaticProps. In App Router, fetch directly in Server Components. The framework handles caching and deduplication.

Layouts

App Router's nested layouts eliminate the need for layout components in every page. Define layouts once and they wrap all child routes.

Client Components

By default, components are Server Components. Add 'use client' directive when you need interactivity, hooks, or browser APIs.

Common Pitfalls

• **Hydration Mismatches**: Server and client rendering must match
• **Cookie/Header Access**: Use next/headers, available only in Server Components
• **useRouter Changes**: Import from next/navigation, not next/router
• **Loading States**: Use loading.tsx for Suspense boundaries

Performance Wins

After migration: - Initial JS bundle: -45% - Time to Interactive: -30% - Lighthouse Performance: +15 points

The App Router is the future of Next.js. Start migrating today to take advantage of these improvements.