Requirements

• Next.js (13 or newer)

Directory structure

Routing is moving from to , although the directory structure is changing, from to , the change can be done incrementally from your existing pages/ directory, just have to care about the possible conflicts.

Server Components

Server Components is a new feature introduced in React 18 (and now featured in Next 13 as well), used to build fast, interactive web apps with a single programming model. They help reduce the amount of JavaScript sent to the client, improving initial page load times and enabling the development of complex interfaces. When a route is loaded in an app using Server Components, the Next.js and React runtime is loaded, which is cacheable, predictable in size, and asynchronously loaded, allowing for HTML from the server to be progressively enhanced on the client. The use of Server Components can provide a good developer experience and create efficient web apps.

Any component inside the app directory is, by default, a server component, you can opt-out from it using the 'use client' directive at the top of the page.

Data fetching

Next.js 13 allows for the fetching of data inside layouts, pages, and components. It introduces support for React's new Support for Promises RFC and extends the native fetch Web API to dedupe fetch requests and provide a flexible way to fetch, cache, and revalidate data at the component level. With the app directory, it is possible to fetch data, handle loading and error states, and stream in UI as it is rendered. The app directory will also include improvements and simplifications for data mutations in a future release.

example:

// app/page.js
async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}

// This is an async Server Component
export default async function Page() {
  const data = await getData();

  return <main>{/* ... */}</main>;
}

TLDR

The app directory in Next.js 13 allows for the creation of complex interfaces with advanced routing patterns and the ability to progressively render and stream units of the UI to the client. It supports React's Server Components architecture and allows for the fetching of data inside layouts, pages, and components, and now supports fetch, cache, and revalidate data at the component level.