Upgrading to the App Router Architecture
The 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 Architecture
In 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 Methods
The 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.tsx
export 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.