Next.js App Router: Complete Migration Guide

1-minute read
nextjs • app-router • react • full-stack

Migrating from Pages Router to App Router unlocks RSC, layouts, and improved data fetching-but requires deliberate planning.

Folder Structure

app/
  layout.tsx      # Root layout
  page.tsx        # /
  blog/
    [slug]/
      page.tsx    # /blog/:slug
  api/
    hello/
      route.ts    # Route Handlers

Data Fetching

Replace getServerSideProps with async Server Components. Replace getStaticProps with fetch and revalidate options. Client data still uses SWR or React Query in Client Components.

Incremental Migration

Next.js supports both routers in one project. Migrate route-by-route. Update Link and useRouter imports from next/navigation.

Common Pitfalls

Forgetting 'use client' on interactive components. Passing non-serializable props to Client Components. Misconfigured metadata exports for SEO.

Conclusion

Migration is a marathon, not a sprint. Prioritize high-traffic routes and measure bundle size and TTFB before and after.