Merge branch 'canary' into 06-27-Update_next-cli.mdx

.github/CODEOWNERS

@@ -1,13 +1,35 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-# Codeowners now use Vercel Spaces
-# Search .vercel.approvers for all files
 
 *                                             @timneutkens @ijjk @shuding @huozhi @feedthejim
+/.git*                                        @vercel/next-js
+/docs/                                        @vercel/next-js @leerob
+/errors/                                      @vercel/next-js @leerob
+/examples/                                    @vercel/next-js @leerob @steven-tey
+/scripts/                                     @vercel/next-js
+/.alex*                                       @vercel/next-js @leerob
+/.eslint*                                     @vercel/next-js @leerob
+/.prettier*                                   @vercel/next-js @leerob
+/*.md                                         @vercel/next-js @leerob
+/packages/create-next-app/                    @vercel/next-js
+/pnpm-lock.yaml                               @vercel/next-js @vercel/web-tooling
 
 # Image Component (@styfle)
 
 /**/*image*                                   @timneutkens @ijjk @shuding @styfle @huozhi @vercel/devex
 /**/*image*/**                                @timneutkens @ijjk @shuding @styfle @huozhi @vercel/devex
+/packages/next/client/use-intersection.tsx    @timneutkens @ijjk @shuding @styfle
+/packages/next/server/lib/squoosh/            @timneutkens @ijjk @shuding @styfle
+/packages/next/server/serve-static.ts         @timneutkens @ijjk @shuding @styfle @huozhi
+/packages/next/server/config.ts               @timneutkens @ijjk @shuding @styfle @huozhi
 
+# Tooling & Telemetry
+
+/packages/next/src/build/                     @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+/packages/next/src/telemetry/                 @timneutkens @ijjk @shuding @padmaia
+/packages/next-swc/                           @timneutkens @ijjk @shuding @vercel/web-tooling
+Cargo.toml                                    @timneutkens @ijjk @shuding @vercel/web-tooling
+Cargo.lock                                    @timneutkens @ijjk @shuding @vercel/web-tooling
+/.cargo/config.toml                           @timneutkens @ijjk @shuding @vercel/web-tooling
+/.config/nextest.toml                         @timneutkens @ijjk @shuding @vercel/web-tooling

docs/01-getting-started/03-react-essentials.mdx

@@ -242,11 +242,11 @@ export default function ExampleClientComponent({ children }) {
 
 #### Recommended Pattern: Passing Server Components to Client Components as Props
 
-Instead, when designing Client Components you can use React props to mark _"holes"_ for Server Components.
+Instead, when designing Client Components you can use React props to mark _"slots"_ for Server Components.
 
-The Server Component will be rendered on the server, and when the Client Component is rendered on the client, the _"hole"_ will be filled in with the rendered result of the Server Component.
+The Server Component will be rendered on the server, and when the Client Component is rendered on the client, the _"slot"_ will be filled in with the rendered result of the Server Component.
 
-A common pattern is to use the React `children` prop to create the _"hole"_. We can refactor `<ExampleClientComponent>` to accept a generic `children` prop and move the import and explicit nesting of `<ExampleClientComponent>` up to a parent component.
+A common pattern is to use the React `children` prop to create the _"slot"_. We can refactor `<ExampleClientComponent>` to accept a generic `children` prop and move the import and explicit nesting of `<ExampleClientComponent>` up to a parent component.
 
 ```tsx filename="app/example-client-component.tsx" switcher highlight={6,16}
 'use client'

docs/02-app/01-building-your-application/01-routing/06-loading-ui-and-streaming.mdx

@@ -3,7 +3,7 @@ title: Loading UI and Streaming
 description: Built on top of Suspense, Loading UI allows you to create a fallback for specific route segments, and automatically stream content as it becomes ready.
 ---
 
-The special file `loading.js` helps you create meaningful Loading UI with [React Suspense](https://react.dev/reference/react/Suspense). With this convention, you can show an [instant loading state](#instant-loading-states) from the server while the content of a route segment loads, the new content is automatically swapped in once rendering is complete.
+The special file `loading.js` helps you create meaningful Loading UI with [React Suspense](https://react.dev/reference/react/Suspense). With this convention, you can show an [instant loading state](#instant-loading-states) from the server while the content of a route segment loads. The new content is automatically swapped in once rendering is complete.
 
 <Image
   alt="Loading UI"

docs/02-app/01-building-your-application/01-routing/11-middleware.mdx

@@ -3,6 +3,8 @@ title: Middleware
 description: Learn how to use Middleware to run code before a request is completed.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.
 
 Middleware runs before cached content and routes are matched. See [Matching Paths](#matching-paths) for more details.
@@ -121,11 +123,24 @@ The `NextResponse` API allows you to:
 - Set response cookies
 - Set response headers
 
+<AppOnly>
+
+To produce a response from Middleware, you can:
+
+1. `rewrite` to a route ([Page](/docs/app/building-your-application/routing/pages-and-layouts) or [Route Handler](/docs/app/building-your-application/routing/router-handlers)) that produces a response
+2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
+
+</AppOnly>
+
+<PagesOnly>
+
 To produce a response from Middleware, you can:
 
 1. `rewrite` to a route ([Page](/docs/pages/building-your-application/routing/pages-and-layouts) or [Edge API Route](/docs/pages/building-your-application/routing/api-routes)) that produces a response
 2. return a `NextResponse` directly. See [Producing a Response](#producing-a-response)
 
+</PagesOnly>
+
 ## Using Cookies
 
 Cookies are regular headers. On a `Request`, they are stored in the `Cookie` header. On a `Response` they are in the `Set-Cookie` header. Next.js provides a convenient way to access and manipulate these cookies through the `cookies` extension on `NextRequest` and `NextResponse`.

docs/02-app/01-building-your-application/02-rendering/02-edge-and-nodejs-runtimes.mdx

@@ -3,6 +3,8 @@ title: Edge and Node.js Runtimes
 description: Learn about the switchable runtimes (Edge and Node.js) in Next.js.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 In the context of Next.js, "runtime" refers to the set of libraries, APIs, and general functionality available to your code during execution.
 
 Next.js has two server runtimes where you can render parts of your application code:

docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx

@@ -3,6 +3,8 @@ title: CSS Modules
 description: Style your Next.js Application with CSS Modules.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 <PagesOnly>
 
 <details open>

docs/02-app/01-building-your-application/04-styling/02-tailwind-css.mdx

@@ -3,6 +3,8 @@ title: Tailwind CSS
 description: Style your Next.js Application using Tailwind CSS.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 <PagesOnly>
 
 <details open>

docs/02-app/01-building-your-application/04-styling/03-css-in-js.mdx

@@ -3,6 +3,8 @@ title: CSS-in-JS
 description: Use CSS-in-JS libraries with Next.js
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 <AppOnly>
 
 > **Warning:** CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including [concurrent rendering](https://react.dev/blog/2022/03/29/react-v18#what-is-concurrent-react).

docs/02-app/01-building-your-application/04-styling/04-sass.mdx

@@ -3,6 +3,8 @@ title: Sass
 description: Style your Next.js application using Sass.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 Next.js has built-in support for Sass using both the `.scss` and `.sass` extensions. You can use component-level Sass via CSS Modules and the `.module.scss`or `.module.sass` extension.
 
 First, install [`sass`](https://github.com/sass/sass):

docs/02-app/01-building-your-application/04-styling/index.mdx

@@ -3,6 +3,8 @@ title: Styling
 description: Learn the different ways you can style your Next.js application.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 Next.js supports different ways of styling your application, including:
 
 - **Global CSS**: Simple to use and familiar for those experienced with traditional CSS, but can lead to larger CSS bundles and difficulty managing styles as the application grows.

docs/02-app/01-building-your-application/05-optimizing/01-images.mdx

@@ -9,6 +9,8 @@ related:
     - app/api-reference/components/image
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 <details>
   <summary>Examples</summary>
 

docs/02-app/01-building-your-application/05-optimizing/02-fonts.mdx

@@ -9,6 +9,8 @@ related:
     - app/api-reference/components/font
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 [**`next/font`**](/docs/app/api-reference/components/font) will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.
 
 > **🎥 Watch:** Learn more about how to use `next/font` → [YouTube (6 minutes)](https://www.youtube.com/watch?v=L8_98i_bMMA).

docs/02-app/01-building-your-application/05-optimizing/03-scripts.mdx

@@ -9,6 +9,8 @@ related:
     - app/api-reference/components/script
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 <AppOnly>
 
 ### Layout Scripts

docs/02-app/01-building-your-application/05-optimizing/05-static-assets.mdx

@@ -3,6 +3,8 @@ title: Static Assets
 description: Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`).
 
 For example, if you add `me.png` inside `public`, the following code will access the image:

docs/02-app/01-building-your-application/05-optimizing/06-lazy-loading.mdx

@@ -3,6 +3,8 @@ title: Lazy Loading
 description: Lazy load imported libraries and React Components to improve your application's loading performance.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 [Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route.
 
 It allows you to defer loading of **Client Components** and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it.

docs/02-app/01-building-your-application/05-optimizing/07-analytics.mdx

@@ -3,6 +3,8 @@ title: Analytics
 description: Measure and track page performance using Next.js Speed Insights
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 [Next.js Speed Insights](https://nextjs.org/analytics) allows you to analyze and measure the performance of
 pages using different metrics.
 

docs/02-app/01-building-your-application/05-optimizing/08-open-telemetry.mdx

@@ -3,6 +3,8 @@ title: OpenTelemetry
 description: Learn how to instrument your Next.js app with OpenTelemetry.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 > **Good to know**: This feature is **experimental**, you need to explicitly opt-in by providing `experimental.instrumentationHook = true;` in your `next.config.js`.
 
 Observability is crucial for understanding and optimizing the behavior and performance of your Next.js app.
@@ -35,8 +37,18 @@ To get started, you must install `@vercel/otel`:
 npm install @vercel/otel
 ```
 
+<AppOnly>
+
+Next, create a custom [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
+
+</AppOnly>
+
+<PagesOnly>
+
 Next, create a custom [`instrumentation.ts`](/docs/pages/building-your-application/optimizing/instrumentation) (or `.js`) file in the **root directory** of the project (or inside `src` folder if using one):
 
+</PagesOnly>
+
 ```ts filename="your-project/instrumentation.ts" switcher
 import { registerOTel } from '@vercel/otel'
 
@@ -53,12 +65,26 @@ export function register() {
 }
 ```
 
+<AppOnly>
+
+> **Good to know**
+>
+> - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
+> - If you use the [`pagesExtension` config option](/docs/app/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
+
+</AppOnly>
+
+<PagesOnly>
+
 > **Good to know**
 >
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
 > - If you use the [`pagesExtension` config option](/docs/pages/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
 > - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
 
+</PagesOnly>
+
 ### Manual OpenTelemetry configuration
 
 If our wrapper `@vercel/otel` doesn't suit your needs, you can configure OpenTelemetry manually.

docs/02-app/01-building-your-application/05-optimizing/09-instrumentation.mdx

@@ -3,15 +3,32 @@ title: Instrumentation
 description: Learn how to use instrumentation to run code at server startup in your Next.js app
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 If you export a function named `register` from a `instrumentation.ts` (or `.js`) file in the **root directory** of your project (or inside the `src` folder if using one), we will call that function whenever a new Next.js server instance is bootstrapped.
 
+<AppOnly>
+
+> **Good to know**
+>
+> - This feature is **experimental**. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
+> - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
+> - If you use the [`pagesExtension` config option](/docs/app/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
+> - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
+
+</AppOnly>
+
+<PagesOnly>
+
 > **Good to know**
 >
 > - This feature is **experimental**. To use it, you must explicitly opt in by defining `experimental.instrumentationHook = true;` in your `next.config.js`.
 > - The `instrumentation` file should be in the root of your project and not inside the `app` or `pages` directory. If you're using the `src` folder, then place the file inside `src` alongside `pages` and `app`.
 > - If you use the [`pagesExtension` config option](/docs/pages/api-reference/next-config-js/pageExtensions) to add a suffix, you will also need to update the `instrumentation` filename to match.
 > - We have created a basic [with-opentelemetry](https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry) example that you can use.
 
+</PagesOnly>
+
 When your `register` function is deployed, it will be called on each cold boot (but exactly once in each environment).
 
 Sometimes, it may be useful to import a file in your code because of the side effects it will cause. For example, you might import a file that defines a set of global variables, but never explicitly use the imported file in your code. You would still have access to the global variables the package has declared.

docs/02-app/01-building-your-application/05-optimizing/index.mdx

@@ -4,6 +4,8 @@ nav_title: Optimizing
 description: Optimize your Next.js application for best performance and user experience.
 ---
 
+{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+
 Next.js comes with a variety of built-in optimizations designed to improve your application's speed and [Core Web Vitals](https://web.dev/vitals/). This guide will cover the optimizations you can leverage to enhance your user experience.
 
 ## Built-in Components