Understanding Next.js 13: Turbopack, App Directory Routing, and React Server Components

Next.js 13 introduces a new bundler called Turbopack, created by the author of Webpack, which claims development‑time updates up to 700× faster than Webpack and 10× faster than Vite. A sample project can be created with npx create-next-app --example with-turbopack , and Turbopack reports build times as low as 2.3 ms.

The framework also adds a new app directory that implements a convention‑based routing system. Each route folder contains layout.tsx , page.tsx , and optionally template.tsx , loading.tsx , and error.tsx . This structure enables nested routes, persistent layout caching, and server‑side streaming.

Compared with the previous pages directory, the app approach supports React Server Components by default, allowing developers to offload data fetching and heavy computation to the server while delivering streamed HTML to the client. Server components use renderToPipeableStream instead of renderToString , and client interactivity is added via Suspense and the use client directive.

Data fetching can be performed with the new use hook and the standard fetch API, supporting caching strategies such as force-cache , no-store , and next: { revalidate: 10 } for ISR‑like behavior. Examples show how to fetch data in a component and render it with Suspense for progressive loading.

Additional updates include the modern next/image component with built‑in lazy‑loading, automatic format optimization, and required width / height attributes, as well as the @next/font package for loading Google or local fonts at build time. The next/link component now renders an <a> tag automatically, simplifying navigation.

npx create-next-app --example with-turbopack

// /pages/account-settings/basic-information.js
import SiteLayout from '../../components/SiteLayout'
import { getLayout } from '../../components/AccountSettingsLayout'

const AccountSettingsBasicInformation = () =>
{/* ... */}
AccountSettingsBasicInformation.getLayout = getLayout
export default AccountSettingsBasicInformation

// Example of a server component with Suspense
import { lazy } from 'react'
const Comments = lazy(() => import('./Comments.js'))

export default function Posts() {
  return (
}>
)
}

Overall, Next.js 13 tightly integrates React 18 features, offering faster development cycles, better performance through server‑side streaming, and a more organized codebase, making it a compelling choice for modern full‑stack JavaScript applications.