The Evolution of Next.js

With the release of Next.js 13, Vercel introduced the App Router (/app), a paradigm shift from the traditional Pages Router (/pages). The App Router brings React Server Components (RSC) to the forefront, enabling faster loads and smaller JavaScript bundles.

Key Differences

• Routing: Pages Router uses file-based routing where every file is a route. App Router uses folder-based routing, where only folders containing a page.tsx become public routes.
• Data Fetching: App Router drops getServerSideProps and getStaticProps in favor of native async/await inside Server Components.
• Layouts: App Router introduces nested layouts (layout.tsx) which preserve state across navigations and do not re-render unnecessarily.

React Server Components (RSC)

By default, all components in the App Router are Server Components. They render entirely on the server, sending only HTML to the client. If you need client-side interactivity (like useState or onClick), you must explicitly add the "use client" directive at the top of your file.

When to Migrate?

If you are starting a new project, start with the App Router. If you have a large, existing Pages Router app, Vercel allows incremental adoption. You can run both the /pages and /app directories simultaneously in the same project.