LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 214 min read

History & Evolution of Next.js

Trace Next.js from its 2016 release through the Pages Router era to the modern App Router and React Server Components.

Origins

Next.js was released in October 2016 by Guillermo Rauch and the team at Zeit (later renamed Vercel). At the time, server-rendering a React app required stitching together Webpack, Babel, Express, and React yourself. Next.js packaged all of that into a single "npm install and go" tool.

The original pitch was simple: give React developers server-side rendering and file-based routing without the configuration headache. That simplicity is what drove its early adoption.

The Pages Router Era (2016–2022)

For its first several major versions, Next.js used what is now called the Pages Router: every file inside a `pages/` folder automatically became a route, and special functions like `getStaticProps` and `getServerSideProps` controlled how each page fetched its data. This model powered most production Next.js apps for six years.

Still Around

The Pages Router still exists and is fully supported — it just isn't the direction new features are built for. Many production apps you'll encounter still use it, so recognizing `pages/` folders and `getServerSideProps` is useful even though this course focuses on the modern App Router.

The Shift to the App Router

In 2022, Next.js 13 introduced the App Router (the `app/` directory) as an opt-in, and it became the recommended default from Next.js 13.4 onward. The App Router was built to take advantage of React Server Components — a new React capability that lets components render on the server by default, sending far less JavaScript to the browser.

What the App Router introduced:

  • React Server Components as the default component type.
  • Nested layouts that persist across navigations instead of re-rendering.
  • Built-in loading, error, and not-found states per route segment.
  • Server Actions for running server-side code straight from a form or button.
  • A unified, more powerful data-fetching model built around the native fetch API.

Timeline

YearMilestone
2016Next.js 1.0 released — file-based routing and SSR for React.
2017Automatic static optimization introduced.
2020Next.js 9.3 introduces getStaticProps / getStaticPaths (SSG).
2022Next.js 13 introduces the App Router and React Server Components (beta).
2023Next.js 13.4 — App Router becomes stable and the recommended default.
2023–2024Server Actions stabilize; Turbopack dev server matures.
2024–2025Continued investment in caching controls, partial prerendering, and performance.

FAQs

You don't need to start there. Learn the App Router first — it's the modern default — and pick up Pages Router concepts later if you maintain an older codebase.

No, it is still maintained and supported. It simply is not where new framework capabilities are being added.

Summary

Next.js grew from a simple SSR tool into a framework built around React Server Components and the App Router. Understanding this history explains why so many tutorials and job listings still mention both routers. Next, you'll look at why Next.js is worth learning today.

Next Lesson →

Why Learn Next.js?