Next.js Pages to App Router Migration Guide

Upgrading to the App Router ArchitectureThe Next.js App Router introduces a paradigm shift in React web development. Built around React Server Components (RSC), it allows pages to render on the server by default, lowering JS bundle sizes sent to users.If you are migrating a legacy system from the /pages directory to /app, here is the technical blueprint.---Page vs Layout ArchitectureIn the legacy structure, layouts were managed inside custom _app.js wrappers. In the App Router, layouts are nested files (layout.tsx) that preserve state across navigations:* layout.tsx: Defines the shared UI (navigation, sidebars, footer) and injects global metadata schemas.* page.tsx: The main route view, executing asynchronous data fetching directly within the server component.---Transitioning Data Fetching MethodsThe old methods are replaced with native async/await calls directly inside Server Components:typescript// Legacy: pages/blog.tsx// Uses getStaticProps() or getServerSideProps()// Modern: app/blog/page.tsxexport default async function BlogPage() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); return ( {posts.map(post => {post.title})} );}This migration guarantees faster load times, optimized server-side caching, and better Core Web Vitals.