Merge remote-tracking branch 'origin/canary' into feedthejim/bundle-r…

…eact

.github/CODEOWNERS

@@ -28,10 +28,11 @@
 
 # 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 @huozhi @vercel/web-tooling
-Cargo.toml                                    @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
-Cargo.lock                                    @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
-/.cargo/config.toml                           @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
-/.config/nextest.toml                         @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+/packages/next/src/build/                                @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+/packages/next/src/server/lib/router-utils/setup-dev.ts  @timneutkens @ijjk @shuding @huozhi @feedthejim @ztanner @wyattjoh @vercel/web-tooling
+/packages/next/src/telemetry/                            @timneutkens @ijjk @shuding @padmaia
+/packages/next-swc/                                      @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+Cargo.toml                                               @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+Cargo.lock                                               @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+/.cargo/config.toml                                      @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling
+/.config/nextest.toml                                    @timneutkens @ijjk @shuding @huozhi @vercel/web-tooling

bench/vercel/package.json

@@ -15,7 +15,7 @@
     "commander": "2.20.0",
     "dotenv": "10.0.0",
     "downsample-lttb": "0.0.1",
-    "listr2": "5.0.5",
+    "listr2": "5.0.8",
     "p-queue": "7.3.0",
     "term-size": "3.0.2",
     "webpack-bundle-analyzer": "^4.6.1",

docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx

@@ -42,7 +42,7 @@ There are other optional props you can pass to `<Link>`. See the [API reference]
 
 #### Linking to Dynamic Segments
 
-When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
+When linking to [dynamic segments](/docs/app/building-your-application/routing/dynamic-routes), you can use [template literals and interpolation](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Template_literals) to generate a list of links. For example, to generate a list of blog posts:
 
 ```jsx filename="app/blog/PostList.js"
 import Link from 'next/link'

docs/02-app/01-building-your-application/01-routing/10-route-handlers.mdx

@@ -8,7 +8,7 @@ related:
     - app/api-reference/file-conventions/route
 ---
 
-Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) APIs.
+Route Handlers allow you to create custom request handlers for a given route using the Web [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response) APIs.
 
 <Image
   alt="Route.js Special File"
@@ -36,11 +36,11 @@ Route Handlers can be nested inside the `app` directory, similar to `page.js` an
 
 ### Supported HTTP Methods
 
-The following [HTTP methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`. If an unsupported method is called, Next.js will return a `405 Method Not Allowed` response.
+The following [HTTP methods](https://developer.mozilla.org/docs/Web/HTTP/Methods) are supported: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD`, and `OPTIONS`. If an unsupported method is called, Next.js will return a `405 Method Not Allowed` response.
 
 ### Extended `NextRequest` and `NextResponse` APIs
 
-In addition to supporting native [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) and [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response). Next.js extends them with
+In addition to supporting native [Request](https://developer.mozilla.org/docs/Web/API/Request) and [Response](https://developer.mozilla.org/docs/Web/API/Response). Next.js extends them with
 [`NextRequest`](/docs/app/api-reference/functions/next-request) and [`NextResponse`](/docs/app/api-reference/functions/next-response) to provide convenient helpers for advanced use cases.
 
 ## Behavior
@@ -245,7 +245,7 @@ Route Handlers can be used with dynamic functions from Next.js, like [`cookies`]
 
 You can read cookies with [`cookies`](/docs/app/api-reference/functions/cookies) from `next/headers`. This server function can be called directly in a Route Handler, or nested inside of another function.
 
-This `cookies` instance is read-only. To set cookies, you need to return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) header.
+This `cookies` instance is read-only. To set cookies, you need to return a new `Response` using the [`Set-Cookie`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie) header.
 
 ```ts filename="app/api/route.ts" switcher
 import { cookies } from 'next/headers'
@@ -465,7 +465,7 @@ export async function POST(req) {
 These abstractions use the Web APIs to create a stream. You can also use the underlying Web APIs directly.
 
 ```ts filename="app/api/route.ts" switcher
-// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
 function iteratorToStream(iterator: any) {
   return new ReadableStream({
     async pull(controller) {
@@ -505,7 +505,7 @@ export async function GET() {
 ```
 
 ```js filename="app/api/route.js" switcher
-// https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
 function iteratorToStream(iterator) {
   return new ReadableStream({
     async pull(controller) {

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

@@ -288,7 +288,7 @@ export function middleware(request) {
 }
 ```
 
-> **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
+> **Good to know**: Avoid setting large headers as it might cause [431 Request Header Fields Too Large](https://developer.mozilla.org/docs/Web/HTTP/Status/431) error depending on your backend web server configuration.
 
 ## Producing a Response
 

docs/02-app/01-building-your-application/02-data-fetching/01-fetching-caching-and-revalidating.mdx

@@ -15,7 +15,7 @@ There are four ways you can fetch data:
 
 ## Fetching Data on the Server with `fetch`
 
-Next.js extends the native [`fetch` Web API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to allow you to configure the [caching](#caching-data) and [revalidating](#revalidating-data) behavior for each fetch request on the server. React extends `fetch` to automatically [memoize](/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) fetch requests while rendering a React component tree.
+Next.js extends the native [`fetch` Web API](https://developer.mozilla.org/docs/Web/API/Fetch_API) to allow you to configure the [caching](#caching-data) and [revalidating](#revalidating-data) behavior for each fetch request on the server. React extends `fetch` to automatically [memoize](/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed) fetch requests while rendering a React component tree.
 
 You can use `fetch` with [`async`/`await` in Server Components](https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md), in [Route Handlers](/docs/app/building-your-application/routing/route-handlers), and in [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations).
 
@@ -84,7 +84,7 @@ fetch('https://...', { cache: 'force-cache' })
 
 > **What is the Data Cache?**
 >
-> The Data Cache is a persistent [HTTP cache](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching). Depending on your platform, the cache can scale automatically and be [shared across multiple regions](https://vercel.com/docs/infrastructure/data-cache).
+> The Data Cache is a persistent [HTTP cache](https://developer.mozilla.org/docs/Web/HTTP/Caching). Depending on your platform, the cache can scale automatically and be [shared across multiple regions](https://vercel.com/docs/infrastructure/data-cache).
 >
 > Learn more about the [Data Cache](/docs/app/building-your-application/caching#data-cache).
 

docs/02-app/01-building-your-application/02-data-fetching/02-patterns.mdx

@@ -220,7 +220,7 @@ import { getItem } from '@/utils/get-item'
 
 export const preload = (id: string) => {
   // void evaluates the given expression and returns undefined
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
   void getItem(id)
 }
 export default async function Item({ id }: { id: string }) {
@@ -234,7 +234,7 @@ import { getItem } from '@/utils/get-item'
 
 export const preload = (id) => {
   // void evaluates the given expression and returns undefined
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/void
   void getItem(id)
 }
 export default async function Item({ id }) {

docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx

@@ -13,7 +13,7 @@ Forms enable you to create and update data in web applications. Next.js provides
 > **Good to know:**
 >
 > - We will soon recommend [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router and using [Server Actions](/docs/app/building-your-application/data-fetching/forms-and-mutations#how-server-actions-work) for handling form submissions and data mutations. Server Actions allow you to define asynchronous server functions that can be called directly from your components, without needing to manually create an API Route.
-> - API Routes [do not specify CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS), meaning they are same-origin only by default.
+> - API Routes [do not specify CORS headers](https://developer.mozilla.org/docs/Web/HTTP/CORS), meaning they are same-origin only by default.
 > - Since API Routes run on the server, we're able to use sensitive values (like API keys) through [Environment Variables](/docs/pages/building-your-application/configuring/environment-variables) without exposing them to the client. This is critical for the security of your application.
 
 </PagesOnly>
@@ -170,7 +170,7 @@ export default function Page() {
 }
 ```
 
-> **Good to know**: `<form action={create}>` takes the [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) data type. In the example above, the FormData submitted via the HTML [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) is accessible in the server action `create`.
+> **Good to know**: `<form action={create}>` takes the [FormData](https://developer.mozilla.org/docs/Web/API/FormData/FormData) data type. In the example above, the FormData submitted via the HTML [`form`](https://developer.mozilla.org/docs/Web/HTML/Element/form) is accessible in the server action `create`.
 
 ### Revalidating Data
 
@@ -485,7 +485,7 @@ export default function Page() {
 
 <AppOnly>
 
-Server Actions can also return [serializable objects](https://developer.mozilla.org/en-US/docs/Glossary/Serialization). For example, your Server Action might handle errors from creating a new item, returning either a success or error message:
+Server Actions can also return [serializable objects](https://developer.mozilla.org/docs/Glossary/Serialization). For example, your Server Action might handle errors from creating a new item, returning either a success or error message:
 
 ```ts filename="app/actions.ts" switcher
 'use server'

docs/02-app/01-building-your-application/03-rendering/01-server-components.mdx

@@ -64,7 +64,7 @@ There are three subsets of server rendering: Static, Dynamic, and Streaming.
 
 {/* Static Rendering Diagram */}
 
-With Static Rendering, routes are rendered at **build time**, or in the background after [data revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). The result is cached and can be pushed to a [Content Delivery Network (CDN)](https://developer.mozilla.org/en-US/docs/Glossary/CDN). This optimization allows you to share the result of the rendering work between users and server requests.
+With Static Rendering, routes are rendered at **build time**, or in the background after [data revalidation](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data). The result is cached and can be pushed to a [Content Delivery Network (CDN)](https://developer.mozilla.org/docs/Glossary/CDN). This optimization allows you to share the result of the rendering work between users and server requests.
 
 Static rendering is useful when a route has data that is not personalized to the user and can be known at build time, such as a static blog post or a product page.
 

docs/02-app/01-building-your-application/03-rendering/02-client-components.mdx

@@ -12,7 +12,7 @@ This page will go through how Client Components work, how they're rendered, and
 There are a couple of benefits to doing the rendering work on the client, including:
 
 - **Interactivity**: Client Components can use state, effects, and event listeners, meaning they can provide immediate feedback to the user and update the UI.
-- **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), allowing you to build UI for specific use cases.
+- **Browser APIs**: Client Components have access to browser APIs, like [geolocation](https://developer.mozilla.org/docs/Web/API/Geolocation_API) or [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage), allowing you to build UI for specific use cases.
 
 ## Using Client Components in Next.js
 

docs/02-app/01-building-your-application/03-rendering/03-composition-patterns.mdx

@@ -398,7 +398,7 @@ export default function Layout({ children }) {
 
 ### Passing props from Server to Client Components (Serialization)
 
-If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://developer.mozilla.org/en-US/docs/Glossary/Serialization) by React.
+If you fetch data in a Server Component, you may want to pass data down as props to Client Components. Props passed from the Server to Client Components need to be [serializable](https://developer.mozilla.org/docs/Glossary/Serialization) by React.
 
 If your Client Components depend on data that is not serializable, you can [fetch data on the client with a third party library](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-client-with-third-party-libraries) or on the server via a [Route Handler](/docs/app/building-your-application/routing/route-handlers).
 

docs/02-app/01-building-your-application/03-rendering/index.mdx

@@ -39,7 +39,7 @@ Understanding these differences is key to effectively using React and Next.js. W
 Broadly speaking, all websites follow the same **Request-Response Lifecycle**:
 
 1. **User Action:** The user interacts with a web application. This could be clicking a link, submitting a form, or typing a URL directly into the browser's address bar.
-2. **HTTP Request:** The client sends an [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) request to the server that contains necessary information about what resources are being requested, what method is being used (e.g. `GET`, `POST`), and additional data if necessary.
+2. **HTTP Request:** The client sends an [HTTP](https://developer.mozilla.org/docs/Web/HTTP) request to the server that contains necessary information about what resources are being requested, what method is being used (e.g. `GET`, `POST`), and additional data if necessary.
 3. **Server:** The server processes the request and responds with the appropriate resources. This process may take a couple of steps like routing, fetching data, etc.
 4. **HTTP Response:** After processing the request, the server sends an HTTP response back to the client. This response contains a status code (which tells the client whether the request was successful or not) and requested resources (e.g. HTML, CSS, JavaScript, static assets, etc).
 5. **Client:** The client parses the resources to render the user interface.

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

@@ -165,7 +165,7 @@ body {
 ```
 
 Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present.
-Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
+Then, [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
 
 ```jsx filename="pages/_app.js"
 import '../styles.css'
@@ -241,7 +241,7 @@ export default function RootLayout({ children }) {
 <PagesOnly>
 
 Next.js allows you to import CSS files from a JavaScript file.
-This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
+This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
 
 ### Import styles from `node_modules`