Next.js 13 Released: The app Directory and React Server Components

What happened

Next.js 13 was released on October 25, 2022, announced at Next.js Conf. Alongside a stable core and the existing pages directory, it introduced a new, beta app directory that laid the foundations for a more dynamic, React-aligned architecture.

The app directory

The centrepiece was the app directory, a new routing and layouts model that could be adopted incrementally alongside the existing pages directory. It brought nested layouts that share UI between routes while preserving state, React Server Components as the server-first default, streaming to progressively render units of UI, and an extended fetch API for component-level data fetching. Next.js noted it was in beta and not yet recommended for production.

React Server Components and streaming

By adopting React's Server Components architecture, the app directory let developers reduce the JavaScript sent to the client while keeping highly interactive apps. Streaming allowed instant loading states and incremental delivery of UI as it rendered, so users could start interacting before the whole page finished. A special loading.js file created instant loading UI with Suspense boundaries automatically.

New Image, font system and Turbopack

Next.js 13 shipped a redesigned Image component that ships less client JavaScript, uses native lazy loading and requires alt text by default. It introduced next/font (then @next/font) for automatic self-hosted fonts with zero layout shift and no browser requests to Google, and simplified next/link so it no longer required a nested anchor tag. The release also introduced Turbopack, a Rust-based webpack successor, in alpha for next dev.

Why it mattered

Next.js 13 marked the start of the App Router era. Although the app directory was beta, it introduced the architecture, layouts, Server Components and streaming, that later releases would stabilise and build upon, while the new Image and font systems delivered immediate performance and privacy benefits to existing apps.

Related on Skillo

See also: Next.js 14's stable Server Actions.

Sources

• Next.js 13 (official Next.js blog)

Published date reflects the original event date (2022-10-25). This article is original Skillo editorial written from the sources above; facts were verified in September 2026.