Update the documentation.

docs/advanced-features/custom-app.md

@@ -4,9 +4,13 @@ description: Control page initialization and add a layout that persists for all
 
 # Custom `App`
 
-Next.js uses the `App` component to initialize pages. You can override it and control the page initialization. Which allows you to do amazing things like:
+> **Note**: Next.js 13 introduces the `app/` directory (beta). This new directory has support for layouts, nested routes, and uses Server Components by default. Inside `app/`, you can fetch data for your entire application inside layouts, including support for more granular nested layouts (with [colocated data fetching](https://beta.nextjs.org/docs/data-fetching/fundamentals)).
+>
+> [Learn more about incrementally adopting `app/`](https://beta.nextjs.org/docs/upgrade-guide).
 
-- Persisting layout between page changes
+Next.js uses the `App` component to initialize pages. You can override it and control the page initialization and:
+
+- Persist layouts between page changes
 - Keeping state when navigating pages
 - Custom error handling using `componentDidCatch`
 - Inject additional data into pages
@@ -15,25 +19,9 @@ Next.js uses the `App` component to initialize pages. You can override it and co
 To override the default `App`, create the file `./pages/_app.js` as shown below:
 
 ```jsx
-// import App from 'next/app'
-
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-// Only uncomment this method if you have blocking data requirements for
-// every single page in your application. This disables the ability to
-// perform automatic static optimization, causing every page in your app to
-// be server-side rendered.
-//
-// MyApp.getInitialProps = async (appContext) => {
-//   // calls page's `getInitialProps` and fills `appProps.pageProps`
-//   const appProps = await App.getInitialProps(appContext);
-//
-//   return { ...appProps }
-// }
-
-export default MyApp
 ```
 
 The `Component` prop is the active `page`, so whenever you navigate between routes, `Component` will change to the new `page`. Therefore, any props you send to `Component` will be received by the `page`.
@@ -47,7 +35,7 @@ The `App.getInitialProps` receives a single argument called `context.ctx`. It's
 - If your app is running and you added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom [`getInitialProps`](/docs/api-reference/data-fetching/get-initial-props.md) in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching/get-static-props.md).
 - When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value.
-- `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching/overview.md) like [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) or [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md).
+- `App` does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching/overview.md) like [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) or [`getServerSideProps`](/docs/basic-features/data-fetching/get-server-side-props.md). If you need global data fetching, consider [incrementally adopting the `app/` directory](https://beta.nextjs.org/docs/upgrade-guide).
 
 ### TypeScript
 

docs/advanced-features/custom-document.md

@@ -4,6 +4,10 @@ description: Extend the default document markup added by Next.js.
 
 # Custom `Document`
 
+> **Note**: Next.js 13 introduces the `app/` directory (beta). This new directory has support for layouts, nested routes, and uses Server Components by default. Inside `app/`, you can modify the initial `html` and `body` tags using a root layout.
+>
+> [Learn more about incrementally adopting `app/`](https://beta.nextjs.org/docs/upgrade-guide).
+
 A custom `Document` can update the `<html>` and `<body>` tags used to render a [Page](/docs/basic-features/pages.md). This file is only rendered on the server, so event handlers like `onClick` cannot be used in `_document`.
 
 To override the default `Document`, create the file `pages/_document.js` as shown below:
@@ -48,7 +52,7 @@ Or add a `className` to the `body` tag:
 
 > **Note:** This is advanced and only needed for libraries like CSS-in-JS to support server-side rendering. This is not needed for built-in `styled-jsx` support.
 
-To prepare for [React 18](/docs/advanced-features/react-18.md), we recommend avoiding customizing `getInitialProps` and `renderPage`, if possible.
+For [React 18](/docs/advanced-features/react-18.md support, we recommend avoiding customizing `getInitialProps` and `renderPage`, if possible.
 
 The `ctx` object shown below is equivalent to the one received in [`getInitialProps`](/docs/api-reference/data-fetching/get-initial-props.md#context-object), with the addition of `renderPage`.
 

docs/advanced-features/dynamic-import.md

@@ -38,14 +38,6 @@ export default function Home() {
 
 > **Note**: In `import('path/to/component')`, the path must be explicitly written. It can't be a template string nor a variable. Furthermore the `import()` has to be inside the `dynamic()` call for Next.js to be able to match webpack bundles / module ids to the specific `dynamic()` call and preload them before rendering. `dynamic()` can't be used inside of React rendering as it needs to be marked in the top level of the module for preloading to work, similar to `React.lazy`.
 
-If you are not using React 18, you can use the `loading` attribute in place of the Suspense `fallback`.
-
-```jsx
-const DynamicHeader = dynamic(() => import('../components/header'), {
-  loading: () => <div>Loading...</div>,
-})
-```
-
 ## With named exports
 
 To dynamically import a named export, you can return it from the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) returned by [`import()`](https://github.com/tc39/proposal-dynamic-import#example):

docs/advanced-features/react-18/overview.md

@@ -1,33 +1,34 @@
 # React 18
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18.html) adds new features including Suspense, automatic batching of updates, APIs like `startTransition`, and a new streaming API for server rendering with support for `React.lazy`.
+Next.js 13 requires using React 18, unlocking:
 
-React 18 is now released. Read more about [React 18](https://reactjs.org/blog/2022/03/29/react-v18.html).
+- [Streaming SSR](#streaming-ssr)
+- [React Server Components](#react-server-components)
+- [Edge and Node.js Runtimes](#edge-and-nodejs-runtimes)
+- New APIs like `startTransition` and more.
 
-## Using React 18 with Next.js
-
-Install the latest version of React:
+## Streaming SSR
 
-```jsx
-npm install next@latest react@latest react-dom@latest
-```
+In Next.js 13, you can start using the `app/` directory (beta) to take advantage of streaming server-rendering. Learn more by reading the `app/` directory (beta) documentation:
 
-You can now start using React 18's new APIs like `startTransition` and `Suspense` in Next.js.
+- [Streaming and Suspense](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense)
+- [Instant Loading UI](https://beta.nextjs.org/docs/routing/loading-ui)
 
-## Streaming SSR
+[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Streaming SSR.
 
-Next.js supports React 18 streaming server-rendering (SSR) out of the box.
+## React Server Components
 
-[Learn more about streaming in Next.js](/docs/advanced-features/react-18/streaming.md).
+In Next.js 13, you can start using the `app/` directory (beta) which use Server Components by default. Learn more by reading the `app/` directory (beta) documentation:
 
-## React Server Components (Alpha)
+- [Rendering Fundamentals](https://beta.nextjs.org/docs/rendering/fundamentals)
+- [Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)
 
-Server Components are a new feature in React that let you reduce your JavaScript bundle size by separating server and client-side code. Server Components allow developers to build apps that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
+[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Server Components.
 
-Server Components are still in research and development. [Learn how to try Server Components](/docs/advanced-features/react-18/server-components.md) as an experimental feature in Next.js.
+## Edge and Node.js Runtimes
 
-## Switchable Runtime (Alpha)
+Next.js has two **server runtimes** where you can render parts of your application code: the **Node.js Runtime** and the [**Edge Runtime**](/docs/api-reference/edge-runtime.md). Depending on your deployment infrastructure, both runtimes support streaming.
 
-Next.js supports changing the runtime of your application between Node.js and the [Edge Runtime](/docs/api-reference/edge-runtime.md) at the page level. For example, you can selectively configure specific pages to be server-side rendered in the Edge Runtime.
+By default, Next.js uses the Node.js runtime. [Middleware](https://nextjs.org/docs/advanced-features/middleware) and [Edge API Routes](https://nextjs.org/docs/api-routes/edge-api-routes) use the Edge runtime.
 
-This feature is still experimental. [Learn more about the switchable runtime](/docs/advanced-features/react-18/switchable-runtime.md).
+[Learn more about the different runtimes](/docs/advanced-features/react-18/switchable-runtime.md).

docs/advanced-features/react-18/server-components.md

@@ -1,27 +1,10 @@
-# React Server Components (RFC)
+# React Server Components
 
 React Server Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering.
 
-In an upcoming Next.js release, React and Next.js developers will be able to use Server Components inside the `app` directory as part of the changes outlined by the [Layouts RFC](https://nextjs.org/blog/layouts-rfc).
+In Next.js 13, you can start using the `app/` directory (beta) which use Server Components by default. Learn more by reading the `app/` directory (beta) documentation:
 
-## What are React Server Components?
+- [Rendering Fundamentals](https://beta.nextjs.org/docs/rendering/fundamentals)
+- [Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)
 
-React Server Components improve the user experience of your application by pairing the best parts of server-rendering with client-side interactivity.
-
-With traditional React applications that are client-side only, developers often had to make tradeoffs between SEO and performance. Server Components enable developers to better leverage their server infrastructure and achieve great performance by default.
-
-For example, large dependencies that previously would impact the JavaScript bundle size on the client can instead stay entirely on the server. By sending less JavaScript to the browser, the time to interactive for the page is decreased, leading to improved [Core Web Vitals](https://vercel.com/blog/core-web-vitals).
-
-## React Server Components vs Server-Side Rendering
-
-[Server-side Rendering](/docs/basic-features/pages.md#server-side-rendering) (SSR) dynamically builds your application into HTML on the server. This creates faster load times for users by offloading work from the user's device to the server, especially those with slower internet connections or older devices. However, developers still pay the cost to download, parse, and hydrate those components after the initial HTML loads.
-
-React Server Components, combined with Next.js server-side rendering, help eliminate the tradeoff of all-or-nothing data fetching. You can progressively show updates as your data comes in.
-
-## Using React Server Components with Next.js
-
-The Next.js team at Vercel released the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) a few months ago outlining the vision for the future of routing, layouts, and data fetching in the framework. These changes **aren't available yet**, but we can start learning about how they will be used.
-
-Pages and Layouts in `app` will be rendered as React Server Components by default. This improves performance by reducing the amount of JavaScript sent to the client for components that are not interactive. Client components will be able to be defined through either a file name extension or through a string literal in the file.
-
-We will be providing more updates about Server Components usage in Next.js soon.
+[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Server Components.

docs/advanced-features/react-18/streaming.md

@@ -1,42 +1,10 @@
 # Streaming SSR
 
-React 18 includes architectural improvements to React server-side rendering (SSR) performance. This means you can use `Suspense` in your React components in streaming SSR mode and React will render content on the server and send updates through HTTP streams.
+Streaming allows you to incrementally render parts of your UI to the client.
 
-## Using Streaming Server-Rendering
+In Next.js 13, you can start using the `app/` directory (beta) to take advantage of streaming server-rendering. Learn more by reading the `app/` directory (beta) documentation:
 
-When you use Suspense in a server-rendered page, there is no extra configuration required to use streaming SSR. When deployed, streaming can be utilized through infrastructure like [Edge Functions](https://vercel.com/features/edge-functions?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) on Vercel (with the Edge Runtime) or with a Node.js server (with the Node.js runtime). AWS Lambda Functions do not currently support streaming responses.
+- [Streaming and Suspense](https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense)
+- [Instant Loading UI](https://beta.nextjs.org/docs/routing/loading-ui)
 
-All SSR pages have the ability to render components into streams and the client continues receiving updates from these streams even after the initial SSR response is sent. When any suspended components resolve down the line, they are rendered on the server and streamed to the client. This means applications can start emitting HTML even _before_ all the data is ready, improving your app's loading performance.
-
-As an added bonus, in streaming SSR mode the client will also use selective hydration to prioritize component hydration based on user interactions, further improving performance.
-
-For non-SSR pages, all Suspense boundaries will still be [statically optimized](/docs/advanced-features/automatic-static-optimization.md).
-
-## Streaming Features
-
-### next/dynamic
-
-Next.js supports lazy loading external libraries with `import()` and React components with `next/dynamic`. Deferred loading helps improve the initial loading performance by decreasing the amount of JavaScript necessary to render the page. Components or libraries are only imported and included in the JavaScript bundle when they're used.
-
-Read more about how to use [`next/dynamic`](/docs/advanced-features/dynamic-import.md).
-
-## Important Notes
-
-#### `next/head` and `next/script`
-
-Using resource tags (e.g. scripts or stylesheets) in `next/head` won't work as intended with streaming, as the loading order and timing of `next/head` tags can no longer be guaranteed once you add Suspense boundaries. We suggest moving resource tags to `next/script` with the `afterInteractive` or `lazyOnload` strategy, or to `_document`. For similar reasons, we also suggest migrating `next/script` instances with the `beforeInteractive` strategy to `_document`.
-
-#### Data Fetching
-
-Data fetching within `Suspense` boundaries is currently only supported on the client side. **Server-side data fetching is not supported** yet. Read the [Layouts RFC](https://nextjs.org/blog/layouts-rfc) for more information about the future of data fetching on the server.
-
-#### Styling
-
-The following solutions are compatible with Next.js streaming:
-
-- Inline Styles
-- [Global Stylesheets](/docs/basic-features/built-in-css-support.md#adding-a-global-stylesheet)
-- [CSS Modules](/docs/basic-features/built-in-css-support.md#adding-component-level-css)
-- [styled-jsx](/docs/basic-features/built-in-css-support.md#css-in-js)
-
-CSS-in-JS solutions like `styled-components` and `emotion` are currently not compatible with streaming. For library authors, check out the [upgrade guide](https://github.com/reactwg/react-18/discussions/110) to learn more.
+[Deploy the `app/` directory example](https://vercel.com/templates/next.js/app-directory) to try Streaming SSR.