A Brief History of React and NextJS

I am teaching React (and NextJS) for the first time (Sep-Dec 2025). I’ve played with several frameworks (Knockout, Angular, Vue, Svelte, and best of all Astro 🚀), but React was one that I decided to skip over. Why? Mostly, because the JavaScript world was a side interest and most of my day-time teaching revolved around C# and the Microsoft tech stack.

But,I’ve been making the transition to the JS world (and hoping we start teaching TypeScript) since about 2023. For the first time, I’m needing to teach React. And the demos I have are a bit old.

I wanted to know some history of React (especially breaking changes). Where could I learn about this? Why not use AI?…

The content on this page is written by ChatGPT. I haven’t had the time to validate it, so save your comments if you happen to know better. 😉

A Short History

Here’s a short history of both React and Next.js, grouped by associated major versions, with key changes for each. I skip the earliest minor versions and focus on more impactful milestones.

React + Next.js major version pairs

React 15 & Next.js (≈ 9.x)

React 15 (2016)

Focus on performance improvements, smaller bundle size, better support for large/complex UIs. (nuhmans.com)
Error boundaries weren’t yet in 15 (they came in 16), but this version laid groundwork. (nuhmans.com) Next.js around 9.x (2020)
In Next.js 9.2 (Jan 2020) introduced built-in CSS support for global and CSS modules, improved code splitting, and catch-all dynamic routes. (Next.js)
In 9.5 (July 2020) added Incremental Static Regeneration (ISR), rewrites & redirects – enabling pages to be updated after build. (DEV Community) Why group them? By the time Next.js 9 was mature, React was still in the pre-Hooks era and many larger architectural changes were yet to come.

React 16 & Next.js 10/11

React 16 (2017)

Introduced the “Fiber” architecture (new reconciliation engine) enabling improved concurrency, better scheduling, more robust updates. (nuhmans.com)
Added fragments, error boundaries, portals. (nuhmans.com) Next.js 10 (Oct 2020) / 11 (June 2021)
Next.js 11 introduced Webpack 5 support, better DX and tooling. (DEV Community)
Next.js 10 had earlier maturity in types, optimizations, but less dramatic than later versions. Key takeaway: This era was about stabilization and modernizing build tools, and React had shifted to its new engine.

React 17 & Next.js 12

React 17 (October 2020)

No major new features for developers (hence sometimes called “the upgrade for upgrades”). (This Dot Labs)
Changes under the hood: event system changed (handlers attached to root container instead of document) to allow gradual upgrades. (React) Next.js 12 (Oct 2021)
Introduced a Rust-based compiler infrastructure (SWC), improving build speed dramatically. (Next.js)
Experimental features: React Server Components support, HTTP streaming for SSR, ES Modules/URL imports. (Next.js) Why pair them? React 17 laid groundwork for smoother transitions; Next.js 12 brought in infrastructure changes that set the stage for new paradigms.

React 18 & Next.js 13

React 18 (March 2022)

Major features: Automatic batching (updates inside promises/timers get batched), Concurrent Rendering (opt-in), useId, useSyncExternalStore, improved Suspense support. (Medium) Next.js 13 (Oct 2022)
Introduced the new app/ directory (optional) with layouts, nested routing, React Server Components support, streaming, fetch caching APIs inside components. (Next.js)
Added Turbopack (Rust-based bundler) in alpha. (Next.js)
Breaking changes: minimum React bumped to 18.2.0, Node.js minimum bumped, changed next/link and next/image behavior etc. (nextjs.im) Significance: This is the era of rethinking how front-end apps are structured (data fetching, streaming, server components) and React’s concurrency features become more relevant.

React 19 & Next.js 14/15

React 19 (Dec 2024)

Introduced: Actions (to simplify state updates with async functions), new React DOM static APIs (prerender/prerenderToNodeStream) for streaming/static generation. (react.dev) Next.js 14 (Oct 2023) & Next.js 15 (Oct 2024)
Next.js 14 improved memory management on Edge Runtimes. (DEV Community)
Next.js 15: supports React 19, stable Turbopack for production builds, new caching models (Partial Pre-Rendering), and major performance bundler upgrades. (Next.js 15) Why this pairing? Next.js continued to push boundaries of server/client hybrid, edge capabilities and React introduced features that enable even more efficient server/client coordination.

Summary Table

React Version	Next.js Version	Key Changes
React 15	Next.js 9.x	Performance focus, ISR begins in Next.js
React 16	Next.js 10/11	Fiber engine, build tool upgrades
React 17	Next.js 12	Internal upgrades for smoother migration, Rust/SWC compiler
React 18	Next.js 13	Concurrent/reactive features; new app-dir, Server Components
React 19	Next.js 14/15	Streamlined state updates (Actions), production bundler overhaul, edge enhancements

A More Exhaustive Timeline

Here is a more exhaustive timeline of major versions for both React and Next.js, grouped by roughly associated version-eras, with key changes and release notes. This should help when planning migrations or understanding which features appeared when.

React version history

Based on major versions 15 → 16 → 17 → 18 → 19. (VersionLog)

React 15 (April 2016)

Release date: 7 Apr 2016. (VersionLog)
Focus: Improved performance, reduced bundle size, more stable render behaviour. (GeeksforGeeks)
Still using older reconciliation engine (pre-Fiber).
Error boundaries not yet built-in (added in React 16).

React 16 (September 2017)

Release date: 26 Sep 2017. (VersionLog)
Major underlying change: introduction of the “Fiber” architecture (new reconciliation engine) enabling incremental rendering, better handling of large trees, ability to pause/interrupt/resume tasks. (IJIRSET)
New features: error boundaries (catch JS errors in component tree), fragments (<>…</>), portals, support for returning arrays of elements.
Deprecated older lifecycle methods (some warnings).
Foundation set for later features like concurrent rendering.

React 17 (October 2020)

Release date: 20 Oct 2020. (VersionLog)
Characterised as a “stepping-stone” release: no major new developer-facing features, instead many under-the-hood changes to make upgrades easier, changed event system (handlers attach to root container rather than document) to facilitate incremental upgrades. (reddit.com)
New JSX transform supported: you no longer always need to import React when using JSX (with appropriate setup). (reddit.com)
Good version for gradual upgrades; less breaking change risk.

React 18 (March 2022)

Release date: 29 Mar 2022. (VersionLog)
Key features:
- Automatic batching of state updates: previously only batched inside React event handlers; React 18 batches updates even within promises/timeouts/fetches. (Fynd Academy)
- Concurrent Rendering (opt-in): allows React to prepare multiple versions of the UI, pause, interrupt, and resume work. (React)
- Transition API (startTransition, useTransition): ability to mark non-urgent updates so UI stays responsive. (Medium)
- Improved Suspense (data fetching support), selective hydration, improved SSR streaming support. (Mathionix)
Migration notes: need to use createRoot rather than ReactDOM.render, new root API. (AppSignal Blog)

React 19 (December 2024)

Release date: 5 Dec 2024. (VersionLog)
Features:
- Actions: for simplifying state updates via async functions (mentioned in blog posts).
- New React compiler / improved performance features (e.g., useEffectEvent(), view transitions) according to announcements. (Avolve.io)
Important: This version (19.x) is the basis for many of the latest frameworks (e.g., Next.js newer versions) to adopt.

Next.js version history

Based on major versions 9 → 10 → 11 → 12 → 13 → 14 → 15 → (16 upcoming) per official timeline. (EOL Support)

Next.js 9.x (July 2019)

Release date: 8 July 2019 for v9.0.0. (endoflife.date)
Key features:
- Hybrid rendering: automatic static optimisation (pages without data needs are static). (Magical Programmer)
- API routes (/pages/api) allow backend endpoints inside Next.js. (Magical Programmer)
- Later in v9.3 (March 2020) global Sass & CSS modules support. (DEV Community)
- In v9.5 (July 2020) Incremental Static Regeneration (ISR) (Pages generated at build + updated after through revalidate) + rewrites & redirects. (DEV Community)

Next.js 10 (October 2020)

Release date: 27 Oct 2020. (endoflife.date)
Key enhancements:
- Built-in image optimisation (<Image />) improvements.
- Internationalised routing support.
- Improved Typescript/ESLint tooling.
- Strengthening of static & server rendering patterns.
At this point the pairing with React 16/17 was dominant for many apps.

Next.js 11 (June 2021)

Release date: 15 June 2021. (EOL Support)
Highlights:
- Webpack 5 support became stable by default. (Wikipedia)
- Script optimisation (next/script), improved prefetching, faster builds, better DX.
- Closer alignment with React 17 upgrades.

Next.js 12 (October 2021)

Release date: 26 Oct 2021. (Next.js)
Major release, labelled by the team as “our biggest release ever”. Features:
- Rust compiler (via SWC) enabled by default for faster builds & refresh (~3× faster Fast Refresh, ~5× faster builds). (Next.js)
- Middleware (beta): ability to run code before request completes (edge functions, rewrites, authentication, etc.). (Next.js)
- Support for React 18 concurrent features (pre-preview) and Server Components (alpha) in Next.js. (Next.js)
- AVIF image support, native ES modules, URL imports.
Breaking changes: Webpack 4 removed; target config deprecated; minimum Node version bumped. (Next.js)

Next.js 13 (October 2022)

Release date: 26 Oct 2022. (EOL Support)
The “big paradigm shift” release:
- New app/ directory (App Router) optional, supporting nested layouts, server components, streaming, and new data-fetching patterns. (DEV Community)
- Integration of React Server Components (RSC) support.
- Introduction of Turbopack (in alpha) as successor to Webpack.
- Changed default behaviours for next/link, next/image, etc.
Later in v13.4 (May 2023) the App Router reached stable status. (Chris.lu)

Next.js 14 (October 2023)

Release date: 26 Oct 2023. (Medium)
Improvements:
- App Router is default/recommended; further enhancements to nested layouts, streaming, server components.
- Partial Pre-Rendering (PPR) support – hybrid of static + dynamic generation.
- Server Actions (experimental) – allow server-side logic to be invoked directly from components without separate API routes.
- Memory improvements for Edge Runtime.
Upgrade notes: e.g., removal of next export, changes in ImageResponse import path, removal of @next/font in favour of built-in next/font. (nextjs.im)

Next.js 15 (October 2024)

Release date: 21 Oct 2024. (endoflife.date)
Features:
- Full production support for Turbopack bundler (Rust-based) for builds—aiming at much faster compile/bundle times. (Avolve.io)
- Built-in support for React 19, aligning to latest React features (actions, improved compiler, etc.). (Avolve.io)
- Further improvements in caching, build adapters, edge support.
Migration considerations: Make sure to update peer dependencies for React and React-DOM accordingly.

Next.js 16 (October 2025)

Release date: 21 Oct 2025. (Next.js)
Current Active LTS version (as of Oct 2025). Features announced:
- Cache Components programming model (Partial Pre-Rendering + use cache, instant navigation).
- Turbopack stable as default bundler for all apps (with file-system caching).
- Built-in React Compiler support, improved routing and prefetching.
- React 19.2 support (view transitions, useEffectEvent(), <Activity/>).
Breaking changes: async route params support, image defaults changed, etc. (Next.js)

Summary — paired timeline with key changes

Below is a quick paired summary to show how React and Next.js versions align and what major features each era brought.

Era	React Version	Next.js Version	Key Feature Highlights
Early static/SSR era	React 15	Next.js 9.x	Static & SSR improved; Next.js adds API routes, ISR.
Build tool modernisation	React 16	Next.js 10/11	React adds Fiber engine; Next.js upgrades Webpack, improves optimisations.
Upgrade-ease era	React 17	Next.js 12	React lays groundwork; Next.js introduces Rust compiler, middleware, pre-React-18 features.
Concurrent/server-component era	React 18	Next.js 13	React adds concurrent features, transitions; Next.js adds App Router, RSC, streaming.
Stabilisation and bundler shift	React 19	Next.js 14/15	React adds Actions & compiler improvements; Next.js moves to Turbopack, full RSC usage, edge, caching.
Next generation	React 19.x & beyond	Next.js 16	Cache Components model, full Turbopack default, edge/runtime enhancements, full React-19 support.

Migration / Planning Notes

When upgrading React, check library ecosystem support (many libraries catch up after major React versions).
When upgrading Next.js, pay attention to: minimum Node version, removal/deprecation of features (e.g., next export in v14), routing changes (Pages Router → App Router), bundler changes (Webpack → Turbopack) and peer React versions.
Because Next.js often tightly aligns with specific React features (e.g., React 18 features and Next.js 12/13), the pairing above matters: using a new Next.js version may require upgrading React.
For large codebases, plan incremental upgrades (e.g., move to Next.js 12 first, then 13, then 14) rather than jumping many major versions in one go.
Always review the official “Upgrade” guide for each major Next.js version (e.g., Next.js docs for version 14). (nextjs.im)

A Tabular Breakdown

A combined historical overview of React and Next.js releases — including major and notable minor versions — showing important features, breaking changes, and migration guidance.

🧩 Detailed Version Timeline

Year	React Version	Notable React Changes	Next.js Version	Notable Next.js Changes	Migration / Notes
2016	15.0 – 15.6	• Improved performance, DOM diffing, smaller bundle size. • Still using Stack reconciler. • No error boundaries yet.	—	—	Pre-Fiber architecture; stable foundation for early React projects.
2017	16.0 (Sep)	• Fiber architecture overhaul. • Added Error Boundaries, Fragments, Portals. • Can return arrays from render. • Supports async rendering groundwork.	—	—	Fiber makes incremental rendering possible; minor API changes in lifecycles.
2018	16.3 → 16.8	• 16.3: Context API rewrite, StrictMode, createRef. • 16.8 (Feb 2019): Hooks API (`useState`, `useEffect`, etc.).	8.x (Mar 2019)	• Serverless target support. • Built-in dynamic routing.	Hooks revolutionized state logic. Next.js introduced flexible deployments.
2019	16.9 – 16.13	• Deprecations for unsafe lifecycles. • React DevTools Profiler. • Performance optimisations.	9.0 (Jul) → 9.5 (Jul 2020)	• API Routes. • Incremental Static Regeneration (ISR). • Built-in CSS/SASS Modules. • Improved dynamic routes.	React matured under Fiber; Next.js became a full hybrid SSR/SSG platform.
2020	17.0 (Oct)	• “No new features” release. • Updated event delegation system. • New JSX Transform (no need to import React).	10.0 (Oct)	• Image Optimization (`next/image`). • i18n routing. • Automatic static optimization improvements.	React 17 eased upgrades; Next.js 10 focused on better UX/DX.
2021	—	—	11.0 (Jun)	• Webpack 5 support. • `next/script` optimization. • Conformance (best-practice linting).	Prepares ground for React 18 concurrent features.
2021	18 Alpha	• Concurrent mode preview, new root API (`createRoot`).	12.0 (Oct)	• Rust compiler (SWC) for faster builds. • Middleware (edge). • React 18 features (experimental). • ES Modules / AVIF support.	Major infra overhaul; start preparing for concurrent rendering.
2022	18.0 (Mar)	• Concurrent rendering (opt-in). • Automatic batching. • `useId`, `useTransition`, `useDeferredValue`. • Improved Suspense + SSR streaming.	13.0 (Oct)	• App Router (`app/` dir, optional). • Server Components, streaming. • Turbopack (alpha). • New `next/link` & `next/image`.	The biggest paradigm shift since Fiber — server components meet concurrent rendering.
2023	18.2	• Minor updates, stabilizing Suspense SSR.	13.4 (May)	• App Router stable. • New `fetch` caching API, layouts, error/loading routes.	13.4 is the “go-live” moment for App Router. Recommended stable baseline for new projects.
2023	—	—	14.0 (Oct)	• App Router is default. • Partial Pre-Rendering (PPR). • Server Actions (experimental). • Memory optimizations, new fonts API.	Removes `next export`, moves fully to hybrid SSR model.
2024	19.0 (Dec)	• React Actions (async state updates). • useEffectEvent API. • View Transitions API. • New compiler (React Compiler).	15.0 (Oct)	• Turbopack stable for production. • Full React 19 support. • Enhanced caching, edge performance. • Streamlined build adapters.	Align upgrade: React 19 ⇄ Next.js 15. Both introduce new compilers and async paradigms.
2025	19.2+	• Compiler improvements. • Async transitions refinements. • Improved RSC performance.	16.0 (Oct)	• Cache Components. • Partial Pre-Rendering stable. • Turbopack default bundler. • React Compiler full integration. • Faster navigation & streaming.	The new generation of hybrid rendering — fully streaming, cached, and incremental.

🪜 Migration Guidance Summary

Target Version	Key Migration Steps
React 15 → 16	Update lifecycle methods; handle new error boundaries; upgrade ReactDOM.render behavior.
16 → 17	Minimal — verify event handlers and JSX transform setup.
17 → 18	Replace `ReactDOM.render` with `createRoot`; test concurrent rendering; update Suspense logic.
18 → 19	Update to new React compiler & Actions; ensure dependencies compatible; check RSC and concurrent features.
Next 9 → 10/11	Adopt new dynamic routing & i18n; optional Webpack 5 upgrade.
11 → 12	Switch to SWC compiler; test middleware; remove deprecated `target` configs.
12 → 13	Move to App Router (optionally); update for `next/image`/`link`; test RSC support.
13 → 14	Remove `next export`; migrate to Server Actions & PPR if used.
14 → 15/16	Ensure React 19 compatibility; adopt Turbopack and new caching APIs; update any custom Webpack configs.

🔍 High-Level Takeaways

React 16 → 18: Transition from Fiber → Concurrent → Server-aware rendering.
Next.js 9 → 13: Evolved from static site generator → hybrid full-stack framework → server component platform.
React 19 + Next.js 15–16: Begin the compiler-driven, streaming, cache-centric era optimized for edge and AI workloads.

Maintained for historical and migration reference — suitable for React/Next.js project documentation.