From 4c3b7f9b7a7b6044059c73c5da34b9111e35fe2d Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Tue, 29 Aug 2023 14:05:44 -0400
Subject: [PATCH 01/24] Export RedirectType from next/navigation (#54729)

A continuation of #51864 with RedirectType used in an e2e test and some
ts-ignores removed from the codebase. Happy to split it into two PRs but
I left comments in the two consequential files

---------
---
 packages/next/src/client/components/navigation.ts             | 2 +-
 packages/next/src/client/components/redirect-boundary.tsx     | 1 -
 packages/third-parties/scripts/update-third-parties.js        | 3 ---
 packages/third-parties/src/google/index.tsx                   | 1 -
 .../fixtures/app-hmr-changes/app/(post)/components/tweet.tsx  | 1 -
 test/e2e/app-dir/app-prefetch/prefetching.test.ts             | 1 -
 .../e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx | 1 -
 test/e2e/app-dir/metadata/app/basic-edge/client.tsx           | 1 -
 test/e2e/app-dir/metadata/app/basic/client.tsx                | 1 -
 test/e2e/app-dir/navigation/app/assertion/page/page.js        | 1 -
 test/e2e/app-dir/navigation/app/assertion/route/route.js      | 1 -
 .../app-dir/navigation/app/redirect/servercomponent-2/page.js | 4 ++--
 test/e2e/app-dir/navigation/middleware.js                     | 1 -
 test/unit/next-babel-loader-dev.test.ts                       | 1 -
 test/unit/next-babel-loader-prod.test.ts                      | 1 -
 15 files changed, 3 insertions(+), 18 deletions(-)

diff --git a/packages/next/src/client/components/navigation.ts b/packages/next/src/client/components/navigation.ts
index 4c28fa60d058c..bf6a56100080d 100644
--- a/packages/next/src/client/components/navigation.ts
+++ b/packages/next/src/client/components/navigation.ts
@@ -238,5 +238,5 @@ export function useSelectedLayoutSegment(
   return selectedLayoutSegments[0]
 }
 
-export { redirect, permanentRedirect } from './redirect'
+export { redirect, permanentRedirect, RedirectType } from './redirect'
 export { notFound } from './not-found'
diff --git a/packages/next/src/client/components/redirect-boundary.tsx b/packages/next/src/client/components/redirect-boundary.tsx
index 6d0cbbba70401..23e5493ae83fb 100644
--- a/packages/next/src/client/components/redirect-boundary.tsx
+++ b/packages/next/src/client/components/redirect-boundary.tsx
@@ -26,7 +26,6 @@ function HandleRedirect({
   const router = useRouter()
 
   useEffect(() => {
-    // @ts-ignore startTransition exists
     React.startTransition(() => {
       if (redirectType === RedirectType.push) {
         router.push(redirect, {})
diff --git a/packages/third-parties/scripts/update-third-parties.js b/packages/third-parties/scripts/update-third-parties.js
index 5f7ed1b30e571..eb690033687a7 100644
--- a/packages/third-parties/scripts/update-third-parties.js
+++ b/packages/third-parties/scripts/update-third-parties.js
@@ -23,10 +23,7 @@ function generateComponent(thirdParty) {
     let props = ''
 
     if (stylesheets?.length > 0) {
-      // TODO: Remove ts-ignore after new <Script> component is published
-      // New <Script> accepts stylesheet as a param. Otherwise it throws error
       props += `
-      // @ts-ignore
       stylesheets={${JSON.stringify(stylesheets)}}`
     }
 
diff --git a/packages/third-parties/src/google/index.tsx b/packages/third-parties/src/google/index.tsx
index 534cb0dbcb451..a648c8ace192c 100644
--- a/packages/third-parties/src/google/index.tsx
+++ b/packages/third-parties/src/google/index.tsx
@@ -30,7 +30,6 @@ export function YoutubeEmbed(args: Types.YoutubeEmbed) {
       <Script
         src={`https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js`}
         strategy="lazyOnload"
-        // @ts-ignore
         stylesheets={[
           'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css',
         ]}
diff --git a/test/development/acceptance-app/fixtures/app-hmr-changes/app/(post)/components/tweet.tsx b/test/development/acceptance-app/fixtures/app-hmr-changes/app/(post)/components/tweet.tsx
index 4cb040f668653..30604d87279c3 100644
--- a/test/development/acceptance-app/fixtures/app-hmr-changes/app/(post)/components/tweet.tsx
+++ b/test/development/acceptance-app/fixtures/app-hmr-changes/app/(post)/components/tweet.tsx
@@ -22,7 +22,6 @@ export async function Tweet({ id, caption }: TweetArgs) {
   return (
     <div className="my-6">
       <div className="flex justify-center">
-        {/* @ts-ignore */}
         <ReactTweet id={id} components={components} />
       </div>
       {caption && <Caption>{caption}</Caption>}
diff --git a/test/e2e/app-dir/app-prefetch/prefetching.test.ts b/test/e2e/app-dir/app-prefetch/prefetching.test.ts
index 71bdc82549408..d1d315c7437d7 100644
--- a/test/e2e/app-dir/app-prefetch/prefetching.test.ts
+++ b/test/e2e/app-dir/app-prefetch/prefetching.test.ts
@@ -1,7 +1,6 @@
 import { createNextDescribe } from 'e2e-utils'
 import { check, waitFor } from 'next-test-utils'
 
-// @ts-ignore
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
 
 const browserConfigWithFixedTime = {
diff --git a/test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx b/test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx
index aaa0f49e5b2ae..7e17899d340f8 100644
--- a/test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx
+++ b/test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx
@@ -1,5 +1,4 @@
 import { ImageResponse } from 'next/server'
-// @ts-ignore
 import { ImageResponse as ImageResponse2 } from '@vercel/og'
 
 // Node.js: Using @vercel/og external package, and should be aliased to "next/server" ImageResponse
diff --git a/test/e2e/app-dir/metadata/app/basic-edge/client.tsx b/test/e2e/app-dir/metadata/app/basic-edge/client.tsx
index f23d5e4ff5e04..13b49fdfdc0ce 100644
--- a/test/e2e/app-dir/metadata/app/basic-edge/client.tsx
+++ b/test/e2e/app-dir/metadata/app/basic-edge/client.tsx
@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'
 
 // NOTE: atm preload/prefetch/prefetchDNS are only supported in the SSR and client, not in RSC yet
 export default function Client() {
-  // @ts-ignore
   ReactDOM.preload('/api/preload', { as: 'script' })
   // @ts-ignore
   ReactDOM.preconnect('/preconnect-url', { crossOrigin: 'use-credentials' })
diff --git a/test/e2e/app-dir/metadata/app/basic/client.tsx b/test/e2e/app-dir/metadata/app/basic/client.tsx
index f23d5e4ff5e04..13b49fdfdc0ce 100644
--- a/test/e2e/app-dir/metadata/app/basic/client.tsx
+++ b/test/e2e/app-dir/metadata/app/basic/client.tsx
@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom'
 
 // NOTE: atm preload/prefetch/prefetchDNS are only supported in the SSR and client, not in RSC yet
 export default function Client() {
-  // @ts-ignore
   ReactDOM.preload('/api/preload', { as: 'script' })
   // @ts-ignore
   ReactDOM.preconnect('/preconnect-url', { crossOrigin: 'use-credentials' })
diff --git a/test/e2e/app-dir/navigation/app/assertion/page/page.js b/test/e2e/app-dir/navigation/app/assertion/page/page.js
index 8ccec520a658d..778c5c0807b30 100644
--- a/test/e2e/app-dir/navigation/app/assertion/page/page.js
+++ b/test/e2e/app-dir/navigation/app/assertion/page/page.js
@@ -1,6 +1,5 @@
 import { strict as assert } from 'node:assert'
 import Link from 'next/link'
-// @ts-ignore
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
 
 export default function Page({ searchParams }) {
diff --git a/test/e2e/app-dir/navigation/app/assertion/route/route.js b/test/e2e/app-dir/navigation/app/assertion/route/route.js
index 30a15365067af..35b4f334bc743 100644
--- a/test/e2e/app-dir/navigation/app/assertion/route/route.js
+++ b/test/e2e/app-dir/navigation/app/assertion/route/route.js
@@ -1,5 +1,4 @@
 import { strict as assert } from 'node:assert'
-// @ts-ignore
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
 
 export function GET(request) {
diff --git a/test/e2e/app-dir/navigation/app/redirect/servercomponent-2/page.js b/test/e2e/app-dir/navigation/app/redirect/servercomponent-2/page.js
index 524221bae5206..cd60cc1f45240 100644
--- a/test/e2e/app-dir/navigation/app/redirect/servercomponent-2/page.js
+++ b/test/e2e/app-dir/navigation/app/redirect/servercomponent-2/page.js
@@ -1,6 +1,6 @@
-import { permanentRedirect } from 'next/navigation'
+import { permanentRedirect, RedirectType } from 'next/navigation'
 
 export default function Page() {
-  permanentRedirect('/redirect/result')
+  permanentRedirect('/redirect/result', RedirectType.push)
   return <></>
 }
diff --git a/test/e2e/app-dir/navigation/middleware.js b/test/e2e/app-dir/navigation/middleware.js
index 21f6b424c3087..264da1fa357be 100644
--- a/test/e2e/app-dir/navigation/middleware.js
+++ b/test/e2e/app-dir/navigation/middleware.js
@@ -1,6 +1,5 @@
 // @ts-check
 import { NextResponse } from 'next/server'
-// @ts-ignore
 import { NEXT_RSC_UNION_QUERY } from 'next/dist/client/components/app-router-headers'
 
 if (NEXT_RSC_UNION_QUERY !== '_rsc') {
diff --git a/test/unit/next-babel-loader-dev.test.ts b/test/unit/next-babel-loader-dev.test.ts
index 90dffe8fdf6d1..72174f1c435c4 100644
--- a/test/unit/next-babel-loader-dev.test.ts
+++ b/test/unit/next-babel-loader-dev.test.ts
@@ -40,7 +40,6 @@ const babel = async (code: string, queryOpts = {} as any) => {
       callback,
       emitWarning() {},
       query: options,
-      // @ts-ignore exists
       getOptions: function () {
         return options
       },
diff --git a/test/unit/next-babel-loader-prod.test.ts b/test/unit/next-babel-loader-prod.test.ts
index 101bdc7faeb87..02c6f8ad3bbef 100644
--- a/test/unit/next-babel-loader-prod.test.ts
+++ b/test/unit/next-babel-loader-prod.test.ts
@@ -41,7 +41,6 @@ const babel = async (code: string, queryOpts = {} as any) => {
       callback,
       emitWarning() {},
       query: options,
-      // @ts-ignore exists
       getOptions: function () {
         return options
       },

From d2e4d2c170039ad4a0d104af6e15a7284718087c Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Wed, 30 Aug 2023 03:34:13 +0900
Subject: [PATCH 02/24] docs: Standardize heading levels (#54590)

## What?

- Updated the heading structure in the documentation to maintain a consistent hierarchy.
- All primary points now use `###` for better readability and understanding of content structure.

## Why?

While reviewing the documentation, I noticed that the heading levels were inconsistent between sections 1, 2, and 3-5.
---
 .../01-routing/03-linking-and-navigating.mdx                | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
index 3e5d4e2a83470..e1a75b8e917a3 100644
--- a/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
+++ b/docs/02-app/01-building-your-application/01-routing/03-linking-and-navigating.mdx
@@ -184,7 +184,7 @@ This means on navigation, the cache is reused as much as possible, instead of ma
 
 Learn more about how the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data) works and how to configure it.
 
-#### 3. Partial Rendering
+### 3. Partial Rendering
 
 Partial rendering means only the route segments that change on navigation re-render on the client, and any shared segments are preserved.
 
@@ -200,10 +200,10 @@ For example, when navigating between two sibling routes, `/dashboard/settings` a
 
 Without partial rendering, each navigation would cause the full page to re-render on the server. Rendering only the segment that changes reduces the amount of data transferred and execution time, leading to improved performance.
 
-#### 4. Soft Navigation
+### 4. Soft Navigation
 
 By default, the browser performs a hard navigation between pages. This means the browser reloads the page and resets React state such as `useState` hooks in your app and browser state such as the user's scroll position or focused element. However, in Next.js, the App Router uses soft navigation. This means React only renders the segments that have changed while preserving React and browser state, and there is no full page reload.
 
-#### 5. Back and Forward Navigation
+### 5. Back and Forward Navigation
 
 By default, Next.js will maintain the scroll position for backwards and forwards navigation, and re-use route segments in the [Router Cache](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data).

From e8c71ed2eabc7a37138305e493104d7c2d52035c Mon Sep 17 00:00:00 2001
From: Igor Gassmann <igor@igassmann.me>
Date: Tue, 29 Aug 2023 21:17:05 +0200
Subject: [PATCH 03/24] docs(upgrading): add "Migrating from Vite" guide
 (#53214)

### What?

This adds to the docs a guide for migrating a Vite application to
Next.js. It also contains a section that lists the reasons why one would
want to switch from Vite to Next.js.

### Why?

This guide is helpful for developers that want to switch to Next.js but
don't know how difficult that would be and how to do it. The "Why?" list
is also helpful to developers who haven't yet been convinced to switch
or need help formulating the reasons to switch to decision-makers.

This guide was [first published on the Inngest
blog](https://www.inngest.com/blog/migrating-from-vite-to-nextjs). To
our own surprise, we were able to [migrate from Vite to
Next.js](https://github.com/inngest/inngest/pull/479) our [Dev Server
app](https://github.com/inngest/inngest/tree/main#the-inngest-dev-server)
in less than a day, which motivated us to share our learnings with the
community.

### How?

The guide aims to have the minimum number of steps to get a working
Next.js application so that
the reader can then adopt Next.js features incrementally. This means the
migration of the router isn't part of this guide. However, this would be
something valuable to document at a later time so that the reader can
also learn how to migrate to the App Router and get all the Next.js
benefits.
---
 .../08-upgrading/03-from-vite.mdx             | 560 ++++++++++++++++++
 1 file changed, 560 insertions(+)
 create mode 100644 docs/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx

diff --git a/docs/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx b/docs/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx
new file mode 100644
index 0000000000000..5becfc7de5493
--- /dev/null
+++ b/docs/02-app/01-building-your-application/08-upgrading/03-from-vite.mdx
@@ -0,0 +1,560 @@
+---
+title: Migrating from Vite
+nav_title: From Vite
+description: Learn how to migrate your existing React application from Vite to Next.js.
+---
+
+This guide will help you migrate an existing Vite application to Next.js.
+
+## Why Switch?
+
+There are several reasons why you might want to switch from Vite to Next.js:
+
+1. **Slow initial page loading time**: If you have built your application with the [default Vite
+   plugin for React](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react),
+   your application is a purely client-side application. Client-side only applications, also known as
+   single-page applications (SPAs), often experience slow initial page loading time. This
+   happens due to a couple of reasons:
+   1. The browser needs to wait for the React code and your entire application bundle to download
+      and run before your code is able to send requests to load some data.
+   1. Your application code grows with every new feature and extra dependency you add.
+1. **No automatic code splitting**: The previous issue of slow loading times can be somewhat managed with code splitting.
+   However, if you try to do code splitting manually, you'll often make performance worse. It's easy
+   to inadvertently introduce network waterfalls when code-splitting manually. Next.js provides
+   automatic code splitting built into its router.
+1. **Network waterfalls**: A common cause of poor performance occurs when applications make
+   sequential client-server requests to fetch data. One common pattern for data fetching in an SPA
+   is to initially render a placeholder, and then fetch data after the component has mounted.
+   Unfortunately, this means that a child component that fetches data can't start fetching until
+   the parent component has finished loading its own data. On Next.js,
+   [this issue is resolved](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#no-client-server-waterfalls)
+   by fetching data in Server Components.
+1. **Fast and intentional loading states**: Thanks to built-in support for
+   [Streaming with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense),
+   with Next.js, you can be more intentional about which parts of your UI you want to load first and
+   in what order without introducing network waterfalls. This enables you to build pages that are
+   faster to load and also eliminate [layout shifts](https://web.dev/cls/).
+1. **Choose the data fetching strategy**: Depending on your needs, Next.js allows you to choose your
+   data fetching strategy on a page and component basis. You can decide to fetch at build time, at
+   request time on the server, or on the client. For example, you can fetch data from your CMS and
+   render your blog posts at build time, which can then be efficiently cached on a CDN.
+1. **Middleware**: [Next.js Middleware](/docs/app/building-your-application/routing/middleware)
+   allows you to run code on the server before a request is completed. This is especially useful to
+   avoid having a flash of unauthenticated content when the user visits an authenticated-only page
+   by redirecting the user to a login page. The middleware is also useful for experimentation and
+   internationalization.
+1. **Built-in Optimizations**: Images, fonts, and third-party scripts often have significant impact
+   on an application's performance. Next.js comes with built-in components that automatically
+   optimize those for you.
+
+## Migration Steps
+
+Our goal with this migration is to get a working Next.js application as quickly as possible, so that
+you can then adopt Next.js features incrementally. To begin with, we'll keep it as a purely
+client-side application (SPA) without migrating your existing router. This helps minimize the
+chances of encountering issues during the migration process and reduces merge conflicts.
+
+### Step 1: Install the Next.js Dependency
+
+The first thing you need to do is to install `next` as a dependency:
+
+```bash filename="Terminal"
+npm install next@latest
+```
+
+### Step 2: Create the Next.js Configuration File
+
+Create a `next.config.mjs` at the root of your project. This file will hold your
+[Next.js configuration options](/docs/app/api-reference/next-config-js).
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // Outputs a Single-Page Application (SPA).
+  distDir: './dist', // Changes the build output directory to `./dist/`.
+}
+
+export default nextConfig
+```
+
+> **Good to know:** You can use either `.js` or `.mjs` for your Next.js configuration file.
+
+### Step 3: Update TypeScript Configuration
+
+If you're using TypeScript, you need to update your `tsconfig.json` file with the following changes
+to make it compatible with Next.js. If you're not using TypeScript, you can skip this step.
+
+1. Remove the [project reference](https://www.typescriptlang.org/tsconfig#references) to `tsconfig.node.json`
+2. Add `./dist/types/**/*.ts` and `./next-env.d.ts` to the [`include` array](https://www.typescriptlang.org/tsconfig#include)
+3. Add `./node_modules` to the [`exclude` array](https://www.typescriptlang.org/tsconfig#exclude)
+4. Add `{ "name": "next" }` to the [`plugins` array in `compilerOptions`](https://www.typescriptlang.org/tsconfig#plugins): `"plugins": [{ "name": "next" }]`
+5. Set [`esModuleInterop`](https://www.typescriptlang.org/tsconfig#esModuleInterop) to `true`: `"esModuleInterop": true`
+6. Set [`jsx`](https://www.typescriptlang.org/tsconfig#jsx) to `preserve`: `"jsx": "preserve"`
+7. Set [`allowJs`](https://www.typescriptlang.org/tsconfig#allowJs) to `true`: `"allowJs": true`
+8. Set [`forceConsistentCasingInFileNames`](https://www.typescriptlang.org/tsconfig#forceConsistentCasingInFileNames) to `true`: `"forceConsistentCasingInFileNames": true`
+9. Set [`incremental`](https://www.typescriptlang.org/tsconfig#incremental) to `true`: `"incremental": true`
+
+Here's an example of a working `tsconfig.json` with those changes:
+
+```json filename="tsconfig.json"
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["./src", "./dist/types/**/*.ts", "./next-env.d.ts"],
+  "exclude": ["./node_modules"]
+}
+```
+
+You can find more information about configuring TypeScript on the
+[Next.js docs](/docs/app/building-your-application/configuring/typescript#typescript-plugin).
+
+### Step 4: Create the Root Layout
+
+A Next.js [App Router](/docs/app) application must include a
+[root layout](/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required)
+file, which is a [React Server Component](/docs/app/building-your-application/rendering/server-components)
+that will wrap all pages in your application. This file is defined at the top level of the `app`
+directory.
+
+The closest equivalent to the root layout file in a Vite application is the
+[`index.html` file](https://vitejs.dev/guide/#index-html-and-project-root), which contains your
+`<html>`, `<head>`, and `<body>` tags.
+
+In this step, you'll convert your `index.html` file into a root layout file:
+
+1. Create a new `app` directory in your `src` directory.
+2. Create a new `layout.tsx` file inside that `app` directory:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return null
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return null
+}
+```
+
+> **Good to know**: `.js`, `.jsx`, or `.tsx` extensions can be used for Layout files.
+
+3. Copy the content of your `index.html` file into the previously created `<RootLayout>` component while
+   replacing the `body.div#root` and `body.script` tags with `<div id="root">{children}</div>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+4. Next.js already includes by default the
+   [meta charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#charset) and
+   [meta viewport](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag) tags, so you
+   can safely remove those from your `<head>`:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+5. Any [metadata files](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)
+   such as `favicon.ico`, `icon.png`, `robots.txt` are automatically added to the application
+   `<head>` tag as long as you have them placed into the top level of the `app` directory. After
+   moving
+   [all supported files](/docs/app/building-your-application/optimizing/metadata#file-based-metadata)
+   into the `app` directory you can safely delete their `<link>` tags:
+
+```tsx filename="app/layout.tsx" switcher
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>My App</title>
+        <meta name="description" content="My App is a..." />
+      </head>
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+6. Finally, Next.js can manage your last `<head>` tags with the
+   [Metadata API](/docs/app/building-your-application/optimizing/metadata). Move your final metadata
+   info into an exported
+   [`metadata` object](/docs/app/api-reference/functions/generate-metadata#metadata-object):
+
+```tsx filename="app/layout.tsx" switcher
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+```jsx filename="app/layout.js" switcher
+export const metadata = {
+  title: 'My App',
+  description: 'My App is a...',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  )
+}
+```
+
+With the above changes, you shifted from declaring everything in your `index.html` to using Next.js'
+convention-based approach built into the framework
+([Metadata API](/docs/app/building-your-application/optimizing/metadata)). This approach enables you
+to more easily improve your SEO and web shareability of your pages.
+
+### Step 5: Create the Entrypoint Page
+
+On Next.js you declare an entrypoint for your application by creating a `page.tsx` file. The
+closest equivalent of this file on Vite is your `main.tsx` file. In this step, you’ll set up the
+entrypoint of your application.
+
+1. **Create a `[[...slug]]` directory in your `app` directory.**
+
+Since in this guide we're aiming first to set up our Next.js as an SPA (Single Page Application),
+you need your page entrypoint to catch all possible routes of your application. For that, create a
+new `[[...slug]]` directory in your `app` directory.
+
+This directory is what is called an
+[optional catch-all route segment](/docs/app/building-your-application/routing/dynamic-routes#optional-catch-all-segments).
+Next.js uses a file-system based router where
+[directories are used to define routes](/docs/app/building-your-application/routing/defining-routes#creating-routes).
+This special directory will make sure that all routes of your application will be directed to its
+containing `page.tsx` file.
+
+2. **Create a new `page.tsx` file inside the `app/[[...slug]]` directory with the following content:**
+
+```tsx filename="app/[[...slug]]/page.tsx" switcher
+'use client'
+
+import dynamic from 'next/dynamic'
+import '../../index.css'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export default function Page() {
+  return <App />
+}
+```
+
+```jsx filename="app/[[...slug]]/page.js" switcher
+'use client'
+
+import dynamic from 'next/dynamic'
+import '../../index.css'
+
+const App = dynamic(() => import('../../App'), { ssr: false })
+
+export default function Page() {
+  return <App />
+}
+```
+
+> **Good to know**: `.js`, `.jsx`, or `.tsx` extensions can be used for Page files.
+
+This file contains a `<Page>` component which is marked as a
+[Client Component](/docs/app/building-your-application/rendering/client-components) by the `'use client'`
+directive. Without that directive, the component would have been a
+[Server Component](/docs/app/building-your-application/rendering/server-components).
+
+In Next.js, Client Components are [prerendered to HTML](/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered)
+on the server before being sent to the client, but since we want to first have a purely client-side
+application, you need to tell Next.js to disable the prerendering for the `<App>` component by
+dynamically importing it with the `ssr` option set to `false`:
+
+```tsx
+const App = dynamic(() => import('../../App'), { ssr: false })
+```
+
+### Step 6: Update Static Image Imports
+
+Next.js handles static image imports slightly different from Vite. With Vite, importing an image
+file will return its public URL as a string:
+
+```tsx filename="App.tsx"
+import image from './img.png' // `image` will be '/assets/img.2d8efhg.png' in production
+
+export default function App() {
+  return <img src={image} />
+}
+```
+
+With Next.js, static image imports return an object. The object can then be used directly with the
+Next.js [`<Image>` component](/docs/app/api-reference/components/image), or you can use the object's
+`src` property with your existing `<img>` tag.
+
+The `<Image>` component has the added benefits of
+[automatic image optimization](/docs/app/building-your-application/optimizing/images). The `<Image>`
+component automatically sets the `width` and `height` attributes of the resulting `<img>` based on
+the image's dimensions. This prevents layout shifts when the image loads. However, this can cause
+issues if your app contains images with only one of their dimensions being styled without the other
+styled to `auto`. When not styled to `auto`, the dimension will default to the `<img>` dimension
+attribute's value, which can cause the image to appear distorted.
+
+Keeping the `<img>` tag will reduce the amount of changes in your application and prevent the above
+issues. However, you'll still want to later migrate to the `<Image>` component to take advantage of
+the automatic optimizations.
+
+1. **Convert absolute import paths for images imported from `/public` into relative imports:**
+
+```tsx
+// Before
+import logo from '/logo.png'
+
+// After
+import logo from '../public/logo.png'
+```
+
+2. **Pass the image `src` property instead of the whole image object to your `<img>` tag:**
+
+```tsx
+// Before
+<img src={logo} />
+
+// After
+<img src={logo.src} />
+```
+
+> **Warning:** If you're using TypeScript, you might encounter type errors when accessing the `src`
+> property. You can safely ignore those for now. They will be fixed by the end of this guide.
+
+### Step 7: Migrate the Environment Variables
+
+Next.js has support for `.env`
+[environment variables](/docs/app/building-your-application/configuring/environment-variables)
+similar to Vite. The main difference is the prefix used to expose environment variables on the
+client-side.
+
+- Change all environment variables with the `VITE_` prefix to `NEXT_PUBLIC_`.
+
+Vite exposes a few built-in environment variables on the special `import.meta.env` object which
+aren’t supported by Next.js. You need to update their usage as follows:
+
+- `import.meta.env.MODE` ⇒ `process.env.NODE_ENV`
+- `import.meta.env.PROD` ⇒ `process.env.NODE_ENV === 'production'`
+- `import.meta.env.DEV` ⇒ `process.env.NODE_ENV !== 'production'`
+- `import.meta.env.SSR` ⇒ `typeof window !== 'undefined'`
+
+Next.js also doesn't provide a built-in `BASE_URL` environment variable. However, you can still
+configure one, if you need it:
+
+1. **Add the following to your `.env` file:**
+
+```bash filename=".env"
+# ...
+NEXT_PUBLIC_BASE_PATH="/some-base-path"
+```
+
+2. **Set [`basePath`](/docs/app/api-reference/next-config-js/basePath) to `process.env.NEXT_PUBLIC_BASE_PATH` in your `next.config.mjs` file:**
+
+```js filename="next.config.mjs"
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export', // Outputs a Single-Page Application (SPA).
+  distDir: './dist', // Changes the build output directory to `./dist/`.
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH, // Sets the base path to `/some-base-path`.
+}
+
+export default nextConfig
+```
+
+3. **Update `import.meta.env.BASE_URL` usages to `process.env.NEXT_PUBLIC_BASE_PATH`**
+
+### Step 8: Update Scripts in `package.json`
+
+You should now be able to run your application to test if you successfully migrated to Next.js. But
+before that, you need to update your `scripts` in your `package.json` with Next.js related commands,
+and add `.next` and `next-env.d.ts` to your `.gitignore`:
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  }
+}
+```
+
+```txt filename=".gitignore"
+# ...
+.next
+next-env.d.ts
+```
+
+Now run `npm run dev`, and open [`http://localhost:3000`](http://localhost:3000). You should
+hopefully see your application now running on Next.js.
+
+If your application followed a conventional Vite configuration, this is all you would need to do
+to have a working version of your application.
+
+> **Example:** Check out [this pull request](https://github.com/inngest/vite-to-nextjs/pull/1) for a
+> working example of a Vite application migrated to Next.js.
+
+### Step 9: Clean Up
+
+You can now clean up your codebase from Vite related artifacts:
+
+- Delete `main.tsx`
+- Delete `index.html`
+- Delete `vite-env.d.ts`
+- Delete `tsconfig.node.json`
+- Delete `vite.config.ts`
+- Uninstall Vite dependencies
+
+## Next Steps
+
+If everything went according to plan, you now have a functioning Next.js application running as a
+single-page application. However, you aren't yet taking advantage of most of Next.js' benefits, but
+you can now start making incremental changes to reap all the benefits. Here's what you might want to
+do next:
+
+- Migrate from React Router to the [Next.js App Router](/docs/app/building-your-application/routing) to get:
+  - Automatic code splitting
+  - [Streaming Server-Rendering](/docs/app/building-your-application/routing/loading-ui-and-streaming)
+  - [React Server Components](/docs/app/building-your-application/rendering/server-components)
+- [Optimize images with the `<Image>` component](/docs/app/building-your-application/optimizing/images)
+- [Optimize fonts with `next/font`](/docs/app/building-your-application/optimizing/fonts)
+- [Optimize third-party scripts with the `<Script>` component](/docs/app/building-your-application/optimizing/scripts)
+- [Update your ESLint configuration to support Next.js rules](/docs/app/building-your-application/configuring/eslint)

From e86029426425c3c9be2807920a4e4aa791562a60 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 29 Aug 2023 21:21:04 +0200
Subject: [PATCH 04/24] Improve Pages Router types (#54731)

Small change to add additional `as const` which allows us to get rid of
some `as any` :+1:
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 packages/next/src/client/router.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/next/src/client/router.ts b/packages/next/src/client/router.ts
index 1172177c00718..342ecb623df74 100644
--- a/packages/next/src/client/router.ts
+++ b/packages/next/src/client/router.ts
@@ -20,10 +20,10 @@ export type SingletonRouter = SingletonRouterBase & NextRouter
 const singletonRouter: SingletonRouterBase = {
   router: null, // holds the actual router instance
   readyCallbacks: [],
-  ready(cb: () => void) {
-    if (this.router) return cb()
+  ready(callback: () => void) {
+    if (this.router) return callback()
     if (typeof window !== 'undefined') {
-      this.readyCallbacks.push(cb)
+      this.readyCallbacks.push(callback)
     }
   },
 }
@@ -44,7 +44,7 @@ const urlPropertyFields = [
   'isPreview',
   'isLocaleDomain',
   'domainLocales',
-]
+] as const
 const routerEvents = [
   'routeChangeStart',
   'beforeHistoryChange',
@@ -62,7 +62,7 @@ const coreMethodFields = [
   'back',
   'prefetch',
   'beforePopState',
-]
+] as const
 
 // Events is a static property on the router, the router doesn't have to be initialized to use it
 Object.defineProperty(singletonRouter, 'events', {
@@ -81,20 +81,20 @@ function getRouter(): Router {
   return singletonRouter.router
 }
 
-urlPropertyFields.forEach((field: string) => {
+urlPropertyFields.forEach((field) => {
   // Here we need to use Object.defineProperty because we need to return
   // the property assigned to the actual router
   // The value might get changed as we change routes and this is the
   // proper way to access it
   Object.defineProperty(singletonRouter, field, {
     get() {
-      const router = getRouter() as any
+      const router = getRouter()
       return router[field] as string
     },
   })
 })
 
-coreMethodFields.forEach((field: string) => {
+coreMethodFields.forEach((field) => {
   // We don't really know the types here, so we add them later instead
   ;(singletonRouter as any)[field] = (...args: any[]) => {
     const router = getRouter() as any

From fc48fc8c4cbb718646f1c3cb89de5af87f392567 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <accounts+github@wyattjoh.ca>
Date: Tue, 29 Aug 2023 13:34:33 -0600
Subject: [PATCH 05/24] Update CODEOWNERS (#54738)

---
 .github/CODEOWNERS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 969bde6ea2fde..ba611c1430e2b 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -2,7 +2,7 @@
 # https://help.github.com/en/articles/about-code-owners
 
 
-*                                             @timneutkens @ijjk @shuding @huozhi @feedthejim @ztanner
+*                                             @timneutkens @ijjk @shuding @huozhi @feedthejim @ztanner @wyattjoh
 /.git*                                        @vercel/next-js @vercel/devex
 /docs/                                        @vercel/next-js @vercel/devex
 /errors/                                      @vercel/next-js @vercel/devex

From 20d05958ff853e9c9e42139ffec294336881c648 Mon Sep 17 00:00:00 2001
From: Tommaso De Rossi <beats.by.morse@gmail.com>
Date: Tue, 29 Aug 2023 22:18:25 +0200
Subject: [PATCH 06/24] Add cache control header for prefetch empty responses
 (#54732)

Fix #45301

If you deploy Next.js with in front Cloudflare, empty prefetch responses will be cached because there is no `cache-control` header and the extension is .json, Cloudflare considers these requests cacheable assets

If you want a test for this I would like to know if there is an existing one where I can add the header check
---
 packages/next/src/server/base-server.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 4df4afb76c4b0..c3e23e1bf004c 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -1614,6 +1614,10 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       !(is404Page || pathname === '/_error')
     ) {
       res.setHeader('x-middleware-skip', '1')
+      res.setHeader(
+        'cache-control',
+        'private, no-cache, no-store, max-age=0, must-revalidate'
+      )
       res.body('{}').send()
       return null
     }

From ac1e392cc7750a32f4540d5fbee1975e95341d1a Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 29 Aug 2023 22:31:06 +0200
Subject: [PATCH 07/24] Remove experimental.legacyBrowsers as it is stable
 (#54718)

This experimental option went to stable in Next.js 13, so this code was
leftover from then.
The reason `true` wasn't needed is that you can provide your own
`browserslistrc` that will allow targeting any browsers needed.

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 packages/next/src/build/utils.ts              | 11 ++---
 packages/next/src/build/webpack-config.ts     |  3 +-
 packages/next/src/server/config-schema.ts     |  3 --
 packages/next/src/server/config-shared.ts     |  2 -
 ...owsers-false.test.ts => default-target.ts} |  4 +-
 .../browserslist/legacybrowsers-true.test.ts  | 47 -------------------
 6 files changed, 6 insertions(+), 64 deletions(-)
 rename test/e2e/browserslist/{legacybrowsers-false.test.ts => default-target.ts} (90%)
 delete mode 100644 test/e2e/browserslist/legacybrowsers-true.test.ts

diff --git a/packages/next/src/build/utils.ts b/packages/next/src/build/utils.ts
index 8cb1299618af9..8ca734be0f830 100644
--- a/packages/next/src/build/utils.ts
+++ b/packages/next/src/build/utils.ts
@@ -2067,8 +2067,7 @@ export class NestedMiddlewareError extends Error {
 
 export function getSupportedBrowsers(
   dir: string,
-  isDevelopment: boolean,
-  config: NextConfigComplete
+  isDevelopment: boolean
 ): string[] | undefined {
   let browsers: any
   try {
@@ -2087,10 +2086,6 @@ export function getSupportedBrowsers(
     return browsers
   }
 
-  // When the user sets `legacyBrowsers: true`, we pass undefined
-  // to SWC which is basically ES5 and matches the default behavior
-  // prior to Next.js 13
-  return config.experimental.legacyBrowsers
-    ? undefined
-    : MODERN_BROWSERSLIST_TARGET
+  // Uses modern browsers as the default.
+  return MODERN_BROWSERSLIST_TARGET
 }
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index e684b766fd995..90e755fe5f29e 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -735,7 +735,7 @@ export async function loadProjectInfo({
   dev: boolean
 }) {
   const { jsConfig, resolvedBaseUrl } = await loadJsConfig(dir, config)
-  const supportedBrowsers = await getSupportedBrowsers(dir, dev, config)
+  const supportedBrowsers = await getSupportedBrowsers(dir, dev)
   return {
     jsConfig,
     resolvedBaseUrl,
@@ -2736,7 +2736,6 @@ export default async function getBaseWebpackConfig(
     relay: config.compiler?.relay,
     emotion: config.compiler?.emotion,
     modularizeImports: config.modularizeImports,
-    legacyBrowsers: config.experimental?.legacyBrowsers,
     imageLoaderFile: config.images.loaderFile,
   })
 
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index b2f974bc69c2d..f7f8405279744 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -350,9 +350,6 @@ const configSchema = {
         largePageDataBytes: {
           type: 'number',
         },
-        legacyBrowsers: {
-          type: 'boolean',
-        },
         manualClientBasePath: {
           type: 'boolean',
         },
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index a9e34c7c0b6c6..25caaef8d6f68 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -164,7 +164,6 @@ export interface ExperimentalConfig {
   fetchCacheKeyPrefix?: string
   optimisticClientCache?: boolean
   middlewarePrefetch?: 'strict' | 'flexible'
-  legacyBrowsers?: boolean
   manualClientBasePath?: boolean
   newNextLinkBehavior?: boolean
   // custom path to a cache handler to use
@@ -711,7 +710,6 @@ export const defaultConfig: NextConfig = {
     middlewarePrefetch: 'flexible',
     optimisticClientCache: true,
     manualClientBasePath: false,
-    legacyBrowsers: false,
     newNextLinkBehavior: true,
     cpus: Math.max(
       1,
diff --git a/test/e2e/browserslist/legacybrowsers-false.test.ts b/test/e2e/browserslist/default-target.ts
similarity index 90%
rename from test/e2e/browserslist/legacybrowsers-false.test.ts
rename to test/e2e/browserslist/default-target.ts
index 4b41225a295bf..5fa07f3a11d54 100644
--- a/test/e2e/browserslist/legacybrowsers-false.test.ts
+++ b/test/e2e/browserslist/default-target.ts
@@ -5,7 +5,7 @@ import path from 'path'
 import cheerio from 'cheerio'
 const appDir = path.join(__dirname, 'app')
 
-describe('legacyBrowsers: false', () => {
+describe('default browserslist target', () => {
   let next: NextInstance
 
   beforeAll(async () => {
@@ -18,7 +18,7 @@ describe('legacyBrowsers: false', () => {
   })
   afterAll(() => next.destroy())
 
-  it('should apply legacyBrowsers: false by default', async () => {
+  it('should apply default browserslist target', async () => {
     const html = await renderViaHTTP(next.url, '/')
     const $ = cheerio.load(html)
 
diff --git a/test/e2e/browserslist/legacybrowsers-true.test.ts b/test/e2e/browserslist/legacybrowsers-true.test.ts
deleted file mode 100644
index a7b7524fb263e..0000000000000
--- a/test/e2e/browserslist/legacybrowsers-true.test.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { createNext, FileRef } from 'e2e-utils'
-import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP, fetchViaHTTP } from 'next-test-utils'
-import path from 'path'
-import cheerio from 'cheerio'
-const appDir = path.join(__dirname, 'app')
-
-describe('legacyBrowsers: true', () => {
-  let next: NextInstance
-
-  beforeAll(async () => {
-    next = await createNext({
-      files: {
-        pages: new FileRef(path.join(appDir, 'pages')),
-      },
-      nextConfig: {
-        experimental: {
-          legacyBrowsers: true,
-        },
-      },
-      dependencies: {},
-    })
-  })
-  afterAll(() => next.destroy())
-
-  it('should apply legacyBrowsers: true', async () => {
-    const html = await renderViaHTTP(next.url, '/')
-    const $ = cheerio.load(html)
-
-    let finished = false
-    await Promise.all(
-      $('script')
-        .toArray()
-        .map(async (el) => {
-          const src = $(el).attr('src')
-          if (!src) return
-          if (src.includes('/index')) {
-            const res = await fetchViaHTTP(next.url, src)
-            const code = await res.text()
-            expect(code).not.toMatch('()=>')
-            finished = true
-          }
-        })
-    )
-    expect(finished).toBe(true)
-  })
-})

From e90f127896bc36cf5a861e7a26ff73da25228206 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 29 Aug 2023 22:32:03 +0200
Subject: [PATCH 08/24] Remove experimental.swcFileReading as it is stable
 (#54721)

This feature has been landed long ago and the experimental option was
leftover. This PR removes it.

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 packages/next/src/build/webpack-config.ts                  | 1 -
 packages/next/src/build/webpack/loaders/next-swc-loader.ts | 2 --
 packages/next/src/lib/turbopack-warning.ts                 | 1 -
 packages/next/src/server/config-schema.ts                  | 3 ---
 packages/next/src/server/config-shared.ts                  | 2 --
 5 files changed, 9 deletions(-)

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 90e755fe5f29e..33c51960047f6 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -907,7 +907,6 @@ export default async function getBaseWebpackConfig(
         appDir,
         hasReactRefresh: dev && isClient,
         hasServerComponents: true,
-        fileReading: config.experimental.swcFileReading,
         nextConfig: config,
         jsConfig,
         supportedBrowsers,
diff --git a/packages/next/src/build/webpack/loaders/next-swc-loader.ts b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
index 9d26ab993f28b..79253bf59acf5 100644
--- a/packages/next/src/build/webpack/loaders/next-swc-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
@@ -133,11 +133,9 @@ const EXCLUDED_PATHS =
 export function pitch(this: any) {
   const callback = this.async()
   ;(async () => {
-    let loaderOptions = this.getOptions() || {}
     if (
       // TODO: investigate swc file reading in PnP mode?
       !process.versions.pnp &&
-      loaderOptions.fileReading &&
       !EXCLUDED_PATHS.test(this.resourcePath) &&
       this.loaders.length - 1 === this.loaderIndex &&
       isAbsolute(this.resourcePath) &&
diff --git a/packages/next/src/lib/turbopack-warning.ts b/packages/next/src/lib/turbopack-warning.ts
index ff75efa49c860..e2f9470b2a208 100644
--- a/packages/next/src/lib/turbopack-warning.ts
+++ b/packages/next/src/lib/turbopack-warning.ts
@@ -24,7 +24,6 @@ const supportedTurbopackNextConfigOptions = [
   'experimental.serverComponentsExternalPackages',
   'experimental.turbo',
   'experimental.mdxRs',
-  'experimental.swcFileReading',
   'experimental.forceSwcTransforms',
   // options below are not really supported, but ignored
   'webpack',
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index f7f8405279744..56b7d67d0b3ae 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -421,9 +421,6 @@ const configSchema = {
         strictNextHead: {
           type: 'boolean',
         },
-        swcFileReading: {
-          type: 'boolean',
-        },
         swcMinify: {
           type: 'boolean',
         },
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 25caaef8d6f68..3ee94e9049a54 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -170,7 +170,6 @@ export interface ExperimentalConfig {
   incrementalCacheHandlerPath?: string
   disablePostcssPresetEnv?: boolean
   swcMinify?: boolean
-  swcFileReading?: boolean
   cpus?: number
   memoryBasedWorkersCount?: boolean
   sharedPool?: boolean
@@ -728,7 +727,6 @@ export const defaultConfig: NextConfig = {
     externalDir: false,
     disableOptimizedLoading: false,
     gzipSize: true,
-    swcFileReading: true,
     craCompat: false,
     esmExternals: true,
     appDir: true,

From 593ec3096e2f3b198aa986ce8a77b0f3b1edc45c Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 29 Aug 2023 22:32:32 +0200
Subject: [PATCH 09/24] Remove leftover webpack config compat code (#54715)

This logic is no longer used as these plugins have been
deprecated/removed for a long time.

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 packages/next/src/build/webpack-config.ts | 92 -----------------------
 1 file changed, 92 deletions(-)

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 33c51960047f6..d0d1e6a2af398 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -3111,98 +3111,6 @@ export default async function getBaseWebpackConfig(
     }
   }
 
-  // Patch `@zeit/next-sass`, `@zeit/next-less`, `@zeit/next-stylus` for compatibility
-  if (webpackConfig.module && Array.isArray(webpackConfig.module.rules)) {
-    ;[].forEach.call(
-      webpackConfig.module.rules,
-      function (rule: webpack.RuleSetRule) {
-        if (!(rule.test instanceof RegExp && Array.isArray(rule.use))) {
-          return
-        }
-
-        const isSass =
-          rule.test.source === '\\.scss$' || rule.test.source === '\\.sass$'
-        const isLess = rule.test.source === '\\.less$'
-        const isCss = rule.test.source === '\\.css$'
-        const isStylus = rule.test.source === '\\.styl$'
-
-        // Check if the rule we're iterating over applies to Sass, Less, or CSS
-        if (!(isSass || isLess || isCss || isStylus)) {
-          return
-        }
-
-        ;[].forEach.call(rule.use, function (use: webpack.RuleSetUseItem) {
-          if (
-            !(
-              use &&
-              typeof use === 'object' &&
-              // Identify use statements only pertaining to `css-loader`
-              (use.loader === 'css-loader' ||
-                use.loader === 'css-loader/locals') &&
-              use.options &&
-              typeof use.options === 'object' &&
-              // The `minimize` property is a good heuristic that we need to
-              // perform this hack. The `minimize` property was only valid on
-              // old `css-loader` versions. Custom setups (that aren't next-sass,
-              // next-less or next-stylus) likely have the newer version.
-              // We still handle this gracefully below.
-              (Object.prototype.hasOwnProperty.call(use.options, 'minimize') ||
-                Object.prototype.hasOwnProperty.call(
-                  use.options,
-                  'exportOnlyLocals'
-                ))
-            )
-          ) {
-            return
-          }
-
-          // Try to monkey patch within a try-catch. We shouldn't fail the build
-          // if we cannot pull this off.
-          // The user may not even be using the `next-sass` or `next-less` or
-          // `next-stylus` plugins.
-          // If it does work, great!
-          try {
-            // Resolve the version of `@zeit/next-css` as depended on by the Sass,
-            // Less or Stylus plugin.
-            const correctNextCss = require.resolve('@zeit/next-css', {
-              paths: [
-                isCss
-                  ? // Resolve `@zeit/next-css` from the base directory
-                    dir
-                  : // Else, resolve it from the specific plugins
-                    require.resolve(
-                      isSass
-                        ? '@zeit/next-sass'
-                        : isLess
-                        ? '@zeit/next-less'
-                        : isStylus
-                        ? '@zeit/next-stylus'
-                        : 'next'
-                    ),
-              ],
-            })
-
-            // If we found `@zeit/next-css` ...
-            if (correctNextCss) {
-              // ... resolve the version of `css-loader` shipped with that
-              // package instead of whichever was hoisted highest in your
-              // `node_modules` tree.
-              const correctCssLoader = require.resolve(use.loader, {
-                paths: [correctNextCss],
-              })
-              if (correctCssLoader) {
-                // We saved the user from a failed build!
-                use.loader = correctCssLoader
-              }
-            }
-          } catch (_) {
-            // The error is not required to be handled.
-          }
-        })
-      }
-    )
-  }
-
   // Backwards compat for `main.js` entry key
   // and setup of dependencies between entries
   // we can't do that in the initial entry for

From dc9f30c1064ea72aef2fd046da2f1d2722b89735 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 29 Aug 2023 22:49:00 +0200
Subject: [PATCH 10/24] Remove experimental.newNextLinkBehavior as it's stable
 (#54720)

Cleans up some code that is not used anymore as this feature went stable
in Next.js 13.

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 packages/next-codemod/bin/cli.ts                         | 2 +-
 .../next-core/js/src/build/client/app-turbopack.ts       | 3 ---
 .../crates/next-core/js/src/entry/app-renderer.tsx       | 2 --
 .../crates/next-core/js/src/entry/app/hydrate.tsx        | 2 --
 packages/next/src/build/jest/jest.ts                     | 9 ++-------
 packages/next/src/build/webpack-config.ts                | 3 ---
 packages/next/src/client/link.tsx                        | 3 +--
 packages/next/src/server/config-schema.ts                | 3 ---
 packages/next/src/server/config-shared.ts                | 2 --
 9 files changed, 4 insertions(+), 25 deletions(-)

diff --git a/packages/next-codemod/bin/cli.ts b/packages/next-codemod/bin/cli.ts
index 4f1b524f02567..92bbd9df9437a 100644
--- a/packages/next-codemod/bin/cli.ts
+++ b/packages/next-codemod/bin/cli.ts
@@ -132,7 +132,7 @@ const TRANSFORMER_INQUIRER_CHOICES = [
     value: 'cra-to-next',
   },
   {
-    name: 'new-link: Ensures your <Link> usage is backwards compatible. Used in combination with experimental newNextLinkBehavior',
+    name: 'new-link: Ensures your <Link> usage is backwards compatible.',
     value: 'new-link',
   },
   {
diff --git a/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts b/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts
index 8b3c05382a8f8..c1a4011904f99 100644
--- a/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts
+++ b/packages/next-swc/crates/next-core/js/src/build/client/app-turbopack.ts
@@ -1,6 +1,3 @@
-// @ts-expect-error
-process.env.__NEXT_NEW_LINK_BEHAVIOR = true
-
 // eslint-disable-next-line no-undef
 self.__next_require__ = __turbopack_require__
 
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx b/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx
index ac86f5a29219d..951f91570d92d 100644
--- a/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx
+++ b/packages/next-swc/crates/next-core/js/src/entry/app-renderer.tsx
@@ -25,8 +25,6 @@ import { IncrementalCache } from 'next/dist/server/lib/incremental-cache'
 
 installRequireAndChunkLoad()
 
-process.env.__NEXT_NEW_LINK_BEHAVIOR = 'true'
-
 const MIME_TEXT_HTML_UTF8 = 'text/html; charset=utf-8'
 
 startOperationStreamHandler(async (renderData: RenderData, respond) => {
diff --git a/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx b/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx
index d713ab7e31570..abdf23d0fd7d3 100644
--- a/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx
+++ b/packages/next-swc/crates/next-core/js/src/entry/app/hydrate.tsx
@@ -25,8 +25,6 @@ globalThis.__next_require__ = (data) => {
 }
 globalThis.__next_chunk_load__ = __turbopack_load__
 
-process.env.__NEXT_NEW_LINK_BEHAVIOR = 'true'
-
 const appElement = document
 
 const getCacheKey = () => {
diff --git a/packages/next/src/build/jest/jest.ts b/packages/next/src/build/jest/jest.ts
index 37c924f0d0ae0..db3c1a9c440cd 100644
--- a/packages/next/src/build/jest/jest.ts
+++ b/packages/next/src/build/jest/jest.ts
@@ -1,7 +1,6 @@
 import { loadEnvConfig } from '@next/env'
 import { resolve, join } from 'path'
 import loadConfig from '../../server/config'
-import type { NextConfigComplete } from '../../server/config-shared'
 import { PHASE_TEST } from '../../shared/lib/constants'
 import loadJsConfig from '../load-jsconfig'
 import * as Log from '../output/log'
@@ -31,13 +30,9 @@ function loadClosestPackageJson(dir: string, attempts = 1): any {
 }
 
 /** Loads dotenv files and sets environment variables based on next config. */
-function setUpEnv(dir: string, nextConfig: NextConfigComplete) {
+function setUpEnv(dir: string) {
   const dev = false
   loadEnvConfig(dir, dev, Log)
-
-  if (nextConfig.experimental.newNextLinkBehavior) {
-    process.env.__NEXT_NEW_LINK_BEHAVIOR = 'true'
-  }
 }
 
 /*
@@ -82,7 +77,7 @@ export default function nextJest(options: { dir?: string } = {}) {
         const findPagesDirResult = findPagesDir(resolvedDir, isAppDirEnabled)
         hasServerComponents = !!findPagesDirResult.appDir
         pagesDir = findPagesDirResult.pagesDir
-        setUpEnv(resolvedDir, nextConfig)
+        setUpEnv(resolvedDir)
         // TODO: revisit when bug in SWC is fixed that strips `.css`
         const result = await loadJsConfig(resolvedDir, nextConfig)
         jsConfig = result.jsConfig
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index d0d1e6a2af398..92bfa627938ba 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -280,9 +280,6 @@ export function getDefineEnv({
     'process.env.__NEXT_MANUAL_CLIENT_BASE_PATH': JSON.stringify(
       config.experimental.manualClientBasePath
     ),
-    'process.env.__NEXT_NEW_LINK_BEHAVIOR': JSON.stringify(
-      config.experimental.newNextLinkBehavior
-    ),
     'process.env.__NEXT_CLIENT_ROUTER_FILTER_ENABLED': JSON.stringify(
       config.experimental.clientRouterFilter
     ),
diff --git a/packages/next/src/client/link.tsx b/packages/next/src/client/link.tsx
index 3c8ed097c98eb..6048a87191c46 100644
--- a/packages/next/src/client/link.tsx
+++ b/packages/next/src/client/link.tsx
@@ -276,8 +276,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
       onClick,
       onMouseEnter: onMouseEnterProp,
       onTouchStart: onTouchStartProp,
-      // @ts-expect-error this is inlined as a literal boolean not a string
-      legacyBehavior = process.env.__NEXT_NEW_LINK_BEHAVIOR === false,
+      legacyBehavior = false,
       ...restProps
     } = props
 
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index 56b7d67d0b3ae..50d91ae00d8a6 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -358,9 +358,6 @@ const configSchema = {
           enum: ['strict', 'flexible'] as any,
           type: 'string',
         },
-        newNextLinkBehavior: {
-          type: 'boolean',
-        },
         nextScriptWorkers: {
           type: 'boolean',
         },
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 3ee94e9049a54..4ef7751f618e3 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -165,7 +165,6 @@ export interface ExperimentalConfig {
   optimisticClientCache?: boolean
   middlewarePrefetch?: 'strict' | 'flexible'
   manualClientBasePath?: boolean
-  newNextLinkBehavior?: boolean
   // custom path to a cache handler to use
   incrementalCacheHandlerPath?: string
   disablePostcssPresetEnv?: boolean
@@ -709,7 +708,6 @@ export const defaultConfig: NextConfig = {
     middlewarePrefetch: 'flexible',
     optimisticClientCache: true,
     manualClientBasePath: false,
-    newNextLinkBehavior: true,
     cpus: Math.max(
       1,
       (Number(process.env.CIRCLE_NODE_TOTAL) ||

From 387a8ff01a6323229c58db99958b7471db2b1e17 Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Tue, 29 Aug 2023 17:08:56 -0400
Subject: [PATCH 11/24] Server actions: support relative URLs in redirect()
 (#54736)

slack ref: https://vercel.slack.com/archives/C03S8ED1DKM/p1693331432057499
---
 .../reducers/server-action-reducer.ts         |  6 ++-
 .../ReactRefreshWebpackPlugin.ts              |  2 -
 .../app/actions.ts                            | 11 ++++++
 .../app/layout.tsx                            |  7 ++++
 .../app/page.tsx                              | 34 +++++++++++++++++
 .../app/subpage/page.tsx                      |  3 ++
 .../next.config.js                            | 10 +++++
 .../server-actions-relative-redirect.test.ts  | 37 +++++++++++++++++++
 8 files changed, 107 insertions(+), 3 deletions(-)
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/app/actions.ts
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/app/layout.tsx
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/app/page.tsx
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/app/subpage/page.tsx
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/next.config.js
 create mode 100644 test/e2e/app-dir/server-actions-relative-redirect/server-actions-relative-redirect.test.ts

diff --git a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
index 6d58d63372799..7a08a65332ef7 100644
--- a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
+++ b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
@@ -89,7 +89,11 @@ async function fetchServerAction(
   }
 
   const redirectLocation = location
-    ? new URL(addBasePath(location), window.location.origin)
+    ? new URL(
+        addBasePath(location),
+        // Ensure relative redirects in Server Actions work, e.g. redirect('./somewhere-else')
+        new URL(state.canonicalUrl, window.location.href)
+      )
     : undefined
 
   let isFlightResponse =
diff --git a/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts b/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
index 4558d5b89a521..ac80614bb23d9 100644
--- a/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
+++ b/packages/react-refresh-utils/ReactRefreshWebpackPlugin.ts
@@ -137,11 +137,9 @@ function webpack5(this: ReactFreshWebpackPlugin, compiler: WebpackCompiler) {
   compiler.hooks.compilation.tap('ReactFreshWebpackPlugin', (compilation) => {
     injectRefreshFunctions(compilation, Template)
 
-    // @ts-ignore Exists in webpack 5
     compilation.hooks.additionalTreeRuntimeRequirements.tap(
       'ReactFreshWebpackPlugin',
       (chunk: any) => {
-        // @ts-ignore Exists in webpack 5
         compilation.addRuntimeModule(chunk, new ReactRefreshRuntimeModule())
       }
     )
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/app/actions.ts b/test/e2e/app-dir/server-actions-relative-redirect/app/actions.ts
new file mode 100644
index 0000000000000..c5028a373450d
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/app/actions.ts
@@ -0,0 +1,11 @@
+'use server'
+
+import { redirect } from 'next/navigation'
+
+export async function relativeRedirect() {
+  return redirect('./subpage')
+}
+
+export async function absoluteRedirect() {
+  return redirect('/subpage')
+}
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/app/layout.tsx b/test/e2e/app-dir/server-actions-relative-redirect/app/layout.tsx
new file mode 100644
index 0000000000000..e7077399c03ce
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/app/page.tsx b/test/e2e/app-dir/server-actions-relative-redirect/app/page.tsx
new file mode 100644
index 0000000000000..9554dacf790df
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/app/page.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { startTransition } from 'react'
+import { absoluteRedirect, relativeRedirect } from './actions'
+
+export default function Page() {
+  return (
+    <>
+      <p>hello root page</p>
+      <button
+        onClick={async () => {
+          // @ts-expect-error Async Transitions
+          startTransition(async () => {
+            await relativeRedirect()
+          })
+        }}
+        id="relative-redirect"
+      >
+        relative redirect
+      </button>
+      <button
+        onClick={async () => {
+          // @ts-expect-error Async Transitions
+          startTransition(async () => {
+            await absoluteRedirect()
+          })
+        }}
+        id="absolute-redirect"
+      >
+        absolute redirect
+      </button>
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/app/subpage/page.tsx b/test/e2e/app-dir/server-actions-relative-redirect/app/subpage/page.tsx
new file mode 100644
index 0000000000000..760b0b7f74d7f
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/app/subpage/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p id="page-loaded">hello nested page</p>
+}
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/next.config.js b/test/e2e/app-dir/server-actions-relative-redirect/next.config.js
new file mode 100644
index 0000000000000..d20ba617cfdfc
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/server-actions-relative-redirect/server-actions-relative-redirect.test.ts b/test/e2e/app-dir/server-actions-relative-redirect/server-actions-relative-redirect.test.ts
new file mode 100644
index 0000000000000..a06f5461610d8
--- /dev/null
+++ b/test/e2e/app-dir/server-actions-relative-redirect/server-actions-relative-redirect.test.ts
@@ -0,0 +1,37 @@
+// @ts-check
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'server-actions-relative-redirect',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should work with relative redirect', async () => {
+      const browser = await next.browser('/')
+      await browser.waitForElementByCss('#relative-redirect').click()
+
+      await check(async () => {
+        expect(await browser.waitForElementByCss('#page-loaded').text()).toBe(
+          'hello nested page'
+        )
+
+        return 'success'
+      }, 'success')
+    })
+
+    it('should work with absolute redirect', async () => {
+      const browser = await next.browser('/')
+      await browser.waitForElementByCss('#absolute-redirect').click()
+
+      await check(async () => {
+        expect(await browser.waitForElementByCss('#page-loaded').text()).toBe(
+          'hello nested page'
+        )
+
+        return 'success'
+      }, 'success')
+    })
+  }
+)

From 8382a473012aee20217f453d039e309c9a85e2b8 Mon Sep 17 00:00:00 2001
From: Max Leiter <max.leiter@vercel.com>
Date: Tue, 29 Aug 2023 17:37:44 -0400
Subject: [PATCH 12/24] node-web-streams-helper: use setImmediate in edge envs
 (#54575)

~Attempting to resolve a race condition we've seen with the AI SDK.~

This ensures setImmediate is used in environments when it's available.
---
 .../next/src/server/stream-utils/node-web-streams-helper.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/server/stream-utils/node-web-streams-helper.ts b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
index 66afb8cc59e88..65768bf0521a1 100644
--- a/packages/next/src/server/stream-utils/node-web-streams-helper.ts
+++ b/packages/next/src/server/stream-utils/node-web-streams-helper.ts
@@ -105,12 +105,12 @@ export function createBufferedTransformStream(): TransformStream<
   const flushBuffer = (controller: TransformStreamDefaultController) => {
     if (!pendingFlush) {
       pendingFlush = new Promise((resolve) => {
-        setTimeout(() => {
+        queueTask(() => {
           controller.enqueue(bufferedBytes)
           bufferedBytes = new Uint8Array()
           pendingFlush = null
           resolve()
-        }, 0)
+        })
       })
     }
   }
@@ -227,7 +227,7 @@ function createDeferredSuffixStream(
           // NOTE: streaming flush
           // Enqueue suffix part before the major chunks are enqueued so that
           // suffix won't be flushed too early to interrupt the data stream
-          setTimeout(() => {
+          queueTask(() => {
             controller.enqueue(encodeText(suffix))
             res()
           })

From 30937eebc2c0a1498257acc71a901657076c89c9 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 30 Aug 2023 01:01:13 +0200
Subject: [PATCH 13/24] refactor: share utils and optimize segments
 normalization (#54611)

* Share util `isGroupSegment`
* Refactor `normalizePathname` to`normalizeSegments` in `src/client/components/router-reducer/compute-changed-path.ts` to avoid extra call of path join and split
---
 .../build/webpack/loaders/next-app-loader.ts  |  5 +---
 .../router-reducer/compute-changed-path.ts    | 27 ++++++++++---------
 .../src/shared/lib/router/utils/app-paths.ts  |  3 ++-
 packages/next/src/shared/lib/segment.ts       |  4 +++
 4 files changed, 21 insertions(+), 18 deletions(-)
 create mode 100644 packages/next/src/shared/lib/segment.ts

diff --git a/packages/next/src/build/webpack/loaders/next-app-loader.ts b/packages/next/src/build/webpack/loaders/next-app-loader.ts
index f7118a38a66e4..841ca3fd1500b 100644
--- a/packages/next/src/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-app-loader.ts
@@ -23,6 +23,7 @@ import { MiddlewareConfig } from '../../analysis/get-page-static-info'
 import { getFilenameAndExtension } from './next-metadata-route-loader'
 import { isAppBuiltinNotFoundPage } from '../../utils'
 import { loadEntrypoint } from '../../load-entrypoint'
+import { isGroupSegment } from '../../../shared/lib/segment'
 
 export type AppLoaderOptions = {
   name: string
@@ -76,10 +77,6 @@ export type ComponentsType = {
   readonly defaultPage?: ModuleReference
 }
 
-function isGroupSegment(segment: string) {
-  return segment.startsWith('(') && segment.endsWith(')')
-}
-
 async function createAppRouteCode({
   name,
   page,
diff --git a/packages/next/src/client/components/router-reducer/compute-changed-path.ts b/packages/next/src/client/components/router-reducer/compute-changed-path.ts
index 763b689083aa6..3a80a5a051b8a 100644
--- a/packages/next/src/client/components/router-reducer/compute-changed-path.ts
+++ b/packages/next/src/client/components/router-reducer/compute-changed-path.ts
@@ -1,7 +1,12 @@
 import { FlightRouterState, Segment } from '../../../server/app-render/types'
 import { INTERCEPTION_ROUTE_MARKERS } from '../../../server/future/helpers/interception-routes'
+import { isGroupSegment } from '../../../shared/lib/segment'
 import { matchSegment } from '../match-segments'
 
+const removeLeadingSlash = (segment: string): string => {
+  return segment[0] === '/' ? segment.slice(1) : segment
+}
+
 const segmentToPathname = (segment: Segment): string => {
   if (typeof segment === 'string') {
     return segment
@@ -10,13 +15,11 @@ const segmentToPathname = (segment: Segment): string => {
   return segment[1]
 }
 
-function normalizePathname(pathname: string): string {
+function normalizeSegments(segments: string[]): string {
   return (
-    pathname.split('/').reduce((acc, segment) => {
-      if (
-        segment === '' ||
-        (segment.startsWith('(') && segment.endsWith(')'))
-      ) {
+    segments.reduce((acc, segment) => {
+      segment = removeLeadingSlash(segment)
+      if (segment === '' || isGroupSegment(segment)) {
         return acc
       }
 
@@ -40,8 +43,7 @@ export function extractPathFromFlightRouterState(
 
   if (segment.startsWith('__PAGE__')) return ''
 
-  const path = [segment]
-
+  const segments = [segment]
   const parallelRoutes = flightRouterState[1] ?? {}
 
   const childrenPath = parallelRoutes.children
@@ -49,7 +51,7 @@ export function extractPathFromFlightRouterState(
     : undefined
 
   if (childrenPath !== undefined) {
-    path.push(childrenPath)
+    segments.push(childrenPath)
   } else {
     for (const [key, value] of Object.entries(parallelRoutes)) {
       if (key === 'children') continue
@@ -57,13 +59,12 @@ export function extractPathFromFlightRouterState(
       const childPath = extractPathFromFlightRouterState(value)
 
       if (childPath !== undefined) {
-        path.push(childPath)
+        segments.push(childPath)
       }
     }
   }
 
-  // TODO-APP: optimise this, it's not ideal to join and split
-  return normalizePathname(path.join('/'))
+  return normalizeSegments(segments)
 }
 
 function computeChangedPathImpl(
@@ -116,5 +117,5 @@ export function computeChangedPath(
   }
 
   // lightweight normalization to remove route groups
-  return normalizePathname(changedPath)
+  return normalizeSegments(changedPath.split('/'))
 }
diff --git a/packages/next/src/shared/lib/router/utils/app-paths.ts b/packages/next/src/shared/lib/router/utils/app-paths.ts
index 59273bdce4ac4..77612edf6d10a 100644
--- a/packages/next/src/shared/lib/router/utils/app-paths.ts
+++ b/packages/next/src/shared/lib/router/utils/app-paths.ts
@@ -1,4 +1,5 @@
 import { ensureLeadingSlash } from '../../page-path/ensure-leading-slash'
+import { isGroupSegment } from '../../segment'
 
 /**
  * Normalizes an app route so it represents the actual request path. Essentially
@@ -28,7 +29,7 @@ export function normalizeAppPath(route: string) {
       }
 
       // Groups are ignored.
-      if (segment[0] === '(' && segment.endsWith(')')) {
+      if (isGroupSegment(segment)) {
         return pathname
       }
 
diff --git a/packages/next/src/shared/lib/segment.ts b/packages/next/src/shared/lib/segment.ts
new file mode 100644
index 0000000000000..6167d681ee6e1
--- /dev/null
+++ b/packages/next/src/shared/lib/segment.ts
@@ -0,0 +1,4 @@
+export function isGroupSegment(segment: string) {
+  // Use array[0] for performant purpose
+  return segment[0] === '(' && segment.endsWith(')')
+}

From d3a107991cd5950b06cc4bcd97a045f584a433e3 Mon Sep 17 00:00:00 2001
From: Janicklas Ralph <janicklas@google.com>
Date: Tue, 29 Aug 2023 16:13:35 -0700
Subject: [PATCH 14/24] Updating Third party capital version.  (#54418)

Updated Third-party-capital version. Refactored `next/third-parties` to update the way components are built. Updated tests.

cc: @kara @huozhi @gnoff
---
 packages/third-parties/README.md              |  10 +-
 packages/third-parties/package.json           |   3 +-
 .../scripts/update-third-parties.js           | 118 ------------------
 .../src/ThirdPartyScriptEmbed.tsx             |  12 +-
 .../src/google/GoogleMapsEmbed.tsx            |  20 +++
 .../third-parties/src/google/YouTubeEmbed.tsx |  34 +++++
 packages/third-parties/src/google/index.tsx   |  41 +-----
 .../third-parties/src/google/tpc-config.json  |   4 -
 packages/third-parties/src/types/google.ts    |  11 +-
 pnpm-lock.yaml                                |   8 +-
 .../app/google-maps-embed/page.js             |   5 +-
 .../third-parties/app/youtube-embed/page.js   |   4 +-
 test/e2e/app-dir/third-parties/basic.test.ts  |   5 +-
 test/e2e/third-parties/index.test.ts          |   4 +-
 .../third-parties/pages/google-maps-embed.js  |   4 +-
 test/e2e/third-parties/pages/youtube-embed.js |   4 +-
 16 files changed, 94 insertions(+), 193 deletions(-)
 delete mode 100644 packages/third-parties/scripts/update-third-parties.js
 create mode 100644 packages/third-parties/src/google/GoogleMapsEmbed.tsx
 create mode 100644 packages/third-parties/src/google/YouTubeEmbed.tsx
 delete mode 100644 packages/third-parties/src/google/tpc-config.json

diff --git a/packages/third-parties/README.md b/packages/third-parties/README.md
index 77cffc8b0c26b..f325e42a4e341 100644
--- a/packages/third-parties/README.md
+++ b/packages/third-parties/README.md
@@ -10,13 +10,13 @@
 
 ### YouTube Embed
 
-The `YoutubeEmbed` component is used to load and display a YouTube embed. This component loads faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood.
+The `YouTubeEmbed` component is used to load and display a YouTube embed. This component loads faster by using [lite-youtube-embed](https://github.com/paulirish/lite-youtube-embed) under the hood.
 
 ```js
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 export default function Page() {
-  return <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+  return <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
 }
 ```
 
@@ -33,8 +33,8 @@ export default function Page() {
       apiKey="XYZ"
       height={200}
       width="100%"
-      mapMode="place"
-      parameters="q=Brooklyn+Bridge,New+York,NY"
+      mode="place"
+      q="Brooklyn+Bridge,New+York,NY"
     />
   )
 }
diff --git a/packages/third-parties/package.json b/packages/third-parties/package.json
index 04034ddecd65c..166ac0d748854 100644
--- a/packages/third-parties/package.json
+++ b/packages/third-parties/package.json
@@ -16,12 +16,11 @@
   "scripts": {
     "build": "rm -rf dist && tsc -d -p tsconfig.json",
     "prepublishOnly": "cd ../../ && turbo run build",
-    "update-third-parties": "rm -rf src/**/index.tsx && node scripts/update-third-parties",
     "dev": "tsc -d -w -p tsconfig.json",
     "typescript": "tsec --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "third-party-capital": "1.0.17"
+    "third-party-capital": "1.0.20"
   },
   "devDependencies": {
     "next": "13.4.20-canary.12",
diff --git a/packages/third-parties/scripts/update-third-parties.js b/packages/third-parties/scripts/update-third-parties.js
deleted file mode 100644
index eb690033687a7..0000000000000
--- a/packages/third-parties/scripts/update-third-parties.js
+++ /dev/null
@@ -1,118 +0,0 @@
-const fs = require('fs/promises')
-const path = require('path')
-const AllThirdParties = require('third-party-capital')
-// eslint-disable-next-line import/no-extraneous-dependencies
-const prettier = require('prettier')
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { outdent } = require('outdent')
-
-const scriptStrategy = {
-  server: 'beforeInteractive',
-  client: 'afterInteractive',
-  idle: 'lazyOnload',
-  worker: 'worker',
-}
-
-const SRC = path.join(__dirname, '../src')
-const CONFIG_FILE_NAME = 'tpc-config.json'
-
-function generateComponent(thirdParty) {
-  let thirdPartyFunctions = ''
-
-  const insertScripts = (id, scripts, stylesheets) => {
-    let props = ''
-
-    if (stylesheets?.length > 0) {
-      props += `
-      stylesheets={${JSON.stringify(stylesheets)}}`
-    }
-
-    return scripts
-      .map((script) => {
-        if (typeof script === 'string') {
-          // External script with only URL
-          return `<Script src="${script}"${props} />`
-        } else if (script.url) {
-          // External script with additional properties
-          // TODO: Validate the strategy. Set fallback if an inpnpvalid strategy is passed
-          const { url, strategy } = script
-          return `<Script src={\`${url}\`} strategy="${scriptStrategy[strategy]}"${props} />`
-        } else if (script.code) {
-          // Inline script with additional properties
-          const { code, strategy } = script
-          return outdent`<Script
-            id="${id}"
-            strategy="${scriptStrategy[strategy]}"
-            dangerouslySetInnerHTML={{
-              __html: \`${code}\`,
-            }}${props}
-          />`
-        }
-
-        return ''
-      })
-      .join('')
-  }
-
-  const { id, description, content, scripts, stylesheets } =
-    AllThirdParties[thirdParty]
-
-  thirdPartyFunctions += outdent`
-
-    // ${description}
-    export function ${thirdParty}(args: Types.${thirdParty}) {
-      return (
-        <ThirdPartyScriptEmbed
-          ${content ? 'height={args.height || null}' : ''}
-          ${content ? 'width={args.width || null}' : ''}
-          ${content ? `content={\`${content}\`}` : ''}
-          dataNtpc="${thirdParty}"
-        >
-          ${scripts?.length > 0 ? insertScripts(id, scripts, stylesheets) : ''}
-        </ThirdPartyScriptEmbed>
-      )
-    }
-    `
-
-  return thirdPartyFunctions
-}
-
-;(async () => {
-  const dirs = (await fs.readdir(SRC, { withFileTypes: true }))
-    .filter((dirent) => dirent.isDirectory())
-    .map((dirent) => dirent.name)
-
-  for (let dir of dirs) {
-    // Fetch the list of third-parties from tpc-config.json
-    // Then retrieve its loading instructions from Third Party Capital
-    const dirPath = path.join(SRC, dir)
-
-    const configFile = (await fs.readdir(dirPath)).find(
-      (file) => file === CONFIG_FILE_NAME
-    )
-
-    if (!configFile) continue
-
-    const config = JSON.parse(await fs.readFile(path.join(dirPath, configFile)))
-
-    let thirdPartyFunctions = `/**
-    * This is an autogenerated file by update-third-parties.js
-    */
-    import React from 'react'
-    import Script from 'next/script'
-
-    import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-    import * as Types from '../types/${dir}'
-    `
-    for (const thirdParty of Object.values(config)) {
-      thirdPartyFunctions += generateComponent(thirdParty)
-    }
-
-    await Promise.all([
-      fs.writeFile(
-        path.join(dirPath, 'index.tsx'),
-        prettier.format(thirdPartyFunctions, { semi: false, parser: 'babel' })
-      ),
-    ])
-  }
-})()
diff --git a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
index 9354ce6483ed8..3be79f6232ae3 100644
--- a/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
+++ b/packages/third-parties/src/ThirdPartyScriptEmbed.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 export type ScriptEmbed = {
-  content?: string
+  html?: string | null
   height?: number | null
   width?: number | null
   children?: React.ReactElement | React.ReactElement[]
@@ -9,7 +9,7 @@ export type ScriptEmbed = {
 }
 
 export default function ThirdPartyScriptEmbed({
-  content,
+  html,
   height = null,
   width = null,
   children,
@@ -19,17 +19,17 @@ export default function ThirdPartyScriptEmbed({
     <>
       {/* insert script children */}
       {children}
-      {/* insert content */}
-      {content && (
+      {/* insert html */}
+      {html ? (
         <div
           style={{
             height: height != null ? `${height}px` : 'auto',
             width: width != null ? `${width}px` : 'auto',
           }}
           data-ntpc={dataNtpc}
-          dangerouslySetInnerHTML={{ __html: content }}
+          dangerouslySetInnerHTML={{ __html: html }}
         />
-      )}
+      ) : null}
     </>
   )
 }
diff --git a/packages/third-parties/src/google/GoogleMapsEmbed.tsx b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
new file mode 100644
index 0000000000000..047c2af146860
--- /dev/null
+++ b/packages/third-parties/src/google/GoogleMapsEmbed.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { GoogleMapsEmbed as TPCGoogleMapEmbed } from 'third-party-capital'
+
+import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
+import { GoogleMapsEmbed as GoogleMapsEmbedTypes } from '../types/google'
+
+export default function GoogleMapsEmbed(props: GoogleMapsEmbedTypes) {
+  const { apiKey, ...restProps } = props
+  const formattedProps = { ...restProps, key: apiKey }
+  const { html } = TPCGoogleMapEmbed(formattedProps)
+
+  return (
+    <ThirdPartyScriptEmbed
+      height={formattedProps.height || null}
+      width={formattedProps.width || null}
+      html={html}
+      dataNtpc="GoogleMapsEmbed"
+    ></ThirdPartyScriptEmbed>
+  )
+}
diff --git a/packages/third-parties/src/google/YouTubeEmbed.tsx b/packages/third-parties/src/google/YouTubeEmbed.tsx
new file mode 100644
index 0000000000000..fec2c07d282e8
--- /dev/null
+++ b/packages/third-parties/src/google/YouTubeEmbed.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Script, { ScriptProps } from 'next/script'
+import { YouTubeEmbed as TPCYouTubeEmbed } from 'third-party-capital'
+
+import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
+import { YouTubeEmbed as YouTubeEmbedTypes } from '../types/google'
+
+const scriptStrategy = {
+  server: 'beforeInteractive',
+  client: 'afterInteractive',
+  idle: 'lazyOnload',
+  worker: 'worker',
+}
+
+export default function YouTubeEmbed(props: YouTubeEmbedTypes) {
+  const { html, scripts, stylesheets } = TPCYouTubeEmbed(props)
+
+  return (
+    <ThirdPartyScriptEmbed
+      height={props.height || null}
+      width={props.width || null}
+      html={html}
+      dataNtpc="YouTubeEmbed"
+    >
+      {scripts?.map((script) => (
+        <Script
+          src={script.url}
+          strategy={scriptStrategy[script.strategy] as ScriptProps['strategy']}
+          stylesheets={stylesheets}
+        />
+      ))}
+    </ThirdPartyScriptEmbed>
+  )
+}
diff --git a/packages/third-parties/src/google/index.tsx b/packages/third-parties/src/google/index.tsx
index a648c8ace192c..aa704aae1c427 100644
--- a/packages/third-parties/src/google/index.tsx
+++ b/packages/third-parties/src/google/index.tsx
@@ -1,39 +1,2 @@
-/**
- * This is an autogenerated file by update-third-parties.js
- */
-import React from 'react'
-import Script from 'next/script'
-
-import ThirdPartyScriptEmbed from '../ThirdPartyScriptEmbed'
-import * as Types from '../types/google'
-
-// Embed a Google Maps embed on your webpage
-export function GoogleMapsEmbed(args: Types.GoogleMapsEmbed) {
-  return (
-    <ThirdPartyScriptEmbed
-      height={args.height || null}
-      width={args.width || null}
-      content={`<iframe loading="lazy" src="https://www.google.com/maps/embed/v1/${args.mapMode}?key=${args.apiKey}&${args.parameters}" width=${args.width} height=${args.height} style=${args.style} allowfullscreen=${args.allowfullscreen} referrerpolicy="no-referrer-when-downgrade"></iframe>`}
-      dataNtpc="GoogleMapsEmbed"
-    ></ThirdPartyScriptEmbed>
-  )
-}
-// Embed a YouTube embed on your webpage.
-export function YoutubeEmbed(args: Types.YoutubeEmbed) {
-  return (
-    <ThirdPartyScriptEmbed
-      height={args.height || null}
-      width={args.width || null}
-      content={`<lite-youtube videoid=${args.videoid} playlabel=${args.playlabel}></lite-youtube>`}
-      dataNtpc="YoutubeEmbed"
-    >
-      <Script
-        src={`https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.js`}
-        strategy="lazyOnload"
-        stylesheets={[
-          'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.css',
-        ]}
-      />
-    </ThirdPartyScriptEmbed>
-  )
-}
+export { default as GoogleMapsEmbed } from './GoogleMapsEmbed'
+export { default as YouTubeEmbed } from './YouTubeEmbed'
diff --git a/packages/third-parties/src/google/tpc-config.json b/packages/third-parties/src/google/tpc-config.json
deleted file mode 100644
index 25f1ee7f08c37..0000000000000
--- a/packages/third-parties/src/google/tpc-config.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "google-maps-embed": "GoogleMapsEmbed",
-  "youtube-embed": "YoutubeEmbed"
-}
diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
index 6c4dc9e77bf37..075c7555a30f2 100644
--- a/packages/third-parties/src/types/google.ts
+++ b/packages/third-parties/src/types/google.ts
@@ -1,15 +1,20 @@
 export type GoogleMapsEmbed = {
   height?: number
   width?: number
-  mapMode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
+  mode: 'place' | 'view' | 'directions' | 'streetview' | 'search'
   apiKey: string
-  parameters: string
   style: string
   allowfullscreen: boolean
   loading: 'eager' | 'lazy'
+  q?: string
+  center?: string
+  zoom?: string
+  maptype?: string
+  language?: string
+  region?: string
 }
 
-export type YoutubeEmbed = {
+export type YouTubeEmbed = {
   height?: number
   width?: number
   videoid: string
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73c249adf6617..039ae336ca234 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1678,8 +1678,8 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0
       third-party-capital:
-        specifier: 1.0.17
-        version: 1.0.17
+        specifier: 1.0.20
+        version: 1.0.20
     devDependencies:
       next:
         specifier: 13.4.20-canary.12
@@ -25414,8 +25414,8 @@ packages:
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  /third-party-capital@1.0.17:
-    resolution: {integrity: sha512-TOoAmaUg1sYZNErMrsEdEp8BSgtnnJL9nhHwisv3kZ2d1Ze0Cjj4zdv/qgwhVPqMvecTI3ZNxhrKSvkYEY2qtg==}
+  /third-party-capital@1.0.20:
+    resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==}
     dev: false
 
   /throat@6.0.1:
diff --git a/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js b/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
index 4a9017e627ba7..28210fe9bab6f 100644
--- a/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
+++ b/test/e2e/app-dir/third-parties/app/google-maps-embed/page.js
@@ -8,8 +8,9 @@ const Page = () => {
         apiKey="XYZ"
         height={200}
         width="100%"
-        mapMode="place"
-        parameters="q=Brooklyn+Bridge,New+York,NY"
+        mode="place"
+        id="maps-embed"
+        q="Brooklyn+Bridge,New+York,NY"
       />
     </div>
   )
diff --git a/test/e2e/app-dir/third-parties/app/youtube-embed/page.js b/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
index 1396464fad574..bc07ee42127d9 100644
--- a/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
+++ b/test/e2e/app-dir/third-parties/app/youtube-embed/page.js
@@ -1,10 +1,10 @@
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
     <div class="container">
       <h1>Youtube Embed</h1>
-      <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+      <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
     </div>
   )
 }
diff --git a/test/e2e/app-dir/third-parties/basic.test.ts b/test/e2e/app-dir/third-parties/basic.test.ts
index 6fd22cde1d5ec..82c5305e07839 100644
--- a/test/e2e/app-dir/third-parties/basic.test.ts
+++ b/test/e2e/app-dir/third-parties/basic.test.ts
@@ -12,7 +12,7 @@ createNextDescribe(
     it('renders YoutubeEmbed', async () => {
       const $ = await next.render$('/youtube-embed')
 
-      const baseContainer = $('[data-ntpc="YoutubeEmbed"]')
+      const baseContainer = $('[data-ntpc="YouTubeEmbed"]')
       const youtubeContainer = $('lite-youtube')
       expect(baseContainer.length).toBe(1)
       expect(youtubeContainer.length).toBe(1)
@@ -22,8 +22,9 @@ createNextDescribe(
       const $ = await next.render$('/google-maps-embed')
 
       const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]')
+
       const mapContainer = $(
-        '[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]'
+        '[src^="https://www.google.com/maps/embed/v1/place?key=XYZ"]'
       )
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
diff --git a/test/e2e/third-parties/index.test.ts b/test/e2e/third-parties/index.test.ts
index 6fd22cde1d5ec..85e80eb87c53e 100644
--- a/test/e2e/third-parties/index.test.ts
+++ b/test/e2e/third-parties/index.test.ts
@@ -12,7 +12,7 @@ createNextDescribe(
     it('renders YoutubeEmbed', async () => {
       const $ = await next.render$('/youtube-embed')
 
-      const baseContainer = $('[data-ntpc="YoutubeEmbed"]')
+      const baseContainer = $('[data-ntpc="YouTubeEmbed"]')
       const youtubeContainer = $('lite-youtube')
       expect(baseContainer.length).toBe(1)
       expect(youtubeContainer.length).toBe(1)
@@ -23,7 +23,7 @@ createNextDescribe(
 
       const baseContainer = $('[data-ntpc="GoogleMapsEmbed"]')
       const mapContainer = $(
-        '[src="https://www.google.com/maps/embed/v1/place?key=XYZ&q=Brooklyn+Bridge,New+York,NY"]'
+        '[src^="https://www.google.com/maps/embed/v1/place?key=XYZ"]'
       )
       expect(baseContainer.length).toBe(1)
       expect(mapContainer.length).toBe(1)
diff --git a/test/e2e/third-parties/pages/google-maps-embed.js b/test/e2e/third-parties/pages/google-maps-embed.js
index 4a9017e627ba7..e10afb97b337d 100644
--- a/test/e2e/third-parties/pages/google-maps-embed.js
+++ b/test/e2e/third-parties/pages/google-maps-embed.js
@@ -8,8 +8,8 @@ const Page = () => {
         apiKey="XYZ"
         height={200}
         width="100%"
-        mapMode="place"
-        parameters="q=Brooklyn+Bridge,New+York,NY"
+        mode="place"
+        q="Brooklyn+Bridge,New+York,NY"
       />
     </div>
   )
diff --git a/test/e2e/third-parties/pages/youtube-embed.js b/test/e2e/third-parties/pages/youtube-embed.js
index 1396464fad574..bc07ee42127d9 100644
--- a/test/e2e/third-parties/pages/youtube-embed.js
+++ b/test/e2e/third-parties/pages/youtube-embed.js
@@ -1,10 +1,10 @@
-import { YoutubeEmbed } from '@next/third-parties/google'
+import { YouTubeEmbed } from '@next/third-parties/google'
 
 const Page = () => {
   return (
     <div class="container">
       <h1>Youtube Embed</h1>
-      <YoutubeEmbed videoid="ogfYd705cRs" height={400} />
+      <YouTubeEmbed videoid="ogfYd705cRs" height={400} />
     </div>
   )
 }

From 70d41b26278b505916e4102ddd5a8c03dd729b6f Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Tue, 29 Aug 2023 22:29:14 -0400
Subject: [PATCH 15/24] Improve barrel optimizer with loader caching and
 wilcard exports (#54695)

## Initial Pass

The initial pass applies to all user code. If an import (`foo`) matches one of the packages from our list, say:

```js
// user code

import { a } from 'foo'
import { otherThings } from './code'
```

The initial pass transforms it into:

```js
// user code

import { a } from '__barrel_optimize__?names=a!=!foo'
import { otherThings } from './code'
```

## Barrel Optimizations

This `__barrel_optimize__` loader is used to optimize the imports of "barrel" files that have many
re-exports. Currently, both Node.js and Webpack have to enter all of these
submodules even if we only need a few of them.

For example, say a file `foo.js` with the following contents:

```js
  export { a } from './a'
  export { b } from './b'
  export { c } from './c'
  ...
```

If the user imports `a` only, this loader will accept the `names` option to
be `['a']`. Then, it request the `__barrel_transform__` SWC loader to load
`foo.js` (via `this.loadModule` Webpack API) and receive the following info:

```js
  export const __next_private_export_map__ = '[["./a","a","a"],["./b","b","b"],["./c","c","c"],...]'
```

The export map, generated by SWC, is a JSON that represents the exports of
that module, their original file, and their original name (since you can do
`export { a as b }`).

Then, this loader can safely remove all the exports that are not needed and
re-export the ones from `names`:

```js
  export { a } from './a'
```

That's the basic situation and also the happy path.



## Wildcard Exports

For wildcard exports (e.g. `export * from './a'`), it becomes a bit more complicated.
Say `foo.js` with the following contents:

```js
  export * from './a'
  export * from './b'
  export * from './c'
  ...
```

If the user imports `bar` from it, SWC can never know which files are going to be
exporting `bar`. So, we have to keep all the wildcard exports and do the same
process recursively. This loader will return the following output:

```js
  export * from '__barrel_optimize__?names=bar&wildcard!=!./a'
  export * from '__barrel_optimize__?names=bar&wildcard!=!./b'
  export * from '__barrel_optimize__?names=bar&wildcard!=!./c'
  ...
```

The "!=!" tells Webpack to use the same loader to process './a', './b', and './c'.
After the recursive process, the "inner loaders" will either return an empty string
or:

```js
  export * from './target'
```

Where `target` is the file that exports `bar`.



## Non-Barrel Files

If the file is not a barrel, we can't apply any optimizations. That's because
we can't easily remove things from the file. For example, say `foo.js` with:

```js
  const v = 1
  export function b () {
    return v
  }
```

If the user imports `b` only, we can't remove the `const v = 1` even though
the file is side-effect free. In these caes, this loader will simply re-export
`foo.js`:

```js
  export * from './foo'
```

Besides these cases, this loader also carefully handles the module cache so
SWC won't analyze the same file twice, and no instance of the same file will
be accidentally created as different instances.

---

- [x] Disable this loader for Jest
- [x] Add tests for SWC loader caching
- [x] Add tests for external modules
- [x] Add tests for pages
- [x] Add tests for recursive `export *`s

---

Closes #54038, closes #54286.
---
 packages/next-swc/crates/core/src/lib.rs      |   5 +-
 .../crates/core/src/named_import_transform.rs |   5 +-
 .../crates/core/src/optimize_barrel.rs        | 440 +++++++++++-------
 .../next-swc/crates/core/tests/fixture.rs     |  41 +-
 .../named-import-transform/1/output.js        |   2 +-
 .../named-import-transform/2/output.js        |   4 +-
 .../tests/fixture/optimize-barrel/1/output.js |   3 -
 .../tests/fixture/optimize-barrel/2/output.js |   2 -
 .../tests/fixture/optimize-barrel/3/output.js |   2 -
 .../tests/fixture/optimize-barrel/4/output.js |   7 -
 .../tests/fixture/optimize-barrel/5/output.js |   2 -
 .../optimize-barrel/{ => normal}/1/input.js   |   2 +
 .../optimize-barrel/normal/1/output.js        |   1 +
 .../optimize-barrel/{ => normal}/2/input.js   |   0
 .../optimize-barrel/normal/2/output.js        |   1 +
 .../optimize-barrel/{ => normal}/3/input.js   |   5 +-
 .../optimize-barrel/normal/3/output.js        |   3 +
 .../optimize-barrel/{ => normal}/4/input.js   |   0
 .../optimize-barrel/normal/4/output.js        |   2 +
 .../optimize-barrel/{ => normal}/5/input.js   |   0
 .../optimize-barrel/normal/5/output.js        |   1 +
 .../optimize-barrel/wildcard/1/input.js       |   3 +
 .../optimize-barrel/wildcard/1/output.js      |   2 +
 packages/next/src/build/swc/options.ts        |   4 +-
 packages/next/src/build/webpack-config.ts     |  60 ++-
 .../webpack/loaders/next-barrel-loader.ts     | 179 +++++++
 .../build/webpack/loaders/next-swc-loader.ts  |   7 +
 packages/next/src/server/config.ts            |  31 +-
 .../basic/barrel-optimization.test.ts         | 120 +++++
 .../barrel-optimization/app/dedupe/page.js    |  23 +
 .../app/layout.js                             |   0
 .../basic/barrel-optimization/app/page.js     |  15 +
 .../barrel-optimization/app/recursive/page.js |   5 +
 .../components/slow-component.js}             |   5 +-
 .../basic/barrel-optimization/next.config.js  |   5 +
 .../node_modules_bak/my-lib/a.js              |   1 +
 .../node_modules_bak/my-lib/b.js              |   1 +
 .../node_modules_bak/my-lib/c.js              |   1 +
 .../node_modules_bak/my-lib/index.js          |   1 +
 .../barrel-optimization/pages/pages-route.js  |   5 +
 .../basic/modularize-imports.test.ts          |  45 --
 41 files changed, 743 insertions(+), 298 deletions(-)
 delete mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/output.js
 delete mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/output.js
 delete mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/output.js
 delete mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/output.js
 delete mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/output.js
 rename packages/next-swc/crates/core/tests/fixture/optimize-barrel/{ => normal}/1/input.js (74%)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/output.js
 rename packages/next-swc/crates/core/tests/fixture/optimize-barrel/{ => normal}/2/input.js (100%)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/output.js
 rename packages/next-swc/crates/core/tests/fixture/optimize-barrel/{ => normal}/3/input.js (55%)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/output.js
 rename packages/next-swc/crates/core/tests/fixture/optimize-barrel/{ => normal}/4/input.js (100%)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/output.js
 rename packages/next-swc/crates/core/tests/fixture/optimize-barrel/{ => normal}/5/input.js (100%)
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/output.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/input.js
 create mode 100644 packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/output.js
 create mode 100644 packages/next/src/build/webpack/loaders/next-barrel-loader.ts
 create mode 100644 test/development/basic/barrel-optimization.test.ts
 create mode 100644 test/development/basic/barrel-optimization/app/dedupe/page.js
 rename test/development/basic/{modularize-imports => barrel-optimization}/app/layout.js (100%)
 create mode 100644 test/development/basic/barrel-optimization/app/page.js
 create mode 100644 test/development/basic/barrel-optimization/app/recursive/page.js
 rename test/development/basic/{modularize-imports/app/page.js => barrel-optimization/components/slow-component.js} (92%)
 create mode 100644 test/development/basic/barrel-optimization/next.config.js
 create mode 100644 test/development/basic/barrel-optimization/node_modules_bak/my-lib/a.js
 create mode 100644 test/development/basic/barrel-optimization/node_modules_bak/my-lib/b.js
 create mode 100644 test/development/basic/barrel-optimization/node_modules_bak/my-lib/c.js
 create mode 100644 test/development/basic/barrel-optimization/node_modules_bak/my-lib/index.js
 create mode 100644 test/development/basic/barrel-optimization/pages/pages-route.js
 delete mode 100644 test/development/basic/modularize-imports.test.ts

diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs
index 11aea351c7b38..24ec042918138 100644
--- a/packages/next-swc/crates/core/src/lib.rs
+++ b/packages/next-swc/crates/core/src/lib.rs
@@ -258,9 +258,8 @@ where
             None => Either::Right(noop()),
         },
         match &opts.optimize_barrel_exports {
-            Some(config) => Either::Left(optimize_barrel::optimize_barrel(
-                file.name.clone(),config.clone())),
-            None => Either::Right(noop()),
+            Some(config) => Either::Left(optimize_barrel::optimize_barrel(config.clone())),
+            _ => Either::Right(noop()),
         },
         opts.emotion
             .as_ref()
diff --git a/packages/next-swc/crates/core/src/named_import_transform.rs b/packages/next-swc/crates/core/src/named_import_transform.rs
index 4e95899cb4ee3..df76e0c6f12b4 100644
--- a/packages/next-swc/crates/core/src/named_import_transform.rs
+++ b/packages/next-swc/crates/core/src/named_import_transform.rs
@@ -61,10 +61,7 @@ impl Fold for NamedImportTransform {
 
             if !skip_transform {
                 let names = specifier_names.join(",");
-                let new_src = format!(
-                    "__barrel_optimize__?names={}!=!{}?__barrel_optimize_noop__={}",
-                    names, src_value, names,
-                );
+                let new_src = format!("__barrel_optimize__?names={}!=!{}", names, src_value);
 
                 // Create a new import declaration, keep everything the same except the source
                 let mut new_decl = decl.clone();
diff --git a/packages/next-swc/crates/core/src/optimize_barrel.rs b/packages/next-swc/crates/core/src/optimize_barrel.rs
index 0fee0a2e3e955..52d6a518b7569 100644
--- a/packages/next-swc/crates/core/src/optimize_barrel.rs
+++ b/packages/next-swc/crates/core/src/optimize_barrel.rs
@@ -1,59 +1,63 @@
+use std::collections::HashMap;
+
 use serde::Deserialize;
 use turbopack_binding::swc::core::{
-    common::{FileName, DUMMY_SP},
-    ecma::{
-        ast::*,
-        utils::{private_ident, quote_str},
-        visit::Fold,
-    },
+    common::DUMMY_SP,
+    ecma::{ast::*, utils::private_ident, visit::Fold},
 };
 
 #[derive(Clone, Debug, Deserialize)]
 pub struct Config {
-    pub names: Vec<String>,
+    pub wildcard: bool,
 }
 
-pub fn optimize_barrel(filename: FileName, config: Config) -> impl Fold {
+pub fn optimize_barrel(config: Config) -> impl Fold {
     OptimizeBarrel {
-        filepath: filename.to_string(),
-        names: config.names,
+        wildcard: config.wildcard,
     }
 }
 
 #[derive(Debug, Default)]
 struct OptimizeBarrel {
-    filepath: String,
-    names: Vec<String>,
+    wildcard: bool,
 }
 
 impl Fold for OptimizeBarrel {
     fn fold_module_items(&mut self, items: Vec<ModuleItem>) -> Vec<ModuleItem> {
-        // One pre-pass to find all the local idents that we are referencing.
-        let mut local_idents = vec![];
-        for item in &items {
-            if let ModuleItem::ModuleDecl(ModuleDecl::ExportNamed(export_named)) = item {
-                if export_named.src.is_none() {
-                    for spec in &export_named.specifiers {
-                        if let ExportSpecifier::Named(s) = spec {
-                            let str_name;
-                            if let Some(name) = &s.exported {
-                                str_name = match &name {
-                                    ModuleExportName::Ident(n) => n.sym.to_string(),
-                                    ModuleExportName::Str(n) => n.value.to_string(),
-                                };
-                            } else {
-                                str_name = match &s.orig {
-                                    ModuleExportName::Ident(n) => n.sym.to_string(),
-                                    ModuleExportName::Str(n) => n.value.to_string(),
-                                };
-                            }
+        // One pre-pass to find all the local idents that we are referencing, so we can
+        // handle the case of `import foo from 'a'; export { foo };` correctly.
 
-                            // If the exported name needs to be kept, track the local ident.
-                            if self.names.contains(&str_name) {
-                                if let ModuleExportName::Ident(i) = &s.orig {
-                                    local_idents.push(i.sym.clone());
-                                }
-                            }
+        // Map of "local ident" -> ("source module", "orig ident")
+        let mut local_idents = HashMap::new();
+        for item in &items {
+            if let ModuleItem::ModuleDecl(ModuleDecl::Import(import_decl)) = item {
+                for spec in &import_decl.specifiers {
+                    let src = import_decl.src.value.to_string();
+                    match spec {
+                        ImportSpecifier::Named(s) => {
+                            local_idents.insert(
+                                s.local.sym.to_string(),
+                                (
+                                    src.clone(),
+                                    match &s.imported {
+                                        Some(n) => match &n {
+                                            ModuleExportName::Ident(n) => n.sym.to_string(),
+                                            ModuleExportName::Str(n) => n.value.to_string(),
+                                        },
+                                        None => s.local.sym.to_string(),
+                                    },
+                                ),
+                            );
+                        }
+                        ImportSpecifier::Namespace(s) => {
+                            local_idents
+                                .insert(s.local.sym.to_string(), (src.clone(), "*".to_string()));
+                        }
+                        ImportSpecifier::Default(s) => {
+                            local_idents.insert(
+                                s.local.sym.to_string(),
+                                (src.clone(), "default".to_string()),
+                            );
                         }
                     }
                 }
@@ -63,6 +67,10 @@ impl Fold for OptimizeBarrel {
         // The second pass to rebuild the module items.
         let mut new_items = vec![];
 
+        // Exported meta information.
+        let mut export_map = vec![];
+        let mut export_wildcards = vec![];
+
         // We only apply this optimization to barrel files. Here we consider
         // a barrel file to be a file that only exports from other modules.
         // Besides that, lit expressions are allowed as well ("use client", etc.).
@@ -71,6 +79,7 @@ impl Fold for OptimizeBarrel {
             match item {
                 ModuleItem::ModuleDecl(decl) => {
                     match decl {
+                        ModuleDecl::Import(_) => {}
                         // export { foo } from './foo';
                         ModuleDecl::ExportNamed(export_named) => {
                             for spec in &export_named.specifiers {
@@ -80,142 +89,110 @@ impl Fold for OptimizeBarrel {
                                             ModuleExportName::Ident(n) => n.sym.to_string(),
                                             ModuleExportName::Str(n) => n.value.to_string(),
                                         };
-                                        if self.names.contains(&name_str) {
-                                            new_items.push(item.clone());
+                                        if let Some(src) = &export_named.src {
+                                            export_map.push((
+                                                name_str.clone(),
+                                                src.value.to_string(),
+                                                "*".to_string(),
+                                            ));
+                                        } else if self.wildcard {
+                                            export_map.push((
+                                                name_str.clone(),
+                                                "".into(),
+                                                "*".to_string(),
+                                            ));
+                                        } else {
+                                            is_barrel = false;
+                                            break;
                                         }
                                     }
                                     ExportSpecifier::Named(s) => {
-                                        if let Some(name) = &s.exported {
-                                            let name_str = match &name {
+                                        let orig_str = match &s.orig {
+                                            ModuleExportName::Ident(n) => n.sym.to_string(),
+                                            ModuleExportName::Str(n) => n.value.to_string(),
+                                        };
+                                        let name_str = match &s.exported {
+                                            Some(n) => match &n {
                                                 ModuleExportName::Ident(n) => n.sym.to_string(),
                                                 ModuleExportName::Str(n) => n.value.to_string(),
-                                            };
+                                            },
+                                            None => orig_str.clone(),
+                                        };
 
-                                            if self.names.contains(&name_str) {
-                                                new_items.push(ModuleItem::ModuleDecl(
-                                                    ModuleDecl::ExportNamed(NamedExport {
-                                                        span: DUMMY_SP,
-                                                        specifiers: vec![ExportSpecifier::Named(
-                                                            ExportNamedSpecifier {
-                                                                span: DUMMY_SP,
-                                                                orig: s.orig.clone(),
-                                                                exported: Some(
-                                                                    ModuleExportName::Ident(
-                                                                        Ident::new(
-                                                                            name_str.into(),
-                                                                            DUMMY_SP,
-                                                                        ),
-                                                                    ),
-                                                                ),
-                                                                is_type_only: false,
-                                                            },
-                                                        )],
-                                                        src: export_named.src.clone(),
-                                                        type_only: false,
-                                                        asserts: None,
-                                                    }),
-                                                ));
-                                            }
+                                        if let Some(src) = &export_named.src {
+                                            export_map.push((
+                                                name_str.clone(),
+                                                src.value.to_string(),
+                                                orig_str.clone(),
+                                            ));
+                                        } else if let Some((src, orig)) =
+                                            local_idents.get(&orig_str)
+                                        {
+                                            export_map.push((
+                                                name_str.clone(),
+                                                src.clone(),
+                                                orig.clone(),
+                                            ));
+                                        } else if self.wildcard {
+                                            export_map.push((
+                                                name_str.clone(),
+                                                "".into(),
+                                                orig_str.clone(),
+                                            ));
                                         } else {
-                                            let name_str = match &s.orig {
-                                                ModuleExportName::Ident(n) => n.sym.to_string(),
-                                                ModuleExportName::Str(n) => n.value.to_string(),
-                                            };
-
-                                            if self.names.contains(&name_str) {
-                                                new_items.push(ModuleItem::ModuleDecl(
-                                                    ModuleDecl::ExportNamed(NamedExport {
-                                                        span: DUMMY_SP,
-                                                        specifiers: vec![ExportSpecifier::Named(
-                                                            ExportNamedSpecifier {
-                                                                span: DUMMY_SP,
-                                                                orig: s.orig.clone(),
-                                                                exported: None,
-                                                                is_type_only: false,
-                                                            },
-                                                        )],
-                                                        src: export_named.src.clone(),
-                                                        type_only: false,
-                                                        asserts: None,
-                                                    }),
-                                                ));
-                                            }
+                                            is_barrel = false;
+                                            break;
                                         }
                                     }
                                     _ => {
-                                        is_barrel = false;
-                                        break;
+                                        if !self.wildcard {
+                                            is_barrel = false;
+                                            break;
+                                        }
                                     }
                                 }
                             }
                         }
-                        // Keep import statements that create the local idents we need.
-                        ModuleDecl::Import(import_decl) => {
-                            for spec in &import_decl.specifiers {
-                                match spec {
-                                    ImportSpecifier::Named(s) => {
-                                        if local_idents.contains(&s.local.sym) {
-                                            new_items.push(ModuleItem::ModuleDecl(
-                                                ModuleDecl::Import(ImportDecl {
-                                                    span: DUMMY_SP,
-                                                    specifiers: vec![ImportSpecifier::Named(
-                                                        ImportNamedSpecifier {
-                                                            span: DUMMY_SP,
-                                                            local: s.local.clone(),
-                                                            imported: s.imported.clone(),
-                                                            is_type_only: false,
-                                                        },
-                                                    )],
-                                                    src: import_decl.src.clone(),
-                                                    type_only: false,
-                                                    asserts: None,
-                                                }),
-                                            ));
-                                        }
-                                    }
-                                    ImportSpecifier::Default(s) => {
-                                        if local_idents.contains(&s.local.sym) {
-                                            new_items.push(ModuleItem::ModuleDecl(
-                                                ModuleDecl::Import(ImportDecl {
-                                                    span: DUMMY_SP,
-                                                    specifiers: vec![ImportSpecifier::Default(
-                                                        ImportDefaultSpecifier {
-                                                            span: DUMMY_SP,
-                                                            local: s.local.clone(),
-                                                        },
-                                                    )],
-                                                    src: import_decl.src.clone(),
-                                                    type_only: false,
-                                                    asserts: None,
-                                                }),
-                                            ));
-                                        }
-                                    }
-                                    ImportSpecifier::Namespace(s) => {
-                                        if local_idents.contains(&s.local.sym) {
-                                            new_items.push(ModuleItem::ModuleDecl(
-                                                ModuleDecl::Import(ImportDecl {
-                                                    span: DUMMY_SP,
-                                                    specifiers: vec![ImportSpecifier::Namespace(
-                                                        ImportStarAsSpecifier {
-                                                            span: DUMMY_SP,
-                                                            local: s.local.clone(),
-                                                        },
-                                                    )],
-                                                    src: import_decl.src.clone(),
-                                                    type_only: false,
-                                                    asserts: None,
-                                                }),
-                                            ));
-                                        }
+                        ModuleDecl::ExportAll(export_all) => {
+                            export_wildcards.push(export_all.src.value.to_string());
+                        }
+                        ModuleDecl::ExportDecl(export_decl) => {
+                            // Export declarations are not allowed in barrel files.
+                            if !self.wildcard {
+                                is_barrel = false;
+                                break;
+                            }
+
+                            match &export_decl.decl {
+                                Decl::Class(class) => {
+                                    export_map.push((
+                                        class.ident.sym.to_string(),
+                                        "".into(),
+                                        "".into(),
+                                    ));
+                                }
+                                Decl::Fn(func) => {
+                                    export_map.push((
+                                        func.ident.sym.to_string(),
+                                        "".into(),
+                                        "".into(),
+                                    ));
+                                }
+                                Decl::Var(var) => {
+                                    let ids = collect_idents_in_var_decls(&var.decls);
+                                    for id in ids {
+                                        export_map.push((id, "".into(), "".into()));
                                     }
                                 }
+                                _ => {}
                             }
                         }
                         _ => {
-                            // Export expressions are not allowed in barrel files.
-                            is_barrel = false;
-                            break;
+                            if !self.wildcard {
+                                // Other expressions are not allowed in barrel files.
+                                is_barrel = false;
+                                break;
+                            }
                         }
                     }
                 }
@@ -225,44 +202,149 @@ impl Fold for OptimizeBarrel {
                             new_items.push(item.clone());
                         }
                         _ => {
-                            is_barrel = false;
-                            break;
+                            if !self.wildcard {
+                                is_barrel = false;
+                                break;
+                            }
                         }
                     },
                     _ => {
-                        is_barrel = false;
-                        break;
+                        if !self.wildcard {
+                            is_barrel = false;
+                            break;
+                        }
                     }
                 },
             }
         }
 
-        // If the file is not a barrel file, we need to create a new module that
-        // re-exports from the original file.
-        // This is to avoid creating multiple instances of the original module.
+        // If the file is not a barrel file, we export nothing.
         if !is_barrel {
-            new_items = vec![ModuleItem::ModuleDecl(ModuleDecl::ExportNamed(
-                NamedExport {
+            new_items = vec![];
+        } else {
+            // Otherwise we export the meta information.
+            new_items.push(ModuleItem::ModuleDecl(ModuleDecl::ExportDecl(ExportDecl {
+                span: DUMMY_SP,
+                decl: Decl::Var(Box::new(VarDecl {
                     span: DUMMY_SP,
-                    specifiers: self
-                        .names
-                        .iter()
-                        .map(|name| {
-                            ExportSpecifier::Named(ExportNamedSpecifier {
-                                span: DUMMY_SP,
-                                orig: ModuleExportName::Ident(private_ident!(name.clone())),
-                                exported: None,
-                                is_type_only: false,
-                            })
-                        })
-                        .collect(),
-                    src: Some(Box::new(quote_str!(self.filepath.to_string()))),
-                    type_only: false,
+                    kind: VarDeclKind::Const,
+                    declare: false,
+                    decls: vec![VarDeclarator {
+                        span: DUMMY_SP,
+                        name: Pat::Ident(BindingIdent {
+                            id: private_ident!("__next_private_export_map__"),
+                            type_ann: None,
+                        }),
+                        init: Some(Box::new(Expr::Lit(Lit::Str(Str {
+                            span: DUMMY_SP,
+                            value: serde_json::to_string(&export_map).unwrap().into(),
+                            raw: None,
+                        })))),
+                        definite: false,
+                    }],
+                })),
+            })));
+
+            // Push "export *" statements for each wildcard export.
+            for src in export_wildcards {
+                new_items.push(ModuleItem::ModuleDecl(ModuleDecl::ExportAll(ExportAll {
+                    span: DUMMY_SP,
+                    src: Box::new(Str {
+                        span: DUMMY_SP,
+                        value: format!("__barrel_optimize__?names=__PLACEHOLDER__!=!{}", src)
+                            .into(),
+                        raw: None,
+                    }),
                     asserts: None,
-                },
-            ))];
+                    type_only: false,
+                })));
+            }
         }
 
         new_items
     }
 }
+
+fn collect_idents_in_array_pat(elems: &[Option<Pat>]) -> Vec<String> {
+    let mut ids = Vec::new();
+
+    for elem in elems.iter().flatten() {
+        match elem {
+            Pat::Ident(ident) => {
+                ids.push(ident.sym.to_string());
+            }
+            Pat::Array(array) => {
+                ids.extend(collect_idents_in_array_pat(&array.elems));
+            }
+            Pat::Object(object) => {
+                ids.extend(collect_idents_in_object_pat(&object.props));
+            }
+            Pat::Rest(rest) => {
+                if let Pat::Ident(ident) = &*rest.arg {
+                    ids.push(ident.sym.to_string());
+                }
+            }
+            _ => {}
+        }
+    }
+
+    ids
+}
+
+fn collect_idents_in_object_pat(props: &[ObjectPatProp]) -> Vec<String> {
+    let mut ids = Vec::new();
+
+    for prop in props {
+        match prop {
+            ObjectPatProp::KeyValue(KeyValuePatProp { key, value }) => {
+                if let PropName::Ident(ident) = key {
+                    ids.push(ident.sym.to_string());
+                }
+
+                match &**value {
+                    Pat::Ident(ident) => {
+                        ids.push(ident.sym.to_string());
+                    }
+                    Pat::Array(array) => {
+                        ids.extend(collect_idents_in_array_pat(&array.elems));
+                    }
+                    Pat::Object(object) => {
+                        ids.extend(collect_idents_in_object_pat(&object.props));
+                    }
+                    _ => {}
+                }
+            }
+            ObjectPatProp::Assign(AssignPatProp { key, .. }) => {
+                ids.push(key.to_string());
+            }
+            ObjectPatProp::Rest(RestPat { arg, .. }) => {
+                if let Pat::Ident(ident) = &**arg {
+                    ids.push(ident.sym.to_string());
+                }
+            }
+        }
+    }
+
+    ids
+}
+
+fn collect_idents_in_var_decls(decls: &[VarDeclarator]) -> Vec<String> {
+    let mut ids = Vec::new();
+
+    for decl in decls {
+        match &decl.name {
+            Pat::Ident(ident) => {
+                ids.push(ident.sym.to_string());
+            }
+            Pat::Array(array) => {
+                ids.extend(collect_idents_in_array_pat(&array.elems));
+            }
+            Pat::Object(object) => {
+                ids.extend(collect_idents_in_object_pat(&object.props));
+            }
+            _ => {}
+        }
+    }
+
+    ids
+}
diff --git a/packages/next-swc/crates/core/tests/fixture.rs b/packages/next-swc/crates/core/tests/fixture.rs
index 8046417205f1f..bb2a627ae4cc6 100644
--- a/packages/next-swc/crates/core/tests/fixture.rs
+++ b/packages/next-swc/crates/core/tests/fixture.rs
@@ -482,7 +482,7 @@ fn named_import_transform_fixture(input: PathBuf) {
     );
 }
 
-#[fixture("tests/fixture/optimize-barrel/**/input.js")]
+#[fixture("tests/fixture/optimize-barrel/normal/**/input.js")]
 fn optimize_barrel_fixture(input: PathBuf) {
     let output = input.parent().unwrap().join("output.js");
     test_fixture(
@@ -493,16 +493,39 @@ fn optimize_barrel_fixture(input: PathBuf) {
 
             chain!(
                 resolver(unresolved_mark, top_level_mark, false),
-                optimize_barrel(
-                    FileName::Real(PathBuf::from("/some-project/node_modules/foo/file.js")),
-                    json(
-                        r#"
+                optimize_barrel(json(
+                    r#"
                         {
-                            "names": ["x", "y", "z"]
+                            "wildcard": false
                         }
-                        "#
-                    )
-                )
+                    "#
+                ))
+            )
+        },
+        &input,
+        &output,
+        Default::default(),
+    );
+}
+
+#[fixture("tests/fixture/optimize-barrel/wildcard/**/input.js")]
+fn optimize_barrel_wildcard_fixture(input: PathBuf) {
+    let output = input.parent().unwrap().join("output.js");
+    test_fixture(
+        syntax(),
+        &|_tr| {
+            let unresolved_mark = Mark::new();
+            let top_level_mark = Mark::new();
+
+            chain!(
+                resolver(unresolved_mark, top_level_mark, false),
+                optimize_barrel(json(
+                    r#"
+                        {
+                            "wildcard": true
+                        }
+                    "#
+                ))
             )
         },
         &input,
diff --git a/packages/next-swc/crates/core/tests/fixture/named-import-transform/1/output.js b/packages/next-swc/crates/core/tests/fixture/named-import-transform/1/output.js
index 53fc2884247cf..1bd90351be658 100644
--- a/packages/next-swc/crates/core/tests/fixture/named-import-transform/1/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/named-import-transform/1/output.js
@@ -1,3 +1,3 @@
-import { A, B, C as F } from "__barrel_optimize__?names=A,B,C!=!foo?__barrel_optimize_noop__=A,B,C";
+import { A, B, C as F } from "__barrel_optimize__?names=A,B,C!=!foo";
 import D from 'bar';
 import E from 'baz';
diff --git a/packages/next-swc/crates/core/tests/fixture/named-import-transform/2/output.js b/packages/next-swc/crates/core/tests/fixture/named-import-transform/2/output.js
index b4d1a9b11dece..d6e92160e66ac 100644
--- a/packages/next-swc/crates/core/tests/fixture/named-import-transform/2/output.js
+++ b/packages/next-swc/crates/core/tests/fixture/named-import-transform/2/output.js
@@ -1,3 +1,3 @@
-import { A, B, C as F } from "__barrel_optimize__?names=A,B,C!=!foo?__barrel_optimize_noop__=A,B,C";
-import { D } from "__barrel_optimize__?names=D!=!bar?__barrel_optimize_noop__=D";
+import { A, B, C as F } from "__barrel_optimize__?names=A,B,C!=!foo";
+import { D } from "__barrel_optimize__?names=D!=!bar";
 import E from 'baz';
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/output.js
deleted file mode 100644
index 0edcd356f6fc2..0000000000000
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/output.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { b as y } from './1';
-export { x } from './2';
-export { z };
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/output.js
deleted file mode 100644
index 3f5d1a74b87bd..0000000000000
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// De-optimize this file
-export { x, y, z } from "/some-project/node_modules/foo/file.js";
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/output.js
deleted file mode 100644
index 3f5d1a74b87bd..0000000000000
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// De-optimize this file
-export { x, y, z } from "/some-project/node_modules/foo/file.js";
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/output.js
deleted file mode 100644
index 2a8069f942f66..0000000000000
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/output.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client';
-import { a } from 'foo'
-import z from 'bar'
-
-export { a as x };
-export { y } from '1';
-export { z };
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/output.js
deleted file mode 100644
index 605b446a453c6..0000000000000
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/output.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import * as index from './icons/index.js'
-export { index as x }
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/input.js
similarity index 74%
rename from packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/input.js
rename to packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/input.js
index 747c0573c9167..593c41c13a409 100644
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/1/input.js
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/input.js
@@ -1,3 +1,5 @@
+import { z } from './3'
+
 export { foo, b as y } from './1'
 export { x, a } from './2'
 export { z }
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/output.js
new file mode 100644
index 0000000000000..561d951c9b3b8
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/1/output.js
@@ -0,0 +1 @@
+export const __next_private_export_map__ = '[["foo","./1","foo"],["y","./1","b"],["x","./2","x"],["a","./2","a"],["z","./3","z"]]';
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/input.js
similarity index 100%
rename from packages/next-swc/crates/core/tests/fixture/optimize-barrel/2/input.js
rename to packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/input.js
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/output.js
new file mode 100644
index 0000000000000..3fe5e5efedc73
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/2/output.js
@@ -0,0 +1 @@
+// De-optimize this file
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/input.js
similarity index 55%
rename from packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/input.js
rename to packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/input.js
index 630019266de2e..1e085fea00d3a 100644
--- a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/3/input.js
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/input.js
@@ -1,6 +1,7 @@
-// De-optimize this file
+import { a as z } from './3'
 export * from 'x'
+export * from 'y'
 
 export { foo, b as y } from './1'
 export { x, a } from './2'
-export { z }
+export { z as w }
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/output.js
new file mode 100644
index 0000000000000..a03d39f63e906
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/3/output.js
@@ -0,0 +1,3 @@
+export const __next_private_export_map__ = '[["foo","./1","foo"],["y","./1","b"],["x","./2","x"],["a","./2","a"],["w","./3","a"]]';
+export * from "__barrel_optimize__?names=__PLACEHOLDER__!=!x";
+export * from "__barrel_optimize__?names=__PLACEHOLDER__!=!y";
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/input.js
similarity index 100%
rename from packages/next-swc/crates/core/tests/fixture/optimize-barrel/4/input.js
rename to packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/input.js
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/output.js
new file mode 100644
index 0000000000000..abe88ed8a7f81
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/4/output.js
@@ -0,0 +1,2 @@
+'use client';
+export const __next_private_export_map__ = '[["x","foo","a"],["y","1","y"],["b","foo","b"],["default","foo","default"],["z","bar","default"]]';
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/input.js
similarity index 100%
rename from packages/next-swc/crates/core/tests/fixture/optimize-barrel/5/input.js
rename to packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/input.js
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/output.js
new file mode 100644
index 0000000000000..84600fcc61708
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/normal/5/output.js
@@ -0,0 +1 @@
+export const __next_private_export_map__ = '[["x","./icons/index.js","*"]]';
\ No newline at end of file
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/input.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/input.js
new file mode 100644
index 0000000000000..254f287f75a1f
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/input.js
@@ -0,0 +1,3 @@
+export const a = 1
+export { b }
+export * from 'c'
diff --git a/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/output.js b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/output.js
new file mode 100644
index 0000000000000..fca97a150721b
--- /dev/null
+++ b/packages/next-swc/crates/core/tests/fixture/optimize-barrel/wildcard/1/output.js
@@ -0,0 +1,2 @@
+export const __next_private_export_map__ = '[["a","",""],["b","","b"]]';
+export * from "__barrel_optimize__?names=__PLACEHOLDER__!=!c";
diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts
index 6af12afce99e6..38e0fa1df3c72 100644
--- a/packages/next/src/build/swc/options.ts
+++ b/packages/next/src/build/swc/options.ts
@@ -384,9 +384,7 @@ export function getLoaderSWCOptions({
     }
   }
   if (optimizeBarrelExports) {
-    baseOptions.optimizeBarrelExports = {
-      names: optimizeBarrelExports,
-    }
+    baseOptions.optimizeBarrelExports = optimizeBarrelExports
   }
 
   const isNextDist = nextDistPath.test(filename)
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 92bfa627938ba..148b90b313aa1 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -532,10 +532,14 @@ function getModularizeImportAliases(packages: string[]) {
   for (const pkg of packages) {
     try {
       const descriptionFileData = require(`${pkg}/package.json`)
+      const descriptionFilePath = require.resolve(`${pkg}/package.json`)
 
       for (const field of mainFields) {
         if (descriptionFileData.hasOwnProperty(field)) {
-          aliases[pkg] = `${pkg}/${descriptionFileData[field]}`
+          aliases[pkg] = path.join(
+            path.dirname(descriptionFilePath),
+            descriptionFileData[field]
+          )
           break
         }
       }
@@ -1178,7 +1182,7 @@ export default async function getBaseWebpackConfig(
       ...(reactProductionProfiling ? getReactProfilingInProduction() : {}),
 
       // For Node server, we need to re-alias the package imports to prefer to
-      // resolve to the module export.
+      // resolve to the ESM export.
       ...(isNodeServer
         ? getModularizeImportAliases(
             config.experimental.optimizePackageImports || []
@@ -1962,6 +1966,7 @@ export default async function getBaseWebpackConfig(
         'next-invalid-import-error-loader',
         'next-metadata-route-loader',
         'modularize-import-loader',
+        'next-barrel-loader',
       ].reduce((alias, loader) => {
         // using multiple aliases to replace `resolveLoader.modules`
         alias[loader] = path.join(__dirname, 'webpack', 'loaders', loader)
@@ -1977,24 +1982,51 @@ export default async function getBaseWebpackConfig(
     module: {
       rules: [
         {
-          test: /__barrel_optimize__/,
-          use: ({
-            resourceQuery,
-            issuerLayer,
-          }: {
-            resourceQuery: string
-            issuerLayer: string
-          }) => {
-            const names = resourceQuery.slice('?names='.length).split(',')
+          // This loader rule passes the resource to the SWC loader with
+          // `optimizeBarrelExports` enabled. This option makes the SWC to
+          // transform the original code to be a JSON of its export map, so
+          // the barrel loader can analyze it and only keep the needed ones.
+          test: /__barrel_transform__/,
+          use: ({ resourceQuery }: { resourceQuery: string }) => {
+            const isFromWildcardExport = /[&?]wildcard/.test(resourceQuery)
+
             return [
               getSwcLoader({
-                isServerLayer:
-                  issuerLayer === WEBPACK_LAYERS.reactServerComponents,
-                optimizeBarrelExports: names,
+                hasServerComponents: false,
+                optimizeBarrelExports: {
+                  wildcard: isFromWildcardExport,
+                },
               }),
             ]
           },
         },
+        {
+          // This loader rule works like a bridge between user's import and
+          // the target module behind a package's barrel file. It reads SWC's
+          // analysis result from the previous loader, and directly returns the
+          // code that only exports values that are asked by the user.
+          test: /__barrel_optimize__/,
+          use: ({ resourceQuery }: { resourceQuery: string }) => {
+            const names = (
+              resourceQuery.match(/\?names=([^&]+)/)?.[1] || ''
+            ).split(',')
+            const isFromWildcardExport = /[&?]wildcard/.test(resourceQuery)
+
+            return [
+              {
+                loader: 'next-barrel-loader',
+                options: {
+                  names,
+                  wildcard: isFromWildcardExport,
+                },
+                // This is part of the request value to serve as the module key.
+                // The barrel loader are no-op re-exported modules keyed by
+                // export names.
+                ident: 'next-barrel-loader:' + resourceQuery,
+              },
+            ]
+          },
+        },
         ...(hasAppDir
           ? [
               {
diff --git a/packages/next/src/build/webpack/loaders/next-barrel-loader.ts b/packages/next/src/build/webpack/loaders/next-barrel-loader.ts
new file mode 100644
index 0000000000000..d55851d1dfb46
--- /dev/null
+++ b/packages/next/src/build/webpack/loaders/next-barrel-loader.ts
@@ -0,0 +1,179 @@
+/**
+ * ## Barrel Optimizations
+ *
+ * This loader is used to optimize the imports of "barrel" files that have many
+ * re-exports. Currently, both Node.js and Webpack have to enter all of these
+ * submodules even if we only need a few of them.
+ *
+ * For example, say a file `foo.js` with the following contents:
+ *
+ *   export { a } from './a'
+ *   export { b } from './b'
+ *   export { c } from './c'
+ *   ...
+ *
+ * If the user imports `a` only, this loader will accept the `names` option to
+ * be `['a']`. Then, it request the "__barrel_transform__" SWC transform to load
+ * `foo.js` and receive the following output:
+ *
+ *   export const __next_private_export_map__ = '[["./a","a","a"],["./b","b","b"],["./c","c","c"],...]'
+ *
+ * The export map, generated by SWC, is a JSON that represents the exports of
+ * that module, their original file, and their original name (since you can do
+ * `export { a as b }`).
+ *
+ * Then, this loader can safely remove all the exports that are not needed and
+ * re-export the ones from `names`:
+ *
+ *   export { a } from './a'
+ *
+ * That's the basic situation and also the happy path.
+ *
+ *
+ *
+ * ## Wildcard Exports
+ *
+ * For wildcard exports (e.g. `export * from './a'`), it becomes a bit more complicated.
+ * Say `foo.js` with the following contents:
+ *
+ *   export * from './a'
+ *   export * from './b'
+ *   export * from './c'
+ *   ...
+ *
+ * If the user imports `bar` from it, SWC can never know which files are going to be
+ * exporting `bar`. So, we have to keep all the wildcard exports and do the same
+ * process recursively. This loader will return the following output:
+ *
+ *   export * from '__barrel_optimize__?names=bar&wildcard!=!./a'
+ *   export * from '__barrel_optimize__?names=bar&wildcard!=!./b'
+ *   export * from '__barrel_optimize__?names=bar&wildcard!=!./c'
+ *   ...
+ *
+ * The "!=!" tells Webpack to use the same loader to process './a', './b', and './c'.
+ * After the recursive process, the "inner loaders" will either return an empty string
+ * or:
+ *
+ *   export * from './target'
+ *
+ * Where `target` is the file that exports `bar`.
+ *
+ *
+ *
+ * ## Non-Barrel Files
+ *
+ * If the file is not a barrel, we can't apply any optimizations. That's because
+ * we can't easily remove things from the file. For example, say `foo.js` with:
+ *
+ *   const v = 1
+ *   export function b () {
+ *     return v
+ *   }
+ *
+ * If the user imports `b` only, we can't remove the `const v = 1` even though
+ * the file is side-effect free. In these caes, this loader will simply re-export
+ * `foo.js`:
+ *
+ *   export * from './foo'
+ *
+ * Besides these cases, this loader also carefully handles the module cache so
+ * SWC won't analyze the same file twice, and no instance of the same file will
+ * be accidentally created as different instances.
+ */
+
+import type webpack from 'webpack'
+
+const NextBarrelLoader = async function (
+  this: webpack.LoaderContext<{
+    names: string[]
+    wildcard: boolean
+  }>
+) {
+  this.async()
+  const { names, wildcard } = this.getOptions()
+
+  const source = await new Promise<string>((resolve, reject) => {
+    this.loadModule(
+      `__barrel_transform__${wildcard ? '?wildcard' : ''}!=!${
+        this.resourcePath
+      }`,
+      (err, src) => {
+        if (err) {
+          reject(err)
+        } else {
+          resolve(src)
+        }
+      }
+    )
+  })
+
+  const matches = source.match(
+    /^([^]*)export const __next_private_export_map__ = '([^']+)'/
+  )
+
+  if (!matches) {
+    // This file isn't a barrel and we can't apply any optimizations. Let's re-export everything.
+    // Since this loader accepts `names` and the request is keyed with `names`, we can't simply
+    // return the original source here. That will create these imports with different names as
+    // different modules instances.
+    this.callback(null, `export * from ${JSON.stringify(this.resourcePath)}`)
+    return
+  }
+
+  const wildcardExports = [...source.matchAll(/export \* from "([^"]+)"/g)]
+
+  // It needs to keep the prefix for comments and directives like "use client".
+  const prefix = matches[1]
+
+  const exportList = JSON.parse(matches[2]) as [string, string, string][]
+  const exportMap = new Map<string, [string, string]>()
+  for (const [name, path, orig] of exportList) {
+    exportMap.set(name, [path, orig])
+  }
+
+  let output = prefix
+  let missedNames: string[] = []
+  for (const name of names) {
+    // If the name matches
+    if (exportMap.has(name)) {
+      const decl = exportMap.get(name)!
+
+      // In the wildcard case, all exports are from the file itself.
+      if (wildcard) {
+        decl[0] = this.resourcePath
+        decl[1] = name
+      }
+
+      if (decl[1] === '*') {
+        output += `\nexport * as ${name} from ${JSON.stringify(decl[0])}`
+      } else if (decl[1] === 'default') {
+        output += `\nexport { default as ${name} } from ${JSON.stringify(
+          decl[0]
+        )}`
+      } else if (decl[1] === name) {
+        output += `\nexport { ${name} } from ${JSON.stringify(decl[0])}`
+      } else {
+        output += `\nexport { ${decl[1]} as ${name} } from ${JSON.stringify(
+          decl[0]
+        )}`
+      }
+    } else {
+      missedNames.push(name)
+    }
+  }
+
+  // These are from wildcard exports.
+  if (missedNames.length > 0) {
+    for (const match of wildcardExports) {
+      const path = match[1]
+
+      output += `\nexport * from ${JSON.stringify(
+        path.replace('__PLACEHOLDER__', missedNames.join(',') + '&wildcard')
+      )}`
+    }
+  }
+
+  this.callback(null, output)
+}
+
+export default NextBarrelLoader
diff --git a/packages/next/src/build/webpack/loaders/next-swc-loader.ts b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
index 79253bf59acf5..4426ca9ab9fee 100644
--- a/packages/next/src/build/webpack/loaders/next-swc-loader.ts
+++ b/packages/next/src/build/webpack/loaders/next-swc-loader.ts
@@ -58,6 +58,13 @@ async function loaderTransform(
   const isPageFile = filename.startsWith(pagesDir)
   const relativeFilePathFromRoot = path.relative(rootDir, filename)
 
+  // For testing purposes
+  if (process.env.NEXT_TEST_MODE) {
+    if (loaderOptions.optimizeBarrelExports) {
+      console.log('optimizeBarrelExports:', filename)
+    }
+  }
+
   const swcOptions = getLoaderSWCOptions({
     pagesDir,
     appDir,
diff --git a/packages/next/src/server/config.ts b/packages/next/src/server/config.ts
index b5b5e787b5aa4..f24d73dbda0d4 100644
--- a/packages/next/src/server/config.ts
+++ b/packages/next/src/server/config.ts
@@ -678,24 +678,6 @@ function assignDefaults(
     'lodash-es': {
       transform: 'lodash-es/{{member}}',
     },
-    '@headlessui/react': {
-      transform: {
-        Transition:
-          'modularize-import-loader?name={{member}}&join=./components/transitions/transition!@headlessui/react',
-        Tab: 'modularize-import-loader?name={{member}}&join=./components/tabs/tabs!@headlessui/react',
-        '*': 'modularize-import-loader?name={{member}}&join=./components/{{ kebabCase member }}/{{ kebabCase member }}!@headlessui/react',
-      },
-      skipDefaultConversion: true,
-    },
-    '@heroicons/react/20/solid': {
-      transform: '@heroicons/react/20/solid/esm/{{member}}',
-    },
-    '@heroicons/react/24/solid': {
-      transform: '@heroicons/react/24/solid/esm/{{member}}',
-    },
-    '@heroicons/react/24/outline': {
-      transform: '@heroicons/react/24/outline/esm/{{member}}',
-    },
     ramda: {
       transform: 'ramda/es/{{member}}',
     },
@@ -739,7 +721,18 @@ function assignDefaults(
     result.experimental = {}
   }
   result.experimental.optimizePackageImports = [
-    ...new Set([...userProvidedOptimizePackageImports, 'lucide-react']),
+    ...new Set([
+      ...userProvidedOptimizePackageImports,
+      'lucide-react',
+      '@headlessui/react',
+      '@fortawesome/fontawesome-svg-core',
+      '@fortawesome/free-solid-svg-icons',
+      '@headlessui-float/react',
+      'react-hot-toast',
+      '@heroicons/react/20/solid',
+      '@heroicons/react/24/solid',
+      '@heroicons/react/24/outline',
+    ]),
   ]
 
   return result
diff --git a/test/development/basic/barrel-optimization.test.ts b/test/development/basic/barrel-optimization.test.ts
new file mode 100644
index 0000000000000..5977e27925cb4
--- /dev/null
+++ b/test/development/basic/barrel-optimization.test.ts
@@ -0,0 +1,120 @@
+import { join } from 'path'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('optimizePackageImports', () => {
+  let next: NextInstance
+
+  beforeAll(async () => {
+    next = await createNext({
+      env: {
+        NEXT_TEST_MODE: '1',
+      },
+      files: {
+        app: new FileRef(join(__dirname, 'barrel-optimization/app')),
+        pages: new FileRef(join(__dirname, 'barrel-optimization/pages')),
+        components: new FileRef(
+          join(__dirname, 'barrel-optimization/components')
+        ),
+        'next.config.js': new FileRef(
+          join(__dirname, 'barrel-optimization/next.config.js')
+        ),
+        node_modules_bak: new FileRef(
+          join(__dirname, 'barrel-optimization/node_modules_bak')
+        ),
+      },
+      packageJson: {
+        scripts: {
+          setup: `cp -r ./node_modules_bak/* ./node_modules`,
+          build: `yarn setup && next build`,
+          dev: `yarn setup && next dev`,
+          start: 'next start',
+        },
+      },
+      installCommand: 'yarn',
+      startCommand: (global as any).isNextDev ? 'yarn dev' : 'yarn start',
+      buildCommand: 'yarn build',
+      dependencies: {
+        'lucide-react': '0.264.0',
+        '@headlessui/react': '1.7.17',
+        '@heroicons/react': '2.0.18',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('app - should render the icons correctly without creating all the modules', async () => {
+    let logs = ''
+    next.on('stdout', (log) => {
+      logs += log
+    })
+
+    const html = await next.render('/')
+
+    // Ensure the icons are rendered
+    expect(html).toContain('<svg xmlns="http://www.w3.org/2000/svg"')
+
+    const modules = [
+      ...logs.matchAll(
+        /compiled client and server successfully in \d+(\.\d+)?(s| ms) \((\d+) modules\)/g
+      ),
+    ]
+
+    expect(modules.length).toBeGreaterThanOrEqual(1)
+    for (const [, , , moduleCount] of modules) {
+      // Ensure that the number of modules is less than 1000 - otherwise we're
+      // importing the entire library.
+      expect(parseInt(moduleCount)).toBeLessThan(1000)
+    }
+  })
+
+  it('pages - should render the icons correctly without creating all the modules', async () => {
+    let logs = ''
+    next.on('stdout', (log) => {
+      logs += log
+    })
+
+    const html = await next.render('/pages-route')
+
+    // Ensure the icons are rendered
+    expect(html).toContain('<svg xmlns="http://www.w3.org/2000/svg"')
+
+    const modules = [
+      ...logs.matchAll(
+        /compiled client and server successfully in \d+(\.\d+)?(s| ms) \((\d+) modules\)/g
+      ),
+    ]
+
+    expect(modules.length).toBeGreaterThanOrEqual(1)
+    for (const [, , , moduleCount] of modules) {
+      // Ensure that the number of modules is less than 1000 - otherwise we're
+      // importing the entire library.
+      expect(parseInt(moduleCount)).toBeLessThan(1000)
+    }
+  })
+
+  it('should reuse the transformed barrel meta file from SWC', async () => {
+    let logs = ''
+    next.on('stdout', (log) => {
+      logs += log
+    })
+
+    const html = await next.render('/dedupe')
+
+    // Ensure the icons are rendered
+    expect(html).toContain('<svg xmlns="http://www.w3.org/2000/svg"')
+
+    const swcOptimizeBarrelExports = [
+      ...logs.matchAll(
+        /optimizeBarrelExports: .+\/dist\/esm\/lucide-react\.js/g
+      ),
+    ]
+
+    expect(swcOptimizeBarrelExports.length).toBe(1)
+  })
+
+  it('should handle recursive wildcard exports', async () => {
+    const html = await next.render('/recursive')
+    expect(html).toContain('<h1>42</h1>')
+  })
+})
diff --git a/test/development/basic/barrel-optimization/app/dedupe/page.js b/test/development/basic/barrel-optimization/app/dedupe/page.js
new file mode 100644
index 0000000000000..0cef1fe7cfba5
--- /dev/null
+++ b/test/development/basic/barrel-optimization/app/dedupe/page.js
@@ -0,0 +1,23 @@
+// The barrel file shouldn't be transformed many times if it's imported multiple times.
+
+import { ImageIcon } from 'lucide-react'
+import { IceCream } from 'lucide-react'
+import { AccessibilityIcon } from 'lucide-react'
+import { VariableIcon } from 'lucide-react'
+import { Table2Icon } from 'lucide-react'
+import { Package2Icon } from 'lucide-react'
+import { ZapIcon } from 'lucide-react'
+
+export default function Page() {
+  return (
+    <>
+      <ImageIcon />
+      <IceCream />
+      <AccessibilityIcon />
+      <VariableIcon />
+      <Table2Icon />
+      <Package2Icon />
+      <ZapIcon />
+    </>
+  )
+}
diff --git a/test/development/basic/modularize-imports/app/layout.js b/test/development/basic/barrel-optimization/app/layout.js
similarity index 100%
rename from test/development/basic/modularize-imports/app/layout.js
rename to test/development/basic/barrel-optimization/app/layout.js
diff --git a/test/development/basic/barrel-optimization/app/page.js b/test/development/basic/barrel-optimization/app/page.js
new file mode 100644
index 0000000000000..7debba889662e
--- /dev/null
+++ b/test/development/basic/barrel-optimization/app/page.js
@@ -0,0 +1,15 @@
+import { Comp } from '../components/slow-component'
+import { AcademicCapIcon as A } from '@heroicons/react/20/solid'
+import { AcademicCapIcon as B } from '@heroicons/react/24/outline'
+import { AcademicCapIcon as C } from '@heroicons/react/24/solid'
+
+export default function Page() {
+  return (
+    <>
+      <A />
+      <B />
+      <C />
+      <Comp />
+    </>
+  )
+}
diff --git a/test/development/basic/barrel-optimization/app/recursive/page.js b/test/development/basic/barrel-optimization/app/recursive/page.js
new file mode 100644
index 0000000000000..0040d9dde3dbe
--- /dev/null
+++ b/test/development/basic/barrel-optimization/app/recursive/page.js
@@ -0,0 +1,5 @@
+import { c } from 'my-lib'
+
+export default function Page() {
+  return <h1>{c}</h1>
+}
diff --git a/test/development/basic/modularize-imports/app/page.js b/test/development/basic/barrel-optimization/components/slow-component.js
similarity index 92%
rename from test/development/basic/modularize-imports/app/page.js
rename to test/development/basic/barrel-optimization/components/slow-component.js
index c327c4d2142f8..aaa6e63dc9046 100644
--- a/test/development/basic/modularize-imports/app/page.js
+++ b/test/development/basic/barrel-optimization/components/slow-component.js
@@ -21,11 +21,14 @@ import {
   Edit2,
   LucideEdit3,
   TextSelection,
+  createLucideIcon,
 } from 'lucide-react'
 
 import { Tab, RadioGroup, Transition } from '@headlessui/react'
 
-export default function Page() {
+export function Comp() {
+  // eslint-disable-next-line no-undef
+  globalThis.__noop__ = createLucideIcon
   return (
     <>
       <IceCream />
diff --git a/test/development/basic/barrel-optimization/next.config.js b/test/development/basic/barrel-optimization/next.config.js
new file mode 100644
index 0000000000000..d966eb99681dc
--- /dev/null
+++ b/test/development/basic/barrel-optimization/next.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  experimental: {
+    optimizePackageImports: ['my-lib'],
+  },
+}
diff --git a/test/development/basic/barrel-optimization/node_modules_bak/my-lib/a.js b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/a.js
new file mode 100644
index 0000000000000..35dccc1ad442a
--- /dev/null
+++ b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/a.js
@@ -0,0 +1 @@
+export * from './b'
diff --git a/test/development/basic/barrel-optimization/node_modules_bak/my-lib/b.js b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/b.js
new file mode 100644
index 0000000000000..3d3691900e01d
--- /dev/null
+++ b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/b.js
@@ -0,0 +1 @@
+export * from './c'
diff --git a/test/development/basic/barrel-optimization/node_modules_bak/my-lib/c.js b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/c.js
new file mode 100644
index 0000000000000..aa4ff5c8ac77e
--- /dev/null
+++ b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/c.js
@@ -0,0 +1 @@
+export const c = 42
diff --git a/test/development/basic/barrel-optimization/node_modules_bak/my-lib/index.js b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/index.js
new file mode 100644
index 0000000000000..21c83d4780fc6
--- /dev/null
+++ b/test/development/basic/barrel-optimization/node_modules_bak/my-lib/index.js
@@ -0,0 +1 @@
+export * from './a'
diff --git a/test/development/basic/barrel-optimization/pages/pages-route.js b/test/development/basic/barrel-optimization/pages/pages-route.js
new file mode 100644
index 0000000000000..1f761e5eb9a46
--- /dev/null
+++ b/test/development/basic/barrel-optimization/pages/pages-route.js
@@ -0,0 +1,5 @@
+import { Comp } from '../components/slow-component'
+
+export default function Page() {
+  return <Comp />
+}
diff --git a/test/development/basic/modularize-imports.test.ts b/test/development/basic/modularize-imports.test.ts
deleted file mode 100644
index 9629d9bd06741..0000000000000
--- a/test/development/basic/modularize-imports.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { join } from 'path'
-import { createNext, FileRef } from 'e2e-utils'
-import { NextInstance } from 'test/lib/next-modes/base'
-
-describe('modularize-imports', () => {
-  let next: NextInstance
-
-  beforeAll(async () => {
-    next = await createNext({
-      files: {
-        app: new FileRef(join(__dirname, 'modularize-imports/app')),
-      },
-      dependencies: {
-        'lucide-react': '0.264.0',
-        '@headlessui/react': '1.7.17',
-      },
-    })
-  })
-  afterAll(() => next.destroy())
-
-  it('should render the icons correctly without creating all the modules', async () => {
-    let logs = ''
-    next.on('stdout', (log) => {
-      logs += log
-    })
-
-    const html = await next.render('/')
-
-    // Ensure the icons are rendered
-    expect(html).toContain('<svg xmlns="http://www.w3.org/2000/svg"')
-
-    const modules = [
-      ...logs.matchAll(
-        /compiled client and server successfully in \d+(\.\d+)?(s| ms) \((\d+) modules\)/g
-      ),
-    ]
-
-    expect(modules.length).toBeGreaterThanOrEqual(1)
-    for (const [, , , moduleCount] of modules) {
-      // Ensure that the number of modules is less than 1000 - otherwise we're
-      // importing the entire library.
-      expect(parseInt(moduleCount)).toBeLessThan(1000)
-    }
-  })
-})

From 2fa63b901870b4fef243a64a21565358f5ed22aa Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 30 Aug 2023 10:15:15 +0200
Subject: [PATCH 16/24] Move getBabelConfigFile to separate file (#54716)

Small change to move this function into a separate file as it's shared
between 2 files.
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 .../next/src/build/get-babel-config-file.ts   | 30 +++++++++++++++++++
 packages/next/src/build/webpack-config.ts     | 28 +----------------
 packages/next/src/lib/turbopack-warning.ts    |  2 +-
 3 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 packages/next/src/build/get-babel-config-file.ts

diff --git a/packages/next/src/build/get-babel-config-file.ts b/packages/next/src/build/get-babel-config-file.ts
new file mode 100644
index 0000000000000..29fa7584f4295
--- /dev/null
+++ b/packages/next/src/build/get-babel-config-file.ts
@@ -0,0 +1,30 @@
+import { fileExists } from '../lib/file-exists'
+import { join } from 'path'
+
+const BABEL_CONFIG_FILES = [
+  '.babelrc',
+  '.babelrc.json',
+  '.babelrc.js',
+  '.babelrc.mjs',
+  '.babelrc.cjs',
+  'babel.config.js',
+  'babel.config.json',
+  'babel.config.mjs',
+  'babel.config.cjs',
+]
+
+export async function getBabelConfigFile(
+  dir: string
+): Promise<string | undefined> {
+  const babelConfigFile = await BABEL_CONFIG_FILES.reduce(
+    async (memo: Promise<string | undefined>, filename) => {
+      const configFilePath = join(dir, filename)
+      return (
+        (await memo) ||
+        ((await fileExists(configFilePath)) ? configFilePath : undefined)
+      )
+    },
+    Promise.resolve(undefined)
+  )
+  return babelConfigFile
+}
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 148b90b313aa1..e7e3d8e3e72d9 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -18,7 +18,6 @@ import {
   RSC_ACTION_VALIDATE_ALIAS,
   WEBPACK_RESOURCE_QUERIES,
 } from '../lib/constants'
-import { fileExists } from '../lib/file-exists'
 import { CustomRoutes } from '../lib/load-custom-routes.js'
 import { isEdgeRuntime } from '../lib/is-edge-runtime'
 import {
@@ -68,6 +67,7 @@ import { SubresourceIntegrityPlugin } from './webpack/plugins/subresource-integr
 import { NextFontManifestPlugin } from './webpack/plugins/next-font-manifest-plugin'
 import { getSupportedBrowsers } from './utils'
 import { MemoryWithGcCachePlugin } from './webpack/plugins/memory-with-gc-cache-plugin'
+import { getBabelConfigFile } from './get-babel-config-file'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 type ClientEntries = {
@@ -118,32 +118,6 @@ const mainFieldsPerCompiler: Record<CompilerNameValues, string[]> = {
   [COMPILER_NAMES.edgeServer]: edgeConditionNames,
 }
 
-const BABEL_CONFIG_FILES = [
-  '.babelrc',
-  '.babelrc.json',
-  '.babelrc.js',
-  '.babelrc.mjs',
-  '.babelrc.cjs',
-  'babel.config.js',
-  'babel.config.json',
-  'babel.config.mjs',
-  'babel.config.cjs',
-]
-
-export const getBabelConfigFile = async (dir: string) => {
-  const babelConfigFile = await BABEL_CONFIG_FILES.reduce(
-    async (memo: Promise<string | undefined>, filename) => {
-      const configFilePath = path.join(dir, filename)
-      return (
-        (await memo) ||
-        ((await fileExists(configFilePath)) ? configFilePath : undefined)
-      )
-    },
-    Promise.resolve(undefined)
-  )
-  return babelConfigFile
-}
-
 // Support for NODE_PATH
 const nodePathList = (process.env.NODE_PATH || '')
   .split(process.platform === 'win32' ? ';' : ':')
diff --git a/packages/next/src/lib/turbopack-warning.ts b/packages/next/src/lib/turbopack-warning.ts
index e2f9470b2a208..a7202f3208dcc 100644
--- a/packages/next/src/lib/turbopack-warning.ts
+++ b/packages/next/src/lib/turbopack-warning.ts
@@ -78,7 +78,7 @@ export async function validateTurboNextConfig({
   const { getPkgManager } =
     require('../lib/helpers/get-pkg-manager') as typeof import('../lib/helpers/get-pkg-manager')
   const { getBabelConfigFile } =
-    require('../build/webpack-config') as typeof import('../build/webpack-config')
+    require('../build/get-babel-config-file') as typeof import('../build/get-babel-config-file')
   const { defaultConfig } =
     require('../server/config-shared') as typeof import('../server/config-shared')
   const chalk =

From 59e3ffabbbc314128c78789e3c35cacdfad8f5f5 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 30 Aug 2023 10:16:00 +0200
Subject: [PATCH 17/24] Reimplement getBabelConfigFile to be simpler (#54741)

Fixes the feedback shared here:
https://github.com/vercel/next.js/pull/54716#discussion_r1309359377.

Reimplements `getBabelConfigFile` to use `for of` instead of `reduce`.
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->
---
 .../next/src/build/get-babel-config-file.ts   | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/next/src/build/get-babel-config-file.ts b/packages/next/src/build/get-babel-config-file.ts
index 29fa7584f4295..beb33a1ad3190 100644
--- a/packages/next/src/build/get-babel-config-file.ts
+++ b/packages/next/src/build/get-babel-config-file.ts
@@ -16,15 +16,12 @@ const BABEL_CONFIG_FILES = [
 export async function getBabelConfigFile(
   dir: string
 ): Promise<string | undefined> {
-  const babelConfigFile = await BABEL_CONFIG_FILES.reduce(
-    async (memo: Promise<string | undefined>, filename) => {
-      const configFilePath = join(dir, filename)
-      return (
-        (await memo) ||
-        ((await fileExists(configFilePath)) ? configFilePath : undefined)
-      )
-    },
-    Promise.resolve(undefined)
-  )
-  return babelConfigFile
+  for (const filename of BABEL_CONFIG_FILES) {
+    const configFilePath = join(dir, filename)
+    const exists = await fileExists(configFilePath)
+    if (!exists) {
+      continue
+    }
+    return configFilePath
+  }
 }

From 842366c92cedabd1b31c89e3782915d625f3860a Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 30 Aug 2023 10:58:44 +0200
Subject: [PATCH 18/24] Fix memory watcher reboot (#54760)

I've introduced a bug with memory watching in development in this PR: #53523.

Specifically when calling `cleanup` the process would exit because the `exit` listener on the childprocess would be called which then calls `process.exit(0)`. This caused a condition where calling `worker.end()` would immediately quit the process.

This PR ensures the cleanup listeners for childprocess are disabled (`.off(`) so that when we call `worker.end()` the process is terminated without the main process being terminated.
---
 packages/next/src/cli/next-dev.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/next/src/cli/next-dev.ts b/packages/next/src/cli/next-dev.ts
index 780a89e3f3f1b..765bdf051d1f7 100644
--- a/packages/next/src/cli/next-dev.ts
+++ b/packages/next/src/cli/next-dev.ts
@@ -193,6 +193,12 @@ async function createRouterWorker(fullConfig: NextConfigComplete): Promise<{
   return {
     worker,
     cleanup: async () => {
+      // Remove process listeners for childprocess too.
+      for (const curWorker of ((worker as any)._workerPool?._workers || []) as {
+        _child?: ChildProcess
+      }[]) {
+        curWorker._child?.off('exit', cleanup)
+      }
       process.off('exit', cleanup)
       process.off('SIGINT', cleanup)
       process.off('SIGTERM', cleanup)

From 8405a1a2c363d082f0b198816fc30ee5f7c14855 Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <accounts+github@wyattjoh.ca>
Date: Wed, 30 Aug 2023 04:04:02 -0600
Subject: [PATCH 19/24] Misc Typescript updates (#54734)

This bundles a collection of Typescript updates that correct typings
across the servers:

- Manifest typings have been narrowed
- Some methods have been moved to abstract methods on classes
- Added some type guard functions for route matches
- Utilized early returns in logic to reduce nesting
- Added mutability modifiers to some properties to prevent accidental
mutations
- Removed some useless assigns from unused catch error params:

```ts
try {
  await something
} catch (_) {}

// Is the same as

try {
  await something
} catch {}
```

This does not introduce any new functionality, simply some QOL
improvements.
---
 packages/next/src/build/index.ts              | 171 +++++++-------
 packages/next/src/build/load-jsconfig.ts      |   2 +-
 packages/next/src/build/webpack-config.ts     |   2 +-
 .../internal/helpers/get-socket-url.ts        |   2 +-
 .../src/client/dev/error-overlay/websocket.ts |   2 +-
 packages/next/src/export/index.ts             |   4 +-
 .../src/lib/create-client-router-filter.ts    |   2 +-
 packages/next/src/lib/load-custom-routes.ts   |  25 ++-
 .../src/lib/metadata/resolvers/resolve-url.ts |   2 +-
 packages/next/src/lib/recursive-delete.ts     |   2 +-
 .../src/server/app-render/action-handler.ts   |   4 +-
 packages/next/src/server/base-server.ts       |  98 ++++----
 .../next/src/server/dev/hot-reloader-types.ts |   2 +-
 .../src/server/dev/hot-reloader-webpack.ts    |   2 +-
 .../next/src/server/dev/next-dev-server.ts    |  52 ++---
 .../src/server/dev/on-demand-entry-handler.ts |  10 +-
 .../route-matchers/app-page-route-matcher.ts  |   2 +-
 .../route-matches/app-page-route-match.ts     |  13 ++
 .../route-matches/pages-api-route-match.ts    |  13 ++
 .../incremental-cache/file-system-cache.ts    |   2 +-
 .../src/server/lib/router-utils/filesystem.ts |  89 ++++----
 .../server/lib/router-utils/resolve-routes.ts |  24 +-
 .../src/server/lib/router-utils/setup-dev.ts  |  13 +-
 packages/next/src/server/load-components.ts   |   5 +-
 packages/next/src/server/next-server.ts       | 212 ++++++++++--------
 packages/next/src/server/require.ts           |  40 ++--
 packages/next/src/server/server-utils.ts      | 160 +------------
 packages/next/src/server/web-server.ts        | 135 ++++++-----
 .../src/shared/lib/router/utils/path-match.ts |  29 ++-
 .../src/telemetry/events/swc-load-failure.ts  |   6 +-
 30 files changed, 538 insertions(+), 587 deletions(-)

diff --git a/packages/next/src/build/index.ts b/packages/next/src/build/index.ts
index eeda0ee96c6a0..c9925716d8a9b 100644
--- a/packages/next/src/build/index.ts
+++ b/packages/next/src/build/index.ts
@@ -32,6 +32,7 @@ import { FileType, fileExists } from '../lib/file-exists'
 import { findPagesDir } from '../lib/find-pages-dir'
 import loadCustomRoutes, {
   CustomRoutes,
+  Header,
   normalizeRouteRegex,
   Redirect,
   Rewrite,
@@ -170,47 +171,46 @@ export type PrerenderManifest = {
   preview: __ApiPreviewProps
 }
 
-type CustomRoute = {
+type ManifestBuiltRoute = {
+  /**
+   * The route pattern used to match requests for this route.
+   */
   regex: string
-  statusCode?: number | undefined
-  permanent?: undefined
-  source: string
-  locale?: false | undefined
-  basePath?: false | undefined
-  destination?: string | undefined
+}
+
+export type ManifestRewriteRoute = ManifestBuiltRoute & Rewrite
+export type ManifestRedirectRoute = ManifestBuiltRoute & Redirect
+export type ManifestHeaderRoute = ManifestBuiltRoute & Header
+
+export type ManifestRoute = ManifestBuiltRoute & {
+  page: string
+  namedRegex?: string
+  routeKeys?: { [key: string]: string }
+}
+
+export type ManifestDataRoute = {
+  page: string
+  routeKeys?: { [key: string]: string }
+  dataRouteRegex: string
+  namedDataRouteRegex?: string
 }
 
 export type RoutesManifest = {
   version: number
   pages404: boolean
   basePath: string
-  redirects: Array<CustomRoute>
+  redirects: Array<Redirect>
   rewrites?:
-    | Array<CustomRoute>
+    | Array<ManifestRewriteRoute>
     | {
-        beforeFiles: Array<CustomRoute>
-        afterFiles: Array<CustomRoute>
-        fallback: Array<CustomRoute>
+        beforeFiles: Array<ManifestRewriteRoute>
+        afterFiles: Array<ManifestRewriteRoute>
+        fallback: Array<ManifestRewriteRoute>
       }
-  headers: Array<CustomRoute>
-  staticRoutes: Array<{
-    page: string
-    regex: string
-    namedRegex?: string
-    routeKeys?: { [key: string]: string }
-  }>
-  dynamicRoutes: Array<{
-    page: string
-    regex: string
-    namedRegex?: string
-    routeKeys?: { [key: string]: string }
-  }>
-  dataRoutes: Array<{
-    page: string
-    routeKeys?: { [key: string]: string }
-    dataRouteRegex: string
-    namedDataRouteRegex?: string
-  }>
+  headers: Array<ManifestHeaderRoute>
+  staticRoutes: Array<ManifestRoute>
+  dynamicRoutes: Array<ManifestRoute>
+  dataRoutes: Array<ManifestDataRoute>
   i18n?: {
     domains?: Array<{
       http?: true
@@ -231,6 +231,52 @@ export type RoutesManifest = {
   caseSensitive?: boolean
 }
 
+export function buildCustomRoute(
+  type: 'header',
+  route: Header
+): ManifestHeaderRoute
+export function buildCustomRoute(
+  type: 'rewrite',
+  route: Rewrite
+): ManifestRewriteRoute
+export function buildCustomRoute(
+  type: 'redirect',
+  route: Redirect,
+  restrictedRedirectPaths: string[]
+): ManifestRedirectRoute
+export function buildCustomRoute(
+  type: RouteType,
+  route: Redirect | Rewrite | Header,
+  restrictedRedirectPaths?: string[]
+): ManifestHeaderRoute | ManifestRewriteRoute | ManifestRedirectRoute {
+  const compiled = pathToRegexp(route.source, [], {
+    strict: true,
+    sensitive: false,
+    delimiter: '/', // default is `/#?`, but Next does not pass query info
+  })
+
+  let source = compiled.source
+  if (!route.internal) {
+    source = modifyRouteRegex(
+      source,
+      type === 'redirect' ? restrictedRedirectPaths : undefined
+    )
+  }
+
+  const regex = normalizeRouteRegex(source)
+
+  if (type !== 'redirect') {
+    return { ...route, regex }
+  }
+
+  return {
+    ...route,
+    statusCode: getRedirectStatus(route as Redirect),
+    permanent: undefined,
+    regex,
+  }
+}
+
 async function generateClientSsgManifest(
   prerenderManifest: PrerenderManifest,
   {
@@ -710,44 +756,6 @@ export default async function build(
         config.basePath ? `${config.basePath}${p}` : p
       )
 
-      const buildCustomRoute = (
-        r: {
-          source: string
-          locale?: false
-          basePath?: false
-          statusCode?: number
-          destination?: string
-        },
-        type: RouteType
-      ) => {
-        const keys: any[] = []
-
-        const routeRegex = pathToRegexp(r.source, keys, {
-          strict: true,
-          sensitive: false,
-          delimiter: '/', // default is `/#?`, but Next does not pass query info
-        })
-        let regexSource = routeRegex.source
-
-        if (!(r as any).internal) {
-          regexSource = modifyRouteRegex(
-            routeRegex.source,
-            type === 'redirect' ? restrictedRedirectPaths : undefined
-          )
-        }
-
-        return {
-          ...r,
-          ...(type === 'redirect'
-            ? {
-                statusCode: getRedirectStatus(r as Redirect),
-                permanent: undefined,
-              }
-            : {}),
-          regex: normalizeRouteRegex(regexSource),
-        }
-      }
-
       const routesManifestPath = path.join(distDir, ROUTES_MANIFEST)
       const routesManifest: RoutesManifest = nextBuildSpan
         .traceChild('generate-routes-manifest')
@@ -772,10 +780,10 @@ export default async function build(
             pages404: true,
             caseSensitive: !!config.experimental.caseSensitiveRoutes,
             basePath: config.basePath,
-            redirects: redirects.map((r: any) =>
-              buildCustomRoute(r, 'redirect')
+            redirects: redirects.map((r) =>
+              buildCustomRoute('redirect', r, restrictedRedirectPaths)
             ),
-            headers: headers.map((r: any) => buildCustomRoute(r, 'header')),
+            headers: headers.map((r) => buildCustomRoute('header', r)),
             dynamicRoutes,
             staticRoutes,
             dataRoutes: [],
@@ -791,22 +799,23 @@ export default async function build(
         })
 
       if (rewrites.beforeFiles.length === 0 && rewrites.fallback.length === 0) {
-        routesManifest.rewrites = rewrites.afterFiles.map((r: any) =>
-          buildCustomRoute(r, 'rewrite')
+        routesManifest.rewrites = rewrites.afterFiles.map((r) =>
+          buildCustomRoute('rewrite', r)
         )
       } else {
         routesManifest.rewrites = {
-          beforeFiles: rewrites.beforeFiles.map((r: any) =>
-            buildCustomRoute(r, 'rewrite')
+          beforeFiles: rewrites.beforeFiles.map((r) =>
+            buildCustomRoute('rewrite', r)
           ),
-          afterFiles: rewrites.afterFiles.map((r: any) =>
-            buildCustomRoute(r, 'rewrite')
+          afterFiles: rewrites.afterFiles.map((r) =>
+            buildCustomRoute('rewrite', r)
           ),
-          fallback: rewrites.fallback.map((r: any) =>
-            buildCustomRoute(r, 'rewrite')
+          fallback: rewrites.fallback.map((r) =>
+            buildCustomRoute('rewrite', r)
           ),
         }
       }
+
       const combinedRewrites: Rewrite[] = [
         ...rewrites.beforeFiles,
         ...rewrites.afterFiles,
@@ -2057,7 +2066,7 @@ export default async function build(
                   await fs.copyFile(cachedTracePath, nextServerTraceOutput)
                   return
                 }
-              } catch (_) {}
+              } catch {}
             }
 
             const root =
diff --git a/packages/next/src/build/load-jsconfig.ts b/packages/next/src/build/load-jsconfig.ts
index 7dac1bab01bb1..c865463f977a5 100644
--- a/packages/next/src/build/load-jsconfig.ts
+++ b/packages/next/src/build/load-jsconfig.ts
@@ -51,7 +51,7 @@ export default async function loadJsConfig(
       },
     ])
     typeScriptPath = deps.resolved.get('typescript')
-  } catch (_) {}
+  } catch {}
   const tsConfigPath = path.join(dir, config.typescript.tsconfigPath)
   const useTypeScript = Boolean(
     typeScriptPath && (await fileExists(tsConfigPath))
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index e7e3d8e3e72d9..c50bbfcce00eb 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -3023,7 +3023,7 @@ export default async function getBaseWebpackConfig(
             if (rule(input)) {
               return true
             }
-          } catch (_) {}
+          } catch {}
           return false
         })
       ) {
diff --git a/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts b/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts
index a14f9da5faacf..d95d0d25c18ee 100644
--- a/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts
+++ b/packages/next/src/client/components/react-dev-overlay/internal/helpers/get-socket-url.ts
@@ -4,7 +4,7 @@ function getSocketProtocol(assetPrefix: string): string {
   try {
     // assetPrefix is a url
     protocol = new URL(assetPrefix).protocol
-  } catch (_) {}
+  } catch {}
 
   return protocol === 'http:' ? 'ws' : 'wss'
 }
diff --git a/packages/next/src/client/dev/error-overlay/websocket.ts b/packages/next/src/client/dev/error-overlay/websocket.ts
index 75c7db451f656..c29adf7299241 100644
--- a/packages/next/src/client/dev/error-overlay/websocket.ts
+++ b/packages/next/src/client/dev/error-overlay/websocket.ts
@@ -8,7 +8,7 @@ function getSocketProtocol(assetPrefix: string): string {
   try {
     // assetPrefix is a url
     protocol = new URL(assetPrefix).protocol
-  } catch (_) {}
+  } catch {}
 
   return protocol === 'http:' ? 'ws' : 'wss'
 }
diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts
index 209855a8a033a..37801f74bb6df 100644
--- a/packages/next/src/export/index.ts
+++ b/packages/next/src/export/index.ts
@@ -269,7 +269,7 @@ export default async function exportApp(
     let prerenderManifest: PrerenderManifest | undefined = undefined
     try {
       prerenderManifest = require(join(distDir, PRERENDER_MANIFEST))
-    } catch (_) {}
+    } catch {}
 
     let appRoutePathManifest: Record<string, string> | undefined = undefined
     try {
@@ -589,7 +589,7 @@ export default async function exportApp(
         )) as MiddlewareManifest
 
         hasMiddleware = Object.keys(middlewareManifest.middleware).length > 0
-      } catch (_) {}
+      } catch {}
 
       // Warn if the user defines a path for an API page
       if (hasApiRoutes || hasMiddleware) {
diff --git a/packages/next/src/lib/create-client-router-filter.ts b/packages/next/src/lib/create-client-router-filter.ts
index 1de02c9802015..dcf0a6a0bd43c 100644
--- a/packages/next/src/lib/create-client-router-filter.ts
+++ b/packages/next/src/lib/create-client-router-filter.ts
@@ -47,7 +47,7 @@ export function createClientRouterFilter(
 
     try {
       tokens = tryToParsePath(source).tokens || []
-    } catch (_) {}
+    } catch {}
 
     if (tokens.every((token) => typeof token === 'string')) {
       // only include static redirects initially
diff --git a/packages/next/src/lib/load-custom-routes.ts b/packages/next/src/lib/load-custom-routes.ts
index 45e07d4afc31c..232fc972759f2 100644
--- a/packages/next/src/lib/load-custom-routes.ts
+++ b/packages/next/src/lib/load-custom-routes.ts
@@ -25,6 +25,11 @@ export type Rewrite = {
   locale?: false
   has?: RouteHas[]
   missing?: RouteHas[]
+
+  /**
+   * @internal - used internally for routing
+   */
+  internal?: boolean
 }
 
 export type Header = {
@@ -34,6 +39,11 @@ export type Header = {
   headers: Array<{ key: string; value: string }>
   has?: RouteHas[]
   missing?: RouteHas[]
+
+  /**
+   * @internal - used internally for routing
+   */
+  internal?: boolean
 }
 
 // internal type used for validation (not user facing)
@@ -44,6 +54,11 @@ export type Redirect = {
   locale?: false
   has?: RouteHas[]
   missing?: RouteHas[]
+
+  /**
+   * @internal - used internally for routing
+   */
+  internal?: boolean
 } & (
   | {
       statusCode?: never
@@ -688,14 +703,14 @@ export default async function loadCustomRoutes(
               key: 'x-nextjs-data',
             },
           ],
-        } as Redirect,
+        },
         {
           source: '/:notfile((?!\\.well-known(?:/.*)?)(?:[^/]+/)*[^/\\.]+)',
           destination: '/:notfile/',
           permanent: true,
           locale: config.i18n ? false : undefined,
           internal: true,
-        } as Redirect
+        }
       )
       if (config.basePath) {
         redirects.unshift({
@@ -705,7 +720,7 @@ export default async function loadCustomRoutes(
           basePath: false,
           locale: config.i18n ? false : undefined,
           internal: true,
-        } as Redirect)
+        })
       }
     } else {
       redirects.unshift({
@@ -714,7 +729,7 @@ export default async function loadCustomRoutes(
         permanent: true,
         locale: config.i18n ? false : undefined,
         internal: true,
-      } as Redirect)
+      })
       if (config.basePath) {
         redirects.unshift({
           source: config.basePath + '/',
@@ -723,7 +738,7 @@ export default async function loadCustomRoutes(
           basePath: false,
           locale: config.i18n ? false : undefined,
           internal: true,
-        } as Redirect)
+        })
       }
     }
   }
diff --git a/packages/next/src/lib/metadata/resolvers/resolve-url.ts b/packages/next/src/lib/metadata/resolvers/resolve-url.ts
index 2681aef4991b5..959ecaf9c41e3 100644
--- a/packages/next/src/lib/metadata/resolvers/resolve-url.ts
+++ b/packages/next/src/lib/metadata/resolvers/resolve-url.ts
@@ -58,7 +58,7 @@ function resolveUrl(
     // If we can construct a URL instance from url, ignore metadataBase
     const parsedUrl = new URL(url)
     return parsedUrl
-  } catch (_) {}
+  } catch {}
 
   if (!metadataBase) {
     metadataBase = createLocalMetadataBase()
diff --git a/packages/next/src/lib/recursive-delete.ts b/packages/next/src/lib/recursive-delete.ts
index 6db6e4ab0c005..78f3ea4948fc7 100644
--- a/packages/next/src/lib/recursive-delete.ts
+++ b/packages/next/src/lib/recursive-delete.ts
@@ -73,7 +73,7 @@ export async function recursiveDelete(
               : join(dirname(absolutePath), linkPath)
           )
           isDirectory = stats.isDirectory()
-        } catch (_) {}
+        } catch {}
       }
 
       const pp = join(previousPath, part.name)
diff --git a/packages/next/src/server/app-render/action-handler.ts b/packages/next/src/server/app-render/action-handler.ts
index eb0822e571fb2..6f184fab120a4 100644
--- a/packages/next/src/server/app-render/action-handler.ts
+++ b/packages/next/src/server/app-render/action-handler.ts
@@ -481,7 +481,7 @@ export async function handleAction({
           const promise = Promise.reject(err)
           try {
             await promise
-          } catch (_) {}
+          } catch {}
           return generateFlight({
             skipFlight: false,
             actionResult: promise,
@@ -497,7 +497,7 @@ export async function handleAction({
         const promise = Promise.reject(err)
         try {
           await promise
-        } catch (_) {}
+        } catch {}
 
         return generateFlight({
           actionResult: promise,
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index c3e23e1bf004c..5baafaa487ae4 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -21,7 +21,11 @@ import type { PagesManifest } from '../build/webpack/plugins/pages-manifest-plug
 import type { OutgoingHttpHeaders } from 'http2'
 import type { BaseNextRequest, BaseNextResponse } from './base-http'
 import type { PayloadOptions } from './send-payload'
-import type { PrerenderManifest } from '../build'
+import type {
+  ManifestRewriteRoute,
+  ManifestRoute,
+  PrerenderManifest,
+} from '../build'
 import type { ClientReferenceManifest } from '../build/webpack/plugins/flight-manifest-plugin'
 import type { NextFontManifest } from '../build/webpack/plugins/next-font-manifest-plugin'
 import type { PagesRouteModule } from './future/route-modules/pages/module'
@@ -129,6 +133,19 @@ export interface MiddlewareRoutingItem {
   matchers?: MiddlewareMatcher[]
 }
 
+/**
+ * The normalized route manifest is the same as the route manifest, but with
+ * the rewrites normalized to the object shape that the router expects.
+ */
+export type NormalizedRouteManifest = {
+  readonly dynamicRoutes: ReadonlyArray<ManifestRoute>
+  readonly rewrites: {
+    readonly beforeFiles: ReadonlyArray<ManifestRewriteRoute>
+    readonly afterFiles: ReadonlyArray<ManifestRewriteRoute>
+    readonly fallback: ReadonlyArray<ManifestRewriteRoute>
+  }
+}
+
 export interface Options {
   /**
    * Object containing the configuration next.config.js
@@ -215,6 +232,9 @@ type ResponsePayload = {
 }
 
 export default abstract class Server<ServerOptions extends Options = Options> {
+  public readonly hostname?: string
+  public readonly fetchHostname?: string
+  public readonly port?: number
   protected readonly dir: string
   protected readonly quiet: boolean
   protected readonly nextConfig: NextConfigComplete
@@ -266,14 +286,11 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     appDirDevErrorLogger?: (err: any) => Promise<void>
     strictNextHead: boolean
   }
-  protected serverOptions: ServerOptions
-  private responseCache: ResponseCacheBase
-  protected appPathRoutes?: Record<string, string[]>
-  protected clientReferenceManifest?: ClientReferenceManifest
+  protected readonly serverOptions: Readonly<ServerOptions>
+  protected readonly appPathRoutes?: Record<string, string[]>
+  protected readonly clientReferenceManifest?: ClientReferenceManifest
   protected nextFontManifest?: NextFontManifest
-  public readonly hostname?: string
-  public readonly fetchHostname?: string
-  public readonly port?: number
+  private readonly responseCache: ResponseCacheBase
 
   protected abstract getPublicDir(): string
   protected abstract getHasStaticDir(): boolean
@@ -287,9 +304,11 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     query: NextParsedUrlQuery
     params: Params
     isAppPath: boolean
+    // The following parameters are used in the development server's
+    // implementation.
     sriEnabled?: boolean
-    appPaths?: string[] | null
-    shouldEnsure: boolean
+    appPaths?: ReadonlyArray<string> | null
+    shouldEnsure?: boolean
   }): Promise<FindComponentsResult | null>
   protected abstract getFontManifest(): FontManifest | undefined
   protected abstract getPrerenderManifest(): PrerenderManifest
@@ -328,9 +347,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     renderOpts: RenderOpts
   ): Promise<RenderResult>
 
-  protected async getPrefetchRsc(_pathname: string): Promise<string | null> {
-    return null
-  }
+  protected abstract getPrefetchRsc(pathname: string): Promise<string | null>
 
   protected abstract getIncrementalCache(options: {
     requestHeaders: Record<string, undefined | string | string[]>
@@ -470,13 +487,13 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     this.appPathRoutes = this.getAppPathRoutes()
 
     // Configure the routes.
-    const { matchers } = this.getRoutes()
-    this.matchers = matchers
+    this.matchers = this.getRouteMatchers()
 
     // Start route compilation. We don't wait for the routes to finish loading
     // because we use the `waitTillReady` promise below in `handleRequest` to
     // wait. Also we can't `await` in the constructor.
-    matchers.reload()
+    void this.matchers.reload()
+
     this.setAssetPrefix(assetPrefix)
     this.responseCache = this.getResponseCache({ dev })
   }
@@ -608,9 +625,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     return { finished: false }
   }
 
-  protected getRoutes(): {
-    matchers: RouteMatcherManager
-  } {
+  protected getRouteMatchers(): RouteMatcherManager {
     // Create a new manifest loader that get's the manifests from the server.
     const manifestLoader = new ServerManifestLoader((name) => {
       switch (name) {
@@ -655,7 +670,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       )
     }
 
-    return { matchers }
+    return matchers
   }
 
   public logError(err: Error): void {
@@ -1120,7 +1135,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
             'http://n'
           )
           protocol = parsedFullUrl.protocol as 'https:' | 'http:'
-        } catch (_) {}
+        } catch {}
 
         const incrementalCache = this.getIncrementalCache({
           requestHeaders: Object.assign({}, req.headers),
@@ -1290,11 +1305,11 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     return this.handleRequest.bind(this)
   }
 
-  protected async handleUpgrade(
-    _req: BaseNextRequest,
-    _socket: any,
-    _head?: any
-  ): Promise<void> {}
+  protected abstract handleUpgrade(
+    req: BaseNextRequest,
+    socket: any,
+    head?: any
+  ): Promise<void>
 
   public setAssetPrefix(prefix?: string): void {
     this.renderOpts.assetPrefix = prefix ? prefix.replace(/\/$/, '') : ''
@@ -1870,7 +1885,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
         'http://n'
       )
       protocol = parsedFullUrl.protocol as 'https:' | 'http:'
-    } catch (_) {}
+    } catch {}
 
     // use existing incrementalCache instance if available
     const incrementalCache =
@@ -2529,27 +2544,9 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     )
   }
 
-  protected getMiddleware(): MiddlewareRoutingItem | undefined {
-    return undefined
-  }
-
-  protected getRoutesManifest():
-    | {
-        dynamicRoutes: {
-          page: string
-          regex: string
-          namedRegex?: string
-          routeKeys?: { [key: string]: string }
-        }
-        rewrites: {
-          beforeFiles: any[]
-          afterFiles: any[]
-          fallback: any[]
-        }
-      }
-    | undefined {
-    return undefined
-  }
+  protected abstract getMiddleware(): MiddlewareRoutingItem | undefined
+  protected abstract getFallbackErrorComponents(): Promise<LoadComponentsReturnType | null>
+  protected abstract getRoutesManifest(): NormalizedRouteManifest | undefined
 
   private async renderToResponseImpl(
     ctx: RequestContext
@@ -2973,11 +2970,6 @@ export default abstract class Server<ServerOptions extends Options = Options> {
     })
   }
 
-  protected async getFallbackErrorComponents(): Promise<LoadComponentsReturnType | null> {
-    // The development server will provide an implementation for this
-    return null
-  }
-
   public async render404(
     req: BaseNextRequest,
     res: BaseNextResponse,
diff --git a/packages/next/src/server/dev/hot-reloader-types.ts b/packages/next/src/server/dev/hot-reloader-types.ts
index 4ad4e3b71ce26..d3058a989fc2c 100644
--- a/packages/next/src/server/dev/hot-reloader-types.ts
+++ b/packages/next/src/server/dev/hot-reloader-types.ts
@@ -37,7 +37,7 @@ export interface NextJsHotReloaderInterface {
   }: {
     page: string
     clientOnly: boolean
-    appPaths?: string[] | null
+    appPaths?: ReadonlyArray<string> | null
     isApp?: boolean
     match?: RouteMatch
   }): Promise<void>
diff --git a/packages/next/src/server/dev/hot-reloader-webpack.ts b/packages/next/src/server/dev/hot-reloader-webpack.ts
index e08cecbfe8fbe..bfec2c3e43ee9 100644
--- a/packages/next/src/server/dev/hot-reloader-webpack.ts
+++ b/packages/next/src/server/dev/hot-reloader-webpack.ts
@@ -1456,7 +1456,7 @@ export default class HotReloader implements NextJsHotReloaderInterface {
   }: {
     page: string
     clientOnly: boolean
-    appPaths?: string[] | null
+    appPaths?: ReadonlyArray<string> | null
     isApp?: boolean
     match?: RouteMatch
   }): Promise<void> {
diff --git a/packages/next/src/server/dev/next-dev-server.ts b/packages/next/src/server/dev/next-dev-server.ts
index 6c75285d77afe..985d283931bdf 100644
--- a/packages/next/src/server/dev/next-dev-server.ts
+++ b/packages/next/src/server/dev/next-dev-server.ts
@@ -1,4 +1,3 @@
-import type { CustomRoutes } from '../../lib/load-custom-routes'
 import type { FindComponentsResult } from '../next-server'
 import type { LoadComponentsReturnType } from '../load-components'
 import type { Options as ServerOptions } from '../next-server'
@@ -10,6 +9,11 @@ import type { BaseNextRequest, BaseNextResponse } from '../base-http'
 import type { FallbackMode, MiddlewareRoutingItem } from '../base-server'
 import type { FunctionComponent } from 'react'
 import type { RouteMatch } from '../future/route-matches/route-match'
+import type { RouteMatcherManager } from '../future/route-matcher-managers/route-matcher-manager'
+import type {
+  NextParsedUrlQuery,
+  NextUrlWithParsedQuery,
+} from '../request-meta'
 
 import { Worker } from 'next/dist/compiled/jest-worker'
 import { join as pathJoin } from 'path'
@@ -59,7 +63,6 @@ import { DefaultFileReader } from '../future/route-matcher-providers/dev/helpers
 import { NextBuildContext } from '../../build/build-context'
 import { IncrementalCache } from '../lib/incremental-cache'
 import LRUCache from 'next/dist/compiled/lru-cache'
-import { NextUrlWithParsedQuery } from '../request-meta'
 import { errorToJSON } from '../render'
 import { getMiddlewareRouteMatcher } from '../../shared/lib/router/utils/middleware-route-matcher'
 import {
@@ -185,7 +188,7 @@ export default class DevServer extends Server {
     this.appDir = appDir
   }
 
-  protected getRoutes() {
+  protected getRouteMatchers(): RouteMatcherManager {
     const { pagesDir, appDir } = findPagesDir(
       this.dir,
       !!this.nextConfig.experimental.appDir
@@ -201,9 +204,8 @@ export default class DevServer extends Server {
       },
     }
 
-    const routes = super.getRoutes()
     const matchers = new DevRouteMatcherManager(
-      routes.matchers,
+      super.getRouteMatchers(),
       ensurer,
       this.dir
     )
@@ -257,7 +259,7 @@ export default class DevServer extends Server {
       )
     }
 
-    return { matchers }
+    return matchers
   }
 
   protected getBuildId(): string {
@@ -507,16 +509,6 @@ export default class DevServer extends Server {
     )
   }
 
-  // override production loading of routes-manifest
-  protected getCustomRoutes(): CustomRoutes {
-    // actual routes will be loaded asynchronously during .prepare()
-    return {
-      redirects: [],
-      rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-      headers: [],
-    }
-  }
-
   protected getPagesManifest(): PagesManifest | undefined {
     return (
       NodeManifestLoader.require(
@@ -745,20 +737,20 @@ export default class DevServer extends Server {
   protected async ensurePage(opts: {
     page: string
     clientOnly: boolean
-    appPaths?: string[] | null
+    appPaths?: ReadonlyArray<string> | null
     match?: RouteMatch
   }): Promise<void> {
-    if (this.isRenderWorker) {
-      await invokeIpcMethod({
-        fetchHostname: this.fetchHostname,
-        method: 'ensurePage',
-        args: [opts],
-        ipcPort: process.env.__NEXT_PRIVATE_ROUTER_IPC_PORT,
-        ipcKey: process.env.__NEXT_PRIVATE_ROUTER_IPC_KEY,
-      })
-      return
+    if (!this.isRenderWorker) {
+      throw new Error('Invariant ensurePage called outside render worker')
     }
-    throw new Error('Invariant ensurePage called outside render worker')
+
+    await invokeIpcMethod({
+      fetchHostname: this.fetchHostname,
+      method: 'ensurePage',
+      args: [opts],
+      ipcPort: process.env.__NEXT_PRIVATE_ROUTER_IPC_PORT,
+      ipcKey: process.env.__NEXT_PRIVATE_ROUTER_IPC_KEY,
+    })
   }
 
   protected async findPageComponents({
@@ -770,10 +762,11 @@ export default class DevServer extends Server {
     shouldEnsure,
   }: {
     pathname: string
-    query: ParsedUrlQuery
+    query: NextParsedUrlQuery
     params: Params
     isAppPath: boolean
-    appPaths?: string[] | null
+    sriEnabled?: boolean
+    appPaths?: ReadonlyArray<string> | null
     shouldEnsure: boolean
   }): Promise<FindComponentsResult | null> {
     await this.devReady
@@ -803,6 +796,7 @@ export default class DevServer extends Server {
         query,
         params,
         isAppPath,
+        shouldEnsure,
       })
     } catch (err) {
       if ((err as any).code !== 'ENOENT') {
diff --git a/packages/next/src/server/dev/on-demand-entry-handler.ts b/packages/next/src/server/dev/on-demand-entry-handler.ts
index c30388e454a0a..d53aeb87e1409 100644
--- a/packages/next/src/server/dev/on-demand-entry-handler.ts
+++ b/packages/next/src/server/dev/on-demand-entry-handler.ts
@@ -34,8 +34,7 @@ import {
   RSC_MODULE_TYPES,
 } from '../../shared/lib/constants'
 import { RouteMatch } from '../future/route-matches/route-match'
-import { RouteKind } from '../future/route-kind'
-import { AppPageRouteMatch } from '../future/route-matches/app-page-route-match'
+import { isAppPageRouteMatch } from '../future/route-matches/app-page-route-match'
 
 const debug = origDebug('next:on-demand-entry-handler')
 
@@ -717,9 +716,8 @@ export function onDemandEntryHandler({
 
     // If the route is actually an app page route, then we should have access
     // to the app route match, and therefore, the appPaths from it.
-    if (match?.definition.kind === RouteKind.APP_PAGE) {
-      const { definition: route } = match as AppPageRouteMatch
-      appPaths = route.appPaths
+    if (!appPaths && match && isAppPageRouteMatch(match)) {
+      appPaths = match.definition.appPaths
     }
 
     try {
@@ -974,7 +972,7 @@ export function onDemandEntryHandler({
               })
             )
           }
-        } catch (_) {}
+        } catch {}
       })
     },
   }
diff --git a/packages/next/src/server/future/route-matchers/app-page-route-matcher.ts b/packages/next/src/server/future/route-matchers/app-page-route-matcher.ts
index 2cbf6725cefa3..fc154acdd608e 100644
--- a/packages/next/src/server/future/route-matchers/app-page-route-matcher.ts
+++ b/packages/next/src/server/future/route-matchers/app-page-route-matcher.ts
@@ -3,6 +3,6 @@ import { AppPageRouteDefinition } from '../route-definitions/app-page-route-defi
 
 export class AppPageRouteMatcher extends RouteMatcher<AppPageRouteDefinition> {
   public get identity(): string {
-    return `${this.definition.pathname}?__nextPage=${this.definition.page}}`
+    return `${this.definition.pathname}?__nextPage=${this.definition.page}`
   }
 }
diff --git a/packages/next/src/server/future/route-matches/app-page-route-match.ts b/packages/next/src/server/future/route-matches/app-page-route-match.ts
index ad9a62f92c4f3..0d644abcab6c8 100644
--- a/packages/next/src/server/future/route-matches/app-page-route-match.ts
+++ b/packages/next/src/server/future/route-matches/app-page-route-match.ts
@@ -4,7 +4,20 @@ import type {
   AppPageRouteDefinition,
 } from '../route-definitions/app-page-route-definition'
 
+import { RouteKind } from '../route-kind'
+
 export interface AppPageRouteMatch extends RouteMatch<AppPageRouteDefinition> {}
 
+/**
+ * Checks if the given match is an App Page route match.
+ * @param match the match to check
+ * @returns true if the match is an App Page route match, false otherwise
+ */
+export function isAppPageRouteMatch(
+  match: RouteMatch
+): match is AppPageRouteMatch {
+  return match.definition.kind === RouteKind.APP_PAGE
+}
+
 export interface AppPageInterceptingRouteMatch
   extends RouteMatch<AppPageInterceptingRouteDefinition> {}
diff --git a/packages/next/src/server/future/route-matches/pages-api-route-match.ts b/packages/next/src/server/future/route-matches/pages-api-route-match.ts
index c52c8f2f3f783..435202354e51c 100644
--- a/packages/next/src/server/future/route-matches/pages-api-route-match.ts
+++ b/packages/next/src/server/future/route-matches/pages-api-route-match.ts
@@ -1,5 +1,18 @@
 import type { RouteMatch } from './route-match'
 import type { PagesAPIRouteDefinition } from '../route-definitions/pages-api-route-definition'
 
+import { RouteKind } from '../route-kind'
+
 export interface PagesAPIRouteMatch
   extends RouteMatch<PagesAPIRouteDefinition> {}
+
+/**
+ * Checks if the given match is a Pages API route match.
+ * @param match the match to check
+ * @returns true if the match is a Pages API route match, false otherwise
+ */
+export function isPagesAPIRouteMatch(
+  match: RouteMatch
+): match is PagesAPIRouteMatch {
+  return match.definition.kind === RouteKind.PAGES_API
+}
diff --git a/packages/next/src/server/lib/incremental-cache/file-system-cache.ts b/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
index 27743e72704da..ab829a20d4110 100644
--- a/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
+++ b/packages/next/src/server/lib/incremental-cache/file-system-cache.ts
@@ -212,7 +212,7 @@ export default class FileSystemCache implements CacheHandler {
                   await this.fs.readFile(filePath.replace(/\.html$/, '.meta'))
                 ).toString('utf-8')
               )
-            } catch (_) {}
+            } catch {}
           }
 
           data = {
diff --git a/packages/next/src/server/lib/router-utils/filesystem.ts b/packages/next/src/server/lib/router-utils/filesystem.ts
index e09af618061d7..18c25496e52c8 100644
--- a/packages/next/src/server/lib/router-utils/filesystem.ts
+++ b/packages/next/src/server/lib/router-utils/filesystem.ts
@@ -1,4 +1,8 @@
-import type { PrerenderManifest, RoutesManifest } from '../../../build'
+import type {
+  ManifestRoute,
+  PrerenderManifest,
+  RoutesManifest,
+} from '../../../build'
 import type { NextConfigComplete } from '../../config-shared'
 import type { MiddlewareManifest } from '../../../build/webpack/plugins/middleware-plugin'
 
@@ -14,7 +18,10 @@ import { FileType, fileExists } from '../../../lib/file-exists'
 import { recursiveReadDir } from '../../../lib/recursive-readdir'
 import { isDynamicRoute } from '../../../shared/lib/router/utils'
 import { escapeStringRegexp } from '../../../shared/lib/escape-regexp'
-import { getPathMatch } from '../../../shared/lib/router/utils/path-match'
+import {
+  PatchMatcher,
+  getPathMatch,
+} from '../../../shared/lib/router/utils/path-match'
 import { getRouteRegex } from '../../../shared/lib/router/utils/route-regex'
 import { getRouteMatcher } from '../../../shared/lib/router/utils/route-matcher'
 import { pathHasPrefix } from '../../../shared/lib/router/utils/path-has-prefix'
@@ -54,12 +61,19 @@ export type FsOutput = {
 
 const debug = setupDebug('next:router-server:filesystem')
 
+export type FilesystemDynamicRoute = ManifestRoute & {
+  /**
+   * The path matcher that can be used to match paths against this route.
+   */
+  match: PatchMatcher
+}
+
 export const buildCustomRoute = <T>(
   type: 'redirect' | 'header' | 'rewrite' | 'before_files_rewrite',
   item: T & { source: string },
   basePath?: string,
   caseSensitive?: boolean
-): T & { match: ReturnType<typeof getPathMatch>; check?: boolean } => {
+): T & { match: PatchMatcher; check?: boolean } => {
   const restrictedRedirectPaths = ['/_next'].map((p) =>
     basePath ? `${basePath}${p}` : p
   )
@@ -91,18 +105,20 @@ export async function setupFsCheck(opts: {
     arg: (files: Map<string, { timestamp: number }>) => void
   ) => void
 }) {
-  const getItemsLru = new LRUCache<string, FsOutput | null>({
-    max: 1024 * 1024,
-    length(value, key) {
-      if (!value) return key?.length || 0
-      return (
-        (key || '').length +
-        (value.fsPath || '').length +
-        value.itemPath.length +
-        value.type.length
-      )
-    },
-  })
+  const getItemsLru = !opts.dev
+    ? new LRUCache<string, FsOutput | null>({
+        max: 1024 * 1024,
+        length(value, key) {
+          if (!value) return key?.length || 0
+          return (
+            (key || '').length +
+            (value.fsPath || '').length +
+            value.itemPath.length +
+            value.type.length
+          )
+        },
+      })
+    : undefined
 
   // routes that have _next/data endpoints (SSG/SSP)
   const nextDataRoutes = new Set<string>()
@@ -112,9 +128,7 @@ export async function setupFsCheck(opts: {
 
   const appFiles = new Set<string>()
   const pageFiles = new Set<string>()
-  let dynamicRoutes: (RoutesManifest['dynamicRoutes'][0] & {
-    match: ReturnType<typeof getPathMatch>
-  })[] = []
+  let dynamicRoutes: FilesystemDynamicRoute[] = []
 
   let middlewareMatcher:
     | ReturnType<typeof getMiddlewareRouteMatcher>
@@ -259,17 +273,20 @@ export async function setupFsCheck(opts: {
     }
 
     customRoutes = {
-      // @ts-expect-error additional fields in manifest type
       redirects: routesManifest.redirects,
-      // @ts-expect-error additional fields in manifest type
-      rewrites: Array.isArray(routesManifest.rewrites)
-        ? {
+      rewrites: routesManifest.rewrites
+        ? Array.isArray(routesManifest.rewrites)
+          ? {
+              beforeFiles: [],
+              afterFiles: routesManifest.rewrites,
+              fallback: [],
+            }
+          : routesManifest.rewrites
+        : {
             beforeFiles: [],
-            afterFiles: routesManifest.rewrites,
+            afterFiles: [],
             fallback: [],
-          }
-        : routesManifest.rewrites,
-      // @ts-expect-error additional fields in manifest type
+          },
       headers: routesManifest.headers,
     }
   } else {
@@ -382,7 +399,7 @@ export async function setupFsCheck(opts: {
     async getItem(itemPath: string): Promise<FsOutput | null> {
       const originalItemPath = itemPath
       const itemKey = originalItemPath
-      const lruResult = getItemsLru.get(itemKey)
+      const lruResult = getItemsLru?.get(itemKey)
 
       if (lruResult) {
         return lruResult
@@ -409,7 +426,7 @@ export async function setupFsCheck(opts: {
 
       try {
         decodedItemPath = decodeURIComponent(itemPath)
-      } catch (_) {}
+      } catch {}
 
       if (itemPath === '/_next/image') {
         return {
@@ -448,7 +465,7 @@ export async function setupFsCheck(opts: {
 
             try {
               curDecodedItemPath = decodeURIComponent(curItemPath)
-            } catch (_) {}
+            } catch {}
           }
         }
 
@@ -460,7 +477,7 @@ export async function setupFsCheck(opts: {
 
           try {
             curDecodedItemPath = decodeURIComponent(curItemPath)
-          } catch (_) {}
+          } catch {}
         }
 
         if (
@@ -496,7 +513,7 @@ export async function setupFsCheck(opts: {
 
           try {
             curDecodedItemPath = decodeURIComponent(curItemPath)
-          } catch (_) {}
+          } catch {}
         }
 
         // check decoded variant as well
@@ -554,7 +571,7 @@ export async function setupFsCheck(opts: {
                   const tempItemPath = decodeURIComponent(curItemPath)
                   fsPath = path.posix.join(itemsRoot, tempItemPath)
                   found = await fileExists(fsPath, FileType.File)
-                } catch (_) {}
+                } catch {}
 
                 if (!found) {
                   continue
@@ -588,16 +605,12 @@ export async function setupFsCheck(opts: {
             itemPath: curItemPath,
           }
 
-          if (!opts.dev) {
-            getItemsLru.set(itemKey, itemResult)
-          }
+          getItemsLru?.set(itemKey, itemResult)
           return itemResult
         }
       }
 
-      if (!opts.dev) {
-        getItemsLru.set(itemKey, null)
-      }
+      getItemsLru?.set(itemKey, null)
       return null
     },
     getDynamicRoutes() {
diff --git a/packages/next/src/server/lib/router-utils/resolve-routes.ts b/packages/next/src/server/lib/router-utils/resolve-routes.ts
index 2e1c1d0bbaaa7..3ae8d5995036d 100644
--- a/packages/next/src/server/lib/router-utils/resolve-routes.ts
+++ b/packages/next/src/server/lib/router-utils/resolve-routes.ts
@@ -3,6 +3,7 @@ import type { FsOutput } from './filesystem'
 import type { IncomingMessage } from 'http'
 import type { NextConfigComplete } from '../../config-shared'
 import type { RenderWorker, initialize } from '../router-server'
+import type { PatchMatcher } from '../../../shared/lib/router/utils/path-match'
 
 import url from 'url'
 import { Redirect } from '../../../../types'
@@ -20,7 +21,6 @@ import { getHostname } from '../../../shared/lib/get-hostname'
 import { UnwrapPromise } from '../../../lib/coalesced-function'
 import { getRedirectStatus } from '../../../lib/redirect-status'
 import { normalizeRepeatedSlashes } from '../../../shared/lib/utils'
-import { getPathMatch } from '../../../shared/lib/router/utils/path-match'
 import { relativizeURL } from '../../../shared/lib/router/utils/relativize-url'
 import { addPathPrefix } from '../../../shared/lib/router/utils/add-path-prefix'
 import { pathHasPrefix } from '../../../shared/lib/router/utils/path-has-prefix'
@@ -54,30 +54,34 @@ export function getResolveRoutes(
   renderWorkerOpts: Parameters<RenderWorker['initialize']>[0],
   ensureMiddleware?: () => Promise<void>
 ) {
-  const routes: ({
-    match: ReturnType<typeof getPathMatch>
+  type Route = {
+    /**
+     * The path matcher to check if this route applies to this request.
+     */
+    match: PatchMatcher
     check?: boolean
     name?: string
-    internal?: boolean
   } & Partial<Header> &
-    Partial<Redirect>)[] = [
+    Partial<Redirect>
+
+  const routes: Route[] = [
     // _next/data with middleware handling
-    { match: () => ({} as any), name: 'middleware_next_data' },
+    { match: () => ({}), name: 'middleware_next_data' },
 
     ...(opts.minimalMode ? [] : fsChecker.headers),
     ...(opts.minimalMode ? [] : fsChecker.redirects),
 
     // check middleware (using matchers)
-    { match: () => ({} as any), name: 'middleware' },
+    { match: () => ({}), name: 'middleware' },
 
     ...(opts.minimalMode ? [] : fsChecker.rewrites.beforeFiles),
 
     // check middleware (using matchers)
-    { match: () => ({} as any), name: 'before_files_end' },
+    { match: () => ({}), name: 'before_files_end' },
 
     // we check exact matches on fs before continuing to
     // after files rewrites
-    { match: () => ({} as any), name: 'check_fs' },
+    { match: () => ({}), name: 'check_fs' },
 
     ...(opts.minimalMode ? [] : fsChecker.rewrites.afterFiles),
 
@@ -85,7 +89,7 @@ export function getResolveRoutes(
     // fallback rewrites
     {
       check: true,
-      match: () => ({} as any),
+      match: () => ({}),
       name: 'after files check: true',
     },
 
diff --git a/packages/next/src/server/lib/router-utils/setup-dev.ts b/packages/next/src/server/lib/router-utils/setup-dev.ts
index b1b5cb416e764..d6fa63cd6c7c6 100644
--- a/packages/next/src/server/lib/router-utils/setup-dev.ts
+++ b/packages/next/src/server/lib/router-utils/setup-dev.ts
@@ -14,7 +14,7 @@ import Watchpack from 'watchpack'
 import { loadEnvConfig } from '@next/env'
 import isError from '../../../lib/is-error'
 import findUp from 'next/dist/compiled/find-up'
-import { buildCustomRoute } from './filesystem'
+import { FilesystemDynamicRoute, buildCustomRoute } from './filesystem'
 import * as Log from '../../../build/output/log'
 import HotReloader, {
   matchNextPageBundleRequest,
@@ -1353,17 +1353,16 @@ async function startWatcher(opts: SetupOpts) {
         // before it has been built and is populated in the _buildManifest
         const sortedRoutes = getSortedRoutes(routedPages)
 
-        opts.fsChecker.dynamicRoutes = sortedRoutes
-          .map((page) => {
+        opts.fsChecker.dynamicRoutes = sortedRoutes.map(
+          (page): FilesystemDynamicRoute => {
             const regex = getRouteRegex(page)
             return {
+              regex: regex.re.toString(),
               match: getRouteMatcher(regex),
               page,
-              re: regex.re,
-              groups: regex.groups,
             }
-          })
-          .filter(Boolean) as any
+          }
+        )
 
         const dataRoutes: typeof opts.fsChecker.dynamicRoutes = []
 
diff --git a/packages/next/src/server/load-components.ts b/packages/next/src/server/load-components.ts
index 45f190c589cca..d2b563493ebe6 100644
--- a/packages/next/src/server/load-components.ts
+++ b/packages/next/src/server/load-components.ts
@@ -179,7 +179,8 @@ async function loadComponentsImpl({
   const Document = interopDefault(DocumentMod)
   const App = interopDefault(AppMod)
 
-  const { getServerSideProps, getStaticProps, getStaticPaths } = ComponentMod
+  const { getServerSideProps, getStaticProps, getStaticPaths, routeModule } =
+    ComponentMod
 
   return {
     App,
@@ -196,7 +197,7 @@ async function loadComponentsImpl({
     serverActionsManifest,
     isAppPath,
     pathname,
-    routeModule: ComponentMod.routeModule,
+    routeModule,
   }
 }
 
diff --git a/packages/next/src/server/next-server.ts b/packages/next/src/server/next-server.ts
index 61442178b9acb..9bbfef0786a06 100644
--- a/packages/next/src/server/next-server.ts
+++ b/packages/next/src/server/next-server.ts
@@ -15,7 +15,7 @@ import {
 import type { MiddlewareManifest } from '../build/webpack/plugins/middleware-plugin'
 import type RenderResult from './render-result'
 import type { FetchEventResult } from './web/types'
-import type { PrerenderManifest } from '../build'
+import type { PrerenderManifest, RoutesManifest } from '../build'
 import { BaseNextRequest, BaseNextResponse } from './base-http'
 import type { PagesManifest } from '../build/webpack/plugins/pages-manifest-plugin'
 import type { PayloadOptions } from './send-payload'
@@ -60,11 +60,12 @@ import BaseServer, {
   MiddlewareRoutingItem,
   NoFallbackError,
   RequestContext,
+  NormalizedRouteManifest,
 } from './base-server'
 import { getMaybePagePath, getPagePath, requireFontManifest } from './require'
 import { denormalizePagePath } from '../shared/lib/page-path/denormalize-page-path'
 import { normalizePagePath } from '../shared/lib/page-path/normalize-page-path'
-import { loadComponents } from './load-components'
+import { LoadComponentsReturnType, loadComponents } from './load-components'
 import isError, { getProperError } from '../lib/is-error'
 import { FontManifest } from './font-utils'
 import { splitCookiesString, toNodeOutgoingHttpHeaders } from './web/utils'
@@ -80,9 +81,11 @@ import { IncrementalCache } from './lib/incremental-cache'
 import { normalizeAppPath } from '../shared/lib/router/utils/app-paths'
 
 import { setHttpClientAndAgentOptions } from './setup-http-agent-env'
-import { RouteKind } from './future/route-kind'
 
-import { PagesAPIRouteMatch } from './future/route-matches/pages-api-route-match'
+import {
+  PagesAPIRouteMatch,
+  isPagesAPIRouteMatch,
+} from './future/route-matches/pages-api-route-match'
 import { MatchOptions } from './future/route-matcher-managers/route-matcher-manager'
 import { INSTRUMENTATION_HOOK_FILENAME } from '../lib/constants'
 import { getTracer } from './lib/trace/tracer'
@@ -197,24 +200,18 @@ export default class NextNodeServer extends BaseServer {
     }
 
     if (!options.dev) {
-      const routesManifest = this.getRoutesManifest() as {
-        dynamicRoutes: {
-          page: string
-          regex: string
-          namedRegex?: string
-          routeKeys?: { [key: string]: string }
-        }[]
-      }
-      this.dynamicRoutes = routesManifest.dynamicRoutes.map((r) => {
+      const { dynamicRoutes = [] } = this.getRoutesManifest() ?? {}
+      this.dynamicRoutes = dynamicRoutes.map((r) => {
+        // TODO: can we just re-use the regex from the manifest?
         const regex = getRouteRegex(r.page)
         const match = getRouteMatcher(regex)
 
         return {
           match,
           page: r.page,
-          regex: regex.re,
+          re: regex.re,
         }
-      }) as any
+      })
     }
 
     // ensure options are set when loadConfig isn't called
@@ -227,6 +224,11 @@ export default class NextNodeServer extends BaseServer {
     }
   }
 
+  protected async handleUpgrade(): Promise<void> {
+    // The web server does not support web sockets, it's only used for HMR in
+    // development.
+  }
+
   protected async prepareImpl() {
     await super.prepareImpl()
     if (
@@ -590,24 +592,29 @@ export default class NextNodeServer extends BaseServer {
   }: {
     pathname: string
     query: NextParsedUrlQuery
-    params: Params | null
+    params: Params
     isAppPath: boolean
+    // The following parameters are used in the development server's
+    // implementation.
+    sriEnabled?: boolean
+    appPaths?: ReadonlyArray<string> | null
+    shouldEnsure: boolean
   }): Promise<FindComponentsResult | null> {
-    let route = pathname
-    if (isAppPath) {
-      // When in App we get page instead of route
-      route = pathname.replace(/\/[^/]*$/, '')
-    }
-
     return getTracer().trace(
       NextNodeServerSpan.findPageComponents,
       {
         spanName: `resolving page into components`,
         attributes: {
-          'next.route': route,
+          'next.route': isAppPath ? normalizeAppPath(pathname) : pathname,
         },
       },
-      () => this.findPageComponentsImpl({ pathname, query, params, isAppPath })
+      () =>
+        this.findPageComponentsImpl({
+          pathname,
+          query,
+          params,
+          isAppPath,
+        })
     )
   }
 
@@ -619,7 +626,7 @@ export default class NextNodeServer extends BaseServer {
   }: {
     pathname: string
     query: NextParsedUrlQuery
-    params: Params | null
+    params: Params
     isAppPath: boolean
   }): Promise<FindComponentsResult | null> {
     const paths: string[] = [pathname]
@@ -809,12 +816,13 @@ export default class NextNodeServer extends BaseServer {
     parsedUrl: NextUrlWithParsedQuery
   ) {
     let { pathname, query } = parsedUrl
-
     if (!pathname) {
-      throw new Error('pathname is undefined')
+      throw new Error('Invariant: pathname is undefined')
     }
+
+    // This is a catch-all route, there should be no fallbacks so mark it as
+    // such.
     query._nextBubbleNoFallback = '1'
-    const bubbleNoFallback = true
 
     try {
       // next.js core assumes page path without trailing slash
@@ -825,63 +833,57 @@ export default class NextNodeServer extends BaseServer {
       }
       const match = await this.matchers.match(pathname, options)
 
-      // Try to handle the given route with the configured handlers.
-      if (match) {
-        // Add the match to the request so we don't have to re-run the matcher
-        // for the same request.
-        addRequestMeta(req, '_nextMatch', match)
-
-        // TODO-APP: move this to a route handler
-        const edgeFunctionsPages = this.getEdgeFunctionsPages()
-        for (const edgeFunctionsPage of edgeFunctionsPages) {
-          if (edgeFunctionsPage === match.definition.page) {
-            if (this.nextConfig.output === 'export') {
-              await this.render404(req, res, parsedUrl)
-              return { finished: true }
-            }
-            delete query._nextBubbleNoFallback
-            delete query[NEXT_RSC_UNION_QUERY]
-
-            const handledAsEdgeFunction = await this.runEdgeFunction({
-              req,
-              res,
-              query,
-              params: match.params,
-              page: match.definition.page,
-              match,
-              appPaths: null,
-            })
-
-            if (handledAsEdgeFunction) {
-              return { finished: true }
-            }
-          }
+      // If we don't have a match, try to render it anyways.
+      if (!match) {
+        await this.render(req, res, pathname, query, parsedUrl, true)
+
+        return { finished: true }
+      }
+
+      // Add the match to the request so we don't have to re-run the matcher
+      // for the same request.
+      addRequestMeta(req, '_nextMatch', match)
+
+      // TODO-APP: move this to a route handler
+      const edgeFunctionsPages = this.getEdgeFunctionsPages()
+      for (const edgeFunctionsPage of edgeFunctionsPages) {
+        // If the page doesn't match the edge function page, skip it.
+        if (edgeFunctionsPage !== match.definition.page) continue
+
+        if (this.nextConfig.output === 'export') {
+          await this.render404(req, res, parsedUrl)
+          return { finished: true }
         }
-        let handled = false
-
-        // If the route was detected as being a Pages API route, then handle
-        // it.
-        // TODO: move this behavior into a route handler.
-        if (match.definition.kind === RouteKind.PAGES_API) {
-          if (this.nextConfig.output === 'export') {
-            await this.render404(req, res, parsedUrl)
-            return { finished: true }
-          }
-          delete query._nextBubbleNoFallback
-
-          handled = await this.handleApiRequest(
-            req,
-            res,
-            query,
-            // TODO: see if we can add a runtime check for this
-            match as PagesAPIRouteMatch
-          )
-          if (handled) return { finished: true }
+        delete query._nextBubbleNoFallback
+        delete query[NEXT_RSC_UNION_QUERY]
+
+        const handled = await this.runEdgeFunction({
+          req,
+          res,
+          query,
+          params: match.params,
+          page: match.definition.page,
+          match,
+          appPaths: null,
+        })
+
+        // If we handled the request, we can return early.
+        if (handled) return { finished: true }
+      }
+
+      // If the route was detected as being a Pages API route, then handle
+      // it.
+      // TODO: move this behavior into a route handler.
+      if (isPagesAPIRouteMatch(match)) {
+        if (this.nextConfig.output === 'export') {
+          await this.render404(req, res, parsedUrl)
+          return { finished: true }
         }
-        // else if (match.definition.kind === RouteKind.METADATA_ROUTE) {
-        //   handled = await this.handlers.handle(match, req, res)
-        //   if (handled) return { finished: true }
-        // }
+
+        delete query._nextBubbleNoFallback
+
+        const handled = await this.handleApiRequest(req, res, query, match)
+        if (handled) return { finished: true }
       }
 
       await this.render(req, res, pathname, query, parsedUrl, true)
@@ -890,7 +892,7 @@ export default class NextNodeServer extends BaseServer {
         finished: true,
       }
     } catch (err: any) {
-      if (err instanceof NoFallbackError && bubbleNoFallback) {
+      if (err instanceof NoFallbackError) {
         if (this.isRenderWorker) {
           res.setHeader('x-no-fallback', '1')
           res.send()
@@ -925,19 +927,25 @@ export default class NextNodeServer extends BaseServer {
   }
 
   // Used in development only, overloaded in next-dev-server
-  protected async logErrorWithOriginalStack(..._args: any[]): Promise<void> {
+  protected async logErrorWithOriginalStack(
+    _err?: unknown,
+    _type?: 'unhandledRejection' | 'uncaughtException' | 'warning' | 'app-dir'
+  ): Promise<void> {
     throw new Error(
-      'logErrorWithOriginalStack can only be called on the development server'
+      'Invariant: logErrorWithOriginalStack can only be called on the development server'
     )
   }
+
   // Used in development only, overloaded in next-dev-server
   protected async ensurePage(_opts: {
     page: string
     clientOnly: boolean
-    appPaths?: string[] | null
+    appPaths?: ReadonlyArray<string> | null
     match?: RouteMatch
   }): Promise<void> {
-    throw new Error('ensurePage can only be called on the development server')
+    throw new Error(
+      'Invariant: ensurePage can only be called on the development server'
+    )
   }
 
   /**
@@ -1641,18 +1649,28 @@ export default class NextNodeServer extends BaseServer {
     return (this._cachedPreviewManifest = manifest)
   }
 
-  protected getRoutesManifest() {
+  protected getRoutesManifest(): NormalizedRouteManifest | undefined {
     return getTracer().trace(NextNodeServerSpan.getRoutesManifest, () => {
-      const manifest = require(join(this.distDir, ROUTES_MANIFEST))
+      const manifest: RoutesManifest = require(join(
+        this.distDir,
+        ROUTES_MANIFEST
+      ))
+
+      let rewrites = manifest.rewrites ?? {
+        beforeFiles: [],
+        afterFiles: [],
+        fallback: [],
+      }
 
-      if (Array.isArray(manifest.rewrites)) {
-        manifest.rewrites = {
+      if (Array.isArray(rewrites)) {
+        rewrites = {
           beforeFiles: [],
-          afterFiles: manifest.rewrites,
+          afterFiles: rewrites,
           fallback: [],
         }
       }
-      return manifest
+
+      return { ...manifest, rewrites }
     })
   }
 
@@ -1796,4 +1814,10 @@ export default class NextNodeServer extends BaseServer {
   protected get serverDistDir() {
     return join(this.distDir, SERVER_DIRECTORY)
   }
+
+  protected async getFallbackErrorComponents(): Promise<LoadComponentsReturnType | null> {
+    // Not implemented for production use cases, this is implemented on the
+    // development server.
+    return null
+  }
 }
diff --git a/packages/next/src/server/require.ts b/packages/next/src/server/require.ts
index 393fc5bfef621..bbc8e91dc2835 100644
--- a/packages/next/src/server/require.ts
+++ b/packages/next/src/server/require.ts
@@ -1,4 +1,4 @@
-import { join } from 'path'
+import path from 'path'
 import {
   FONT_MANIFEST,
   PAGES_MANIFEST,
@@ -15,17 +15,11 @@ import { loadManifest } from './load-manifest'
 import { promises } from 'fs'
 
 const isDev = process.env.NODE_ENV === 'development'
-const pagePathCache = isDev
-  ? {
-      get: (_key: string) => {
-        return null
-      },
-      set: () => {},
-      has: () => false,
-    }
-  : new LRUCache<string, string | null>({
+const pagePathCache = !isDev
+  ? new LRUCache<string, string | null>({
       max: 1000,
     })
+  : null
 
 export function getMaybePagePath(
   page: string,
@@ -35,21 +29,22 @@ export function getMaybePagePath(
 ): string | null {
   const cacheKey = `${page}:${distDir}:${locales}:${isAppPath}`
 
-  if (pagePathCache.has(cacheKey)) {
-    return pagePathCache.get(cacheKey) as string | null
-  }
+  let pagePath = pagePathCache?.get(cacheKey)
 
-  const serverBuildPath = join(distDir, SERVER_DIRECTORY)
+  // If we have a cached path, we can return it directly.
+  if (pagePath) return pagePath
+
+  const serverBuildPath = path.join(distDir, SERVER_DIRECTORY)
   let appPathsManifest: undefined | PagesManifest
 
   if (isAppPath) {
     appPathsManifest = loadManifest(
-      join(serverBuildPath, APP_PATHS_MANIFEST),
+      path.join(serverBuildPath, APP_PATHS_MANIFEST),
       !isDev
     )
   }
   const pagesManifest = loadManifest(
-    join(serverBuildPath, PAGES_MANIFEST),
+    path.join(serverBuildPath, PAGES_MANIFEST),
     !isDev
   ) as PagesManifest
 
@@ -74,7 +69,6 @@ export function getMaybePagePath(
     }
     return curPath
   }
-  let pagePath: string | undefined
 
   if (appPathsManifest) {
     pagePath = checkManifest(appPathsManifest)
@@ -85,14 +79,14 @@ export function getMaybePagePath(
   }
 
   if (!pagePath) {
-    pagePathCache.set(cacheKey, null)
+    pagePathCache?.set(cacheKey, null)
     return null
   }
 
-  const path = join(serverBuildPath, pagePath)
-  pagePathCache.set(cacheKey, path)
+  pagePath = path.join(serverBuildPath, pagePath)
 
-  return path
+  pagePathCache?.set(cacheKey, pagePath)
+  return pagePath
 }
 
 export function getPagePath(
@@ -129,7 +123,7 @@ export function requirePage(
 }
 
 export function requireFontManifest(distDir: string) {
-  const serverBuildPath = join(distDir, SERVER_DIRECTORY)
-  const fontManifest = loadManifest(join(serverBuildPath, FONT_MANIFEST))
+  const serverBuildPath = path.join(distDir, SERVER_DIRECTORY)
+  const fontManifest = loadManifest(path.join(serverBuildPath, FONT_MANIFEST))
   return fontManifest
 }
diff --git a/packages/next/src/server/server-utils.ts b/packages/next/src/server/server-utils.ts
index 336b5d6aaaec1..4bfb79cfb62d3 100644
--- a/packages/next/src/server/server-utils.ts
+++ b/packages/next/src/server/server-utils.ts
@@ -1,4 +1,4 @@
-import type { IncomingMessage, ServerResponse } from 'http'
+import type { IncomingMessage } from 'http'
 import type { Rewrite } from '../lib/load-custom-routes'
 import type { RouteMatchFn } from '../shared/lib/router/utils/route-matcher'
 import type { NextConfig } from './config'
@@ -14,13 +14,6 @@ import {
   matchHas,
   prepareDestination,
 } from '../shared/lib/router/utils/prepare-destination'
-import { acceptLanguage } from './accept-header'
-import { detectLocaleCookie } from '../shared/lib/i18n/detect-locale-cookie'
-import { detectDomainLocale } from '../shared/lib/i18n/detect-domain-locale'
-import { denormalizePagePath } from '../shared/lib/page-path/denormalize-page-path'
-import cookie from 'next/dist/compiled/cookie'
-import { TEMPORARY_REDIRECT_STATUS } from '../shared/lib/constants'
-import { addRequestMeta } from './request-meta'
 import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 import { normalizeRscPath } from '../shared/lib/router/utils/app-paths'
 import { NEXT_QUERY_PARAM_PREFIX } from '../lib/constants'
@@ -103,9 +96,9 @@ export function getUtils({
   i18n?: NextConfig['i18n']
   basePath: string
   rewrites: {
-    fallback?: Rewrite[]
-    afterFiles?: Rewrite[]
-    beforeFiles?: Rewrite[]
+    fallback?: ReadonlyArray<Rewrite>
+    afterFiles?: ReadonlyArray<Rewrite>
+    beforeFiles?: ReadonlyArray<Rewrite>
   }
   pageIsDynamic: boolean
   trailingSlash?: boolean
@@ -426,152 +419,7 @@ export function getUtils({
     }
   }
 
-  function handleLocale(
-    req: IncomingMessage,
-    res: ServerResponse,
-    parsedUrl: UrlWithParsedQuery,
-    routeNoAssetPath: string,
-    shouldNotRedirect: boolean
-  ) {
-    if (!i18n) return
-    const pathname = parsedUrl.pathname || '/'
-
-    let defaultLocale = i18n.defaultLocale
-    let detectedLocale = detectLocaleCookie(req, i18n.locales)
-    let acceptPreferredLocale
-    try {
-      acceptPreferredLocale =
-        i18n.localeDetection !== false
-          ? acceptLanguage(req.headers['accept-language'], i18n.locales)
-          : detectedLocale
-    } catch (_) {
-      acceptPreferredLocale = detectedLocale
-    }
-
-    const { host } = req.headers || {}
-    // remove port from host and remove port if present
-    const hostname = host && host.split(':')[0].toLowerCase()
-
-    const detectedDomain = detectDomainLocale(i18n.domains, hostname)
-    if (detectedDomain) {
-      defaultLocale = detectedDomain.defaultLocale
-      detectedLocale = defaultLocale
-      addRequestMeta(req as any, '__nextIsLocaleDomain', true)
-    }
-
-    // if not domain specific locale use accept-language preferred
-    detectedLocale = detectedLocale || acceptPreferredLocale
-
-    let localeDomainRedirect
-    const localePathResult = normalizeLocalePath(pathname, i18n.locales)
-
-    routeNoAssetPath = normalizeLocalePath(
-      routeNoAssetPath,
-      i18n.locales
-    ).pathname
-
-    if (localePathResult.detectedLocale) {
-      detectedLocale = localePathResult.detectedLocale
-      req.url = formatUrl({
-        ...parsedUrl,
-        pathname: localePathResult.pathname,
-      })
-      addRequestMeta(req as any, '__nextStrippedLocale', true)
-      parsedUrl.pathname = localePathResult.pathname
-    }
-
-    // If a detected locale is a domain specific locale and we aren't already
-    // on that domain and path prefix redirect to it to prevent duplicate
-    // content from multiple domains
-    if (detectedDomain) {
-      const localeToCheck = localePathResult.detectedLocale
-        ? detectedLocale
-        : acceptPreferredLocale
-
-      const matchedDomain = detectDomainLocale(
-        i18n.domains,
-        undefined,
-        localeToCheck
-      )
-
-      if (matchedDomain && matchedDomain.domain !== detectedDomain.domain) {
-        localeDomainRedirect = `http${matchedDomain.http ? '' : 's'}://${
-          matchedDomain.domain
-        }/${localeToCheck === matchedDomain.defaultLocale ? '' : localeToCheck}`
-      }
-    }
-
-    const denormalizedPagePath = denormalizePagePath(pathname)
-    const detectedDefaultLocale =
-      !detectedLocale ||
-      detectedLocale.toLowerCase() === defaultLocale.toLowerCase()
-    const shouldStripDefaultLocale = false
-    // detectedDefaultLocale &&
-    // denormalizedPagePath.toLowerCase() === \`/\${i18n.defaultLocale.toLowerCase()}\`
-
-    const shouldAddLocalePrefix =
-      !detectedDefaultLocale && denormalizedPagePath === '/'
-
-    detectedLocale = detectedLocale || i18n.defaultLocale
-
-    if (
-      !shouldNotRedirect &&
-      !req.headers['x-vercel-id'] &&
-      i18n.localeDetection !== false &&
-      (localeDomainRedirect ||
-        shouldAddLocalePrefix ||
-        shouldStripDefaultLocale)
-    ) {
-      // set the NEXT_LOCALE cookie when a user visits the default locale
-      // with the locale prefix so that they aren't redirected back to
-      // their accept-language preferred locale
-      if (shouldStripDefaultLocale && acceptPreferredLocale !== defaultLocale) {
-        const previous = res.getHeader('set-cookie')
-
-        res.setHeader('set-cookie', [
-          ...(typeof previous === 'string'
-            ? [previous]
-            : Array.isArray(previous)
-            ? previous
-            : []),
-          cookie.serialize('NEXT_LOCALE', defaultLocale, {
-            httpOnly: true,
-            path: '/',
-          }),
-        ])
-      }
-
-      res.setHeader(
-        'Location',
-        formatUrl({
-          // make sure to include any query values when redirecting
-          ...parsedUrl,
-          pathname: localeDomainRedirect
-            ? localeDomainRedirect
-            : shouldStripDefaultLocale
-            ? basePath || '/'
-            : `${basePath}/${detectedLocale}`,
-        })
-      )
-      res.statusCode = TEMPORARY_REDIRECT_STATUS
-      res.end()
-      return
-    }
-
-    detectedLocale =
-      localePathResult.detectedLocale ||
-      (detectedDomain && detectedDomain.defaultLocale) ||
-      defaultLocale
-
-    return {
-      defaultLocale,
-      detectedLocale,
-      routeNoAssetPath,
-    }
-  }
-
   return {
-    handleLocale,
     handleRewrites,
     handleBasePath,
     defaultRouteRegex,
diff --git a/packages/next/src/server/web-server.ts b/packages/next/src/server/web-server.ts
index 4226e211303a2..b347467d9ed43 100644
--- a/packages/next/src/server/web-server.ts
+++ b/packages/next/src/server/web-server.ts
@@ -6,10 +6,14 @@ import type { Params } from '../shared/lib/router/utils/route-matcher'
 import type { PayloadOptions } from './send-payload'
 import type { LoadComponentsReturnType } from './load-components'
 import type { BaseNextRequest, BaseNextResponse } from './base-http'
-import type { UrlWithParsedQuery } from 'url'
 
 import { byteLength } from './api-utils/web'
-import BaseServer, { NoFallbackError, Options } from './base-server'
+import BaseServer, {
+  MiddlewareRoutingItem,
+  NoFallbackError,
+  NormalizedRouteManifest,
+  Options,
+} from './base-server'
 import { generateETag } from './lib/etag'
 import { addRequestMeta } from './request-meta'
 import WebResponseCache from './response-cache/web'
@@ -47,10 +51,6 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
     Object.assign(this.renderOpts, options.webServerConfig.extendRenderOpts)
   }
 
-  protected handleCompression() {
-    // For the web server layer, compression is automatically handled by the
-    // upstream proxy (edge runtime or node server) and we can simply skip here.
-  }
   protected getIncrementalCache({
     requestHeaders,
   }: {
@@ -80,50 +80,19 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
   protected getResponseCache() {
     return new WebResponseCache(this.minimalMode)
   }
-  protected getCustomRoutes() {
-    return {
-      headers: [],
-      rewrites: {
-        fallback: [],
-        afterFiles: [],
-        beforeFiles: [],
-      },
-      redirects: [],
-    }
-  }
-  protected async run(
-    req: BaseNextRequest,
-    res: BaseNextResponse,
-    parsedUrl: UrlWithParsedQuery
-  ): Promise<void> {
-    super.run(req, res, parsedUrl)
-  }
+
   protected async hasPage(page: string) {
     return page === this.serverOptions.webServerConfig.page
   }
-  protected getPublicDir() {
-    // Public files are not handled by the web server.
-    return ''
-  }
+
   protected getBuildId() {
     return this.serverOptions.webServerConfig.extendRenderOpts.buildId
   }
-  protected loadEnvConfig() {
-    // The web server does not need to load the env config. This is done by the
-    // runtime already.
-  }
+
   protected getHasAppDir() {
     return this.serverOptions.webServerConfig.pagesType === 'app'
   }
-  protected getHasStaticDir() {
-    return false
-  }
-  protected async getFallback() {
-    return ''
-  }
-  protected getFontManifest() {
-    return undefined
-  }
+
   protected getPagesManifest() {
     return {
       // keep same theme but server path doesn't need to be accurate
@@ -131,21 +100,21 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
         .normalizedPage]: `server${this.serverOptions.webServerConfig.page}.js`,
     }
   }
+
   protected getAppPathsManifest() {
     const page = this.serverOptions.webServerConfig.page
     return {
       [this.serverOptions.webServerConfig.page]: `app${page}.js`,
     }
   }
-  protected getFilesystemPaths() {
-    return new Set<string>()
-  }
+
   protected attachRequestMeta(
     req: WebNextRequest,
     parsedUrl: NextUrlWithParsedQuery
   ) {
     addRequestMeta(req, '__NEXT_INIT_QUERY', { ...parsedUrl.query })
   }
+
   protected getPrerenderManifest() {
     const { prerenderManifest } = this.serverOptions.webServerConfig
     if (this.renderOpts?.dev || !prerenderManifest) {
@@ -228,11 +197,6 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
     }
   }
 
-  // Edge API requests are handled separately in minimal mode.
-  protected async handleApiRequest() {
-    return false
-  }
-
   protected renderHTML(
     req: WebNextRequest,
     res: WebNextResponse,
@@ -328,10 +292,6 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
 
     res.send()
   }
-  protected async runApi() {
-    // @TODO
-    return true
-  }
 
   protected async findPageComponents({
     pathname,
@@ -356,4 +316,73 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
       components: result,
     }
   }
+
+  // Below are methods that are not implemented by the web server as they are
+  // handled by the upstream proxy (edge runtime or node server).
+
+  protected async runApi() {
+    // This web server does not need to handle API requests.
+    return true
+  }
+
+  protected async handleApiRequest() {
+    // Edge API requests are handled separately in minimal mode.
+    return false
+  }
+
+  protected loadEnvConfig() {
+    // The web server does not need to load the env config. This is done by the
+    // runtime already.
+  }
+
+  protected getPublicDir() {
+    // Public files are not handled by the web server.
+    return ''
+  }
+
+  protected getHasStaticDir() {
+    return false
+  }
+
+  protected async getFallback() {
+    return ''
+  }
+
+  protected getFontManifest() {
+    return undefined
+  }
+
+  protected handleCompression() {
+    // For the web server layer, compression is automatically handled by the
+    // upstream proxy (edge runtime or node server) and we can simply skip here.
+  }
+
+  protected async handleUpgrade(): Promise<void> {
+    // The web server does not support web sockets.
+  }
+
+  protected async getFallbackErrorComponents(): Promise<LoadComponentsReturnType | null> {
+    // The web server does not need to handle fallback errors in production.
+    return null
+  }
+
+  protected getRoutesManifest(): NormalizedRouteManifest | undefined {
+    // The web server does not need to handle rewrite rules. This is done by the
+    // upstream proxy (edge runtime or node server).
+    return undefined
+  }
+
+  protected getMiddleware(): MiddlewareRoutingItem | undefined {
+    // The web server does not need to handle middleware. This is done by the
+    // upstream proxy (edge runtime or node server).
+    return undefined
+  }
+
+  protected getFilesystemPaths() {
+    return new Set<string>()
+  }
+
+  protected async getPrefetchRsc(): Promise<string | null> {
+    return null
+  }
 }
diff --git a/packages/next/src/shared/lib/router/utils/path-match.ts b/packages/next/src/shared/lib/router/utils/path-match.ts
index fd0e6cb245c9a..e011897d22f89 100644
--- a/packages/next/src/shared/lib/router/utils/path-match.ts
+++ b/packages/next/src/shared/lib/router/utils/path-match.ts
@@ -25,12 +25,17 @@ interface Options {
   sensitive?: boolean
 }
 
+export type PatchMatcher = (
+  pathname?: string | null,
+  params?: Record<string, any>
+) => Record<string, any> | false
+
 /**
  * Generates a path matcher function for a given path and options based on
  * path-to-regexp. By default the match will be case insensitive, non strict
  * and delimited by `/`.
  */
-export function getPathMatch(path: string, options?: Options) {
+export function getPathMatch(path: string, options?: Options): PatchMatcher {
   const keys: Key[] = []
   const regexp = pathToRegexp(path, keys, {
     delimiter: '/',
@@ -39,7 +44,7 @@ export function getPathMatch(path: string, options?: Options) {
     strict: options?.strict,
   })
 
-  const matcher = regexpToFunction(
+  const matcher = regexpToFunction<Record<string, any>>(
     options?.regexModifier
       ? new RegExp(options.regexModifier(regexp.source), regexp.flags)
       : regexp,
@@ -52,14 +57,14 @@ export function getPathMatch(path: string, options?: Options) {
    * `false` but if it does it will return an object with the matched params
    * merged with the params provided in the second argument.
    */
-  return (
-    pathname?: string | null,
-    params?: any
-  ): false | { [key: string]: any } => {
-    const res = pathname == null ? false : matcher(pathname)
-    if (!res) {
-      return false
-    }
+  return (pathname, params) => {
+    // If no pathname is provided it's not a match.
+    if (typeof pathname !== 'string') return false
+
+    const match = matcher(pathname)
+
+    // If the path did not match `false` will be returned.
+    if (!match) return false
 
     /**
      * If unnamed params are not allowed they must be removed from
@@ -69,11 +74,11 @@ export function getPathMatch(path: string, options?: Options) {
     if (options?.removeUnnamedParams) {
       for (const key of keys) {
         if (typeof key.name === 'number') {
-          delete (res.params as any)[key.name]
+          delete match.params[key.name]
         }
       }
     }
 
-    return { ...params, ...res.params }
+    return { ...params, ...match.params }
   }
 }
diff --git a/packages/next/src/telemetry/events/swc-load-failure.ts b/packages/next/src/telemetry/events/swc-load-failure.ts
index cf23580b45212..2101d9fbb8216 100644
--- a/packages/next/src/telemetry/events/swc-load-failure.ts
+++ b/packages/next/src/telemetry/events/swc-load-failure.ts
@@ -31,7 +31,7 @@ export async function eventSwcLoadFailure(
   try {
     // @ts-ignore
     glibcVersion = process.report?.getReport().header.glibcVersionRuntime
-  } catch (_) {}
+  } catch {}
 
   try {
     const pkgNames = Object.keys(optionalDependencies || {}).filter((pkg) =>
@@ -43,13 +43,13 @@ export async function eventSwcLoadFailure(
       try {
         const { version } = require(`${pkg}/package.json`)
         installedPkgs.push(`${pkg}@${version}`)
-      } catch (_) {}
+      } catch {}
     }
 
     if (installedPkgs.length > 0) {
       installedSwcPackages = installedPkgs.sort().join(',')
     }
-  } catch (_) {}
+  } catch {}
 
   telemetry.record({
     eventName: EVENT_PLUGIN_PRESENT,

From ba0472c507baeffd3bca771d4fd86b61d7a2354d Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 30 Aug 2023 12:44:08 +0200
Subject: [PATCH 20/24] Fix unexpected full hmr reload when editing _app
 (#54690)

### What
When you only have `pages/` folder and custom `_app.js`, editing the
`_app.js` file when unexpectedly lead to full page reload. This is
because the `pages/_app` chunk is included into `pages/_document` chunk
as they all pass through the `next-route-loader` which forms the router
module and other userland modules including `/_app` and `/_document`.
That leads to a change: whenever you modify `_app.js`, chunk hash of
`/_document` will always be updated as it's built as a new chunk.

Found this difference by looking at the document chunk with nextjs in
early 13.4.x releases.

### How

We'll check at the entries creation point to filter out `/_app` and
`/_document` so that we won't have them both bundled for `_document`
chunk. Then when we won't trigger the hmr path to reload the page since
_document chunk hash is updated.

Closes NEXT-1568
Fixes #53614
---
 packages/next/src/build/entries.ts            |  8 +++-
 .../next/src/lib/is-internal-component.ts     |  4 ++
 .../src/server/dev/hot-reloader-webpack.ts    | 13 ++++--
 .../pages-dir/custom-app-hmr/index.test.ts    | 46 +++++++++++++++++++
 .../pages-dir/custom-app-hmr/pages/_app.js    |  8 ++++
 .../pages-dir/custom-app-hmr/pages/index.js   |  3 ++
 6 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 test/development/pages-dir/custom-app-hmr/index.test.ts
 create mode 100644 test/development/pages-dir/custom-app-hmr/pages/_app.js
 create mode 100644 test/development/pages-dir/custom-app-hmr/pages/index.js

diff --git a/packages/next/src/build/entries.ts b/packages/next/src/build/entries.ts
index 28d0cfb5ee826..ce6e8fa154e7d 100644
--- a/packages/next/src/build/entries.ts
+++ b/packages/next/src/build/entries.ts
@@ -53,7 +53,10 @@ import { isAppRouteRoute } from '../lib/is-app-route-route'
 import { normalizeMetadataRoute } from '../lib/metadata/get-metadata-route'
 import { fileExists } from '../lib/file-exists'
 import { getRouteLoaderEntry } from './webpack/loaders/next-route-loader'
-import { isInternalComponent } from '../lib/is-internal-component'
+import {
+  isInternalComponent,
+  isNonRoutePagesPage,
+} from '../lib/is-internal-component'
 import { isStaticMetadataRouteFile } from '../lib/metadata/is-metadata-route'
 import { RouteKind } from '../server/future/route-kind'
 import { encodeToBase64 } from './webpack/loaders/utils'
@@ -645,7 +648,8 @@ export async function createEntrypoints(
             ]
           } else if (
             !isMiddlewareFile(page) &&
-            !isInternalComponent(absolutePagePath)
+            !isInternalComponent(absolutePagePath) &&
+            !isNonRoutePagesPage(page)
           ) {
             server[serverBundlePath] = [
               getRouteLoaderEntry({
diff --git a/packages/next/src/lib/is-internal-component.ts b/packages/next/src/lib/is-internal-component.ts
index 23d3e8421f2af..19f6b325097d5 100644
--- a/packages/next/src/lib/is-internal-component.ts
+++ b/packages/next/src/lib/is-internal-component.ts
@@ -7,3 +7,7 @@ export function isInternalComponent(pathname: string): boolean {
       return false
   }
 }
+
+export function isNonRoutePagesPage(pathname: string): boolean {
+  return pathname === '/_app' || pathname === '/_document'
+}
diff --git a/packages/next/src/server/dev/hot-reloader-webpack.ts b/packages/next/src/server/dev/hot-reloader-webpack.ts
index bfec2c3e43ee9..f480c0480d27f 100644
--- a/packages/next/src/server/dev/hot-reloader-webpack.ts
+++ b/packages/next/src/server/dev/hot-reloader-webpack.ts
@@ -65,7 +65,10 @@ import { RouteMatch } from '../future/route-matches/route-match'
 import { parseVersionInfo, VersionInfo } from './parse-version-info'
 import { isAPIRoute } from '../../lib/is-api-route'
 import { getRouteLoaderEntry } from '../../build/webpack/loaders/next-route-loader'
-import { isInternalComponent } from '../../lib/is-internal-component'
+import {
+  isInternalComponent,
+  isNonRoutePagesPage,
+} from '../../lib/is-internal-component'
 import { RouteKind } from '../future/route-kind'
 import { NextJsHotReloaderInterface } from './hot-reloader-types'
 
@@ -945,7 +948,8 @@ export default class HotReloader implements NextJsHotReloaderInterface {
                   })
                 } else if (
                   !isMiddlewareFile(page) &&
-                  !isInternalComponent(relativeRequest)
+                  !isInternalComponent(relativeRequest) &&
+                  !isNonRoutePagesPage(page)
                 ) {
                   value = getRouteLoaderEntry({
                     kind: RouteKind.PAGES,
@@ -1222,7 +1226,7 @@ export default class HotReloader implements NextJsHotReloaderInterface {
           return
         }
 
-        // If _document.js didn't change we don't trigger a reload
+        // If _document.js didn't change we don't trigger a reload.
         if (documentChunk.hash === this.serverPrevDocumentHash) {
           return
         }
@@ -1247,9 +1251,10 @@ export default class HotReloader implements NextJsHotReloaderInterface {
           this.serverChunkNames = chunkNames
         }
 
+        this.serverPrevDocumentHash = documentChunk.hash || null
+
         // Notify reload to reload the page, as _document.js was changed (different hash)
         this.send('reloadPage')
-        this.serverPrevDocumentHash = documentChunk.hash || null
       }
     )
 
diff --git a/test/development/pages-dir/custom-app-hmr/index.test.ts b/test/development/pages-dir/custom-app-hmr/index.test.ts
new file mode 100644
index 0000000000000..67107828daa83
--- /dev/null
+++ b/test/development/pages-dir/custom-app-hmr/index.test.ts
@@ -0,0 +1,46 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'custom-app-hmr',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should not do full reload when simply editing _app.js', async () => {
+      const customAppFilePath = 'pages/_app.js'
+      const browser = await next.browser('/')
+      await browser.eval('window.hmrConstantValue = "should-not-change"')
+
+      const customAppContent = await next.readFile(customAppFilePath)
+      const newCustomAppContent = customAppContent.replace(
+        'hmr text origin',
+        'hmr text changed'
+      )
+      await next.patchFile(customAppFilePath, newCustomAppContent)
+
+      await check(async () => {
+        const pText = await browser.elementByCss('h1').text()
+        expect(pText).toBe('hmr text changed')
+
+        // Should keep the value on window, which indicates there's no full reload
+        const hmrConstantValue = await browser.eval('window.hmrConstantValue')
+        expect(hmrConstantValue).toBe('should-not-change')
+
+        return 'success'
+      }, 'success')
+
+      await next.patchFile(customAppFilePath, customAppContent)
+      await check(async () => {
+        const pText = await browser.elementByCss('h1').text()
+        expect(pText).toBe('hmr text origin')
+
+        // Should keep the value on window, which indicates there's no full reload
+        const hmrConstantValue = await browser.eval('window.hmrConstantValue')
+        expect(hmrConstantValue).toBe('should-not-change')
+
+        return 'success'
+      }, 'success')
+    })
+  }
+)
diff --git a/test/development/pages-dir/custom-app-hmr/pages/_app.js b/test/development/pages-dir/custom-app-hmr/pages/_app.js
new file mode 100644
index 0000000000000..d10eb5b009dd5
--- /dev/null
+++ b/test/development/pages-dir/custom-app-hmr/pages/_app.js
@@ -0,0 +1,8 @@
+export default function App({ Component, pageProps }) {
+  return (
+    <>
+      <h1>hmr text origin</h1>
+      <Component {...pageProps} />
+    </>
+  )
+}
diff --git a/test/development/pages-dir/custom-app-hmr/pages/index.js b/test/development/pages-dir/custom-app-hmr/pages/index.js
new file mode 100644
index 0000000000000..08263e34c35fd
--- /dev/null
+++ b/test/development/pages-dir/custom-app-hmr/pages/index.js
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>index page</p>
+}

From 523d376ae39a72dce6880b0c1f9c1f30cce97ba7 Mon Sep 17 00:00:00 2001
From: Tobias Koppers <tobias.koppers@googlemail.com>
Date: Wed, 30 Aug 2023 13:55:51 +0200
Subject: [PATCH 21/24] update turbopack (#54768)

* https://github.com/vercel/turbo/pull/5793 <!-- Alex Kirszenberg -
Automatically derive ValueDefault for primitive value types -->
* https://github.com/vercel/turbo/pull/5784 <!-- Tobias Koppers - make
swc comments immutable -->
* https://github.com/vercel/turbo/pull/5627 <!-- Tobias Koppers - avoid
unnessecary indirection in async modules -->
* https://github.com/vercel/turbo/pull/5822 <!-- Tobias Koppers -
continue on failing test steps -->
* https://github.com/vercel/turbo/pull/5814 <!-- Justin Ridgewell -
Update HMR for next-api -->
* https://github.com/vercel/turbo/pull/5821 <!-- Tobias Koppers - avoid
cloning a large list of task ids -->

Closes WEB-1473
---
 Cargo.lock                                    | 74 +++++++++----------
 Cargo.toml                                    |  6 +-
 .../next-swc/crates/next-core/js/package.json |  4 +-
 .../crates/next-core/js/src/dev/client.ts     |  9 ++-
 .../next-core/js/src/dev/hot-reloader.tsx     |  2 +
 .../next-core/js/src/entry/fallback.tsx       |  2 +
 .../next-core/js/src/entry/next-hydrate.tsx   |  3 +
 pnpm-lock.yaml                                | 18 ++---
 8 files changed, 65 insertions(+), 53 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 6bd7704782998..33c8f8b79d0b5 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -412,7 +412,7 @@ dependencies = [
 [[package]]
 name = "auto-hash-map"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "serde",
 ]
@@ -3633,7 +3633,7 @@ dependencies = [
 [[package]]
 name = "node-file-trace"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "serde",
@@ -7306,7 +7306,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -7338,7 +7338,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-build"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "cargo-lock",
@@ -7350,7 +7350,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-bytes"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "bytes",
@@ -7365,7 +7365,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-env"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "dotenvs",
@@ -7379,7 +7379,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-fetch"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indexmap 1.9.3",
@@ -7396,7 +7396,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-fs"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "auto-hash-map",
@@ -7426,7 +7426,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-hash"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "base16",
  "hex",
@@ -7438,7 +7438,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-macros"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "convert_case 0.6.0",
@@ -7452,7 +7452,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-macros-shared"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -7462,7 +7462,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-malloc"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "mimalloc",
 ]
@@ -7470,7 +7470,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-memory"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "auto-hash-map",
@@ -7493,7 +7493,7 @@ dependencies = [
 [[package]]
 name = "turbo-tasks-testing"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "auto-hash-map",
@@ -7506,7 +7506,7 @@ dependencies = [
 [[package]]
 name = "turbopack"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -7537,7 +7537,7 @@ dependencies = [
 [[package]]
 name = "turbopack-bench"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "chromiumoxide",
@@ -7567,7 +7567,7 @@ dependencies = [
 [[package]]
 name = "turbopack-binding"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "auto-hash-map",
  "mdxjs",
@@ -7610,7 +7610,7 @@ dependencies = [
 [[package]]
 name = "turbopack-build"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indexmap 1.9.3",
@@ -7632,7 +7632,7 @@ dependencies = [
 [[package]]
 name = "turbopack-cli-utils"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "clap 4.1.11",
@@ -7656,7 +7656,7 @@ dependencies = [
 [[package]]
 name = "turbopack-core"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-recursion",
@@ -7685,7 +7685,7 @@ dependencies = [
 [[package]]
 name = "turbopack-create-test-app"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "clap 4.1.11",
@@ -7698,7 +7698,7 @@ dependencies = [
 [[package]]
 name = "turbopack-css"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -7720,7 +7720,7 @@ dependencies = [
 [[package]]
 name = "turbopack-dev"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indexmap 1.9.3",
@@ -7744,7 +7744,7 @@ dependencies = [
 [[package]]
 name = "turbopack-dev-server"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-compression",
@@ -7781,7 +7781,7 @@ dependencies = [
 [[package]]
 name = "turbopack-ecmascript"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -7815,7 +7815,7 @@ dependencies = [
 [[package]]
 name = "turbopack-ecmascript-hmr-protocol"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "serde",
  "serde_json",
@@ -7826,7 +7826,7 @@ dependencies = [
 [[package]]
 name = "turbopack-ecmascript-plugins"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -7849,7 +7849,7 @@ dependencies = [
 [[package]]
 name = "turbopack-ecmascript-runtime"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indoc",
@@ -7866,7 +7866,7 @@ dependencies = [
 [[package]]
 name = "turbopack-env"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indexmap 1.9.3",
@@ -7882,7 +7882,7 @@ dependencies = [
 [[package]]
 name = "turbopack-image"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "base64 0.21.0",
@@ -7902,7 +7902,7 @@ dependencies = [
 [[package]]
 name = "turbopack-json"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "serde",
@@ -7917,7 +7917,7 @@ dependencies = [
 [[package]]
 name = "turbopack-mdx"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "mdxjs",
@@ -7932,7 +7932,7 @@ dependencies = [
 [[package]]
 name = "turbopack-node"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "async-stream",
@@ -7967,7 +7967,7 @@ dependencies = [
 [[package]]
 name = "turbopack-static"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "serde",
@@ -7983,7 +7983,7 @@ dependencies = [
 [[package]]
 name = "turbopack-swc-utils"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "swc_core",
  "turbo-tasks",
@@ -7994,7 +7994,7 @@ dependencies = [
 [[package]]
 name = "turbopack-test-utils"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "once_cell",
@@ -8012,7 +8012,7 @@ dependencies = [
 [[package]]
 name = "turbopack-wasm"
 version = "0.1.0"
-source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230825.2#faf918f24fee368fbf32cb99464a202c90068ee1"
+source = "git+https://github.com/vercel/turbo.git?tag=turbopack-230829.2#8307b9329d169b3f5174790ca95fb4a4b48573ca"
 dependencies = [
  "anyhow",
  "indexmap 1.9.3",
diff --git a/Cargo.toml b/Cargo.toml
index 6f6f951200ef6..30355c7b5fc9d 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -46,11 +46,11 @@ swc_core = { version = "0.79.70" }
 testing = { version = "0.33.24" }
 
 # Turbo crates
-turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230825.2" }
+turbopack-binding = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230829.2" }
 # [TODO]: need to refactor embed_directory! macro usages, as well as resolving turbo_tasks::function, macros..
-turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230825.2" }
+turbo-tasks = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230829.2" }
 # [TODO]: need to refactor embed_directory! macro usage in next-core
-turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230825.2" }
+turbo-tasks-fs = { git = "https://github.com/vercel/turbo.git", tag = "turbopack-230829.2" }
 
 # General Deps
 
diff --git a/packages/next-swc/crates/next-core/js/package.json b/packages/next-swc/crates/next-core/js/package.json
index b3a8d1ff67bae..878df0d993d6a 100644
--- a/packages/next-swc/crates/next-core/js/package.json
+++ b/packages/next-swc/crates/next-core/js/package.json
@@ -10,8 +10,8 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2",
-    "@vercel/turbopack-node": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230825.2",
+    "@vercel/turbopack-ecmascript-runtime": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2",
+    "@vercel/turbopack-node": "https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230829.2",
     "anser": "^2.1.1",
     "css.escape": "^1.5.1",
     "next": "*",
diff --git a/packages/next-swc/crates/next-core/js/src/dev/client.ts b/packages/next-swc/crates/next-core/js/src/dev/client.ts
index 1c56f6a9ac70f..db9d09bef7d30 100644
--- a/packages/next-swc/crates/next-core/js/src/dev/client.ts
+++ b/packages/next-swc/crates/next-core/js/src/dev/client.ts
@@ -1,10 +1,15 @@
 import { connect } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
-import { connectHMR } from '@vercel/turbopack-ecmascript-runtime/dev/client/websocket'
+import {
+  connectHMR,
+  addMessageListener,
+  sendMessage,
+} from '@vercel/turbopack-ecmascript-runtime/dev/client/websocket'
 import { register, ReactDevOverlay } from '../overlay/client'
 
 export function initializeHMR(options: { assetPrefix: string }) {
   connect({
-    assetPrefix: options.assetPrefix,
+    addMessageListener,
+    sendMessage,
   })
   connectHMR({
     assetPrefix: options.assetPrefix,
diff --git a/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx b/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx
index 0b1734bd4c140..77d5a4c74a57c 100644
--- a/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx
+++ b/packages/next-swc/crates/next-core/js/src/dev/hot-reloader.tsx
@@ -5,6 +5,7 @@ import { useRouter, usePathname } from 'next/dist/client/components/navigation'
 import { useEffect } from 'react'
 import { subscribeToUpdate } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
 import { ReactDevOverlay } from './client'
+import { sendMessage } from '@vercel/turbopack-ecmascript-runtime/dev/client/websocket'
 
 type HotReloadProps = React.PropsWithChildren<{
   assetPrefix?: string
@@ -22,6 +23,7 @@ export default function HotReload({ children }: HotReloadProps) {
           rsc: '1',
         },
       },
+      sendMessage,
       (update) => {
         if (update.type !== 'issues') {
           router.refresh()
diff --git a/packages/next-swc/crates/next-core/js/src/entry/fallback.tsx b/packages/next-swc/crates/next-core/js/src/entry/fallback.tsx
index 90309991edfd0..dc5c9e2578757 100644
--- a/packages/next-swc/crates/next-core/js/src/entry/fallback.tsx
+++ b/packages/next-swc/crates/next-core/js/src/entry/fallback.tsx
@@ -4,6 +4,7 @@ import { createRoot } from 'react-dom/client'
 
 import { initializeHMR, ReactDevOverlay } from '../dev/client'
 import { subscribeToUpdate } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
+import { sendMessage } from '@vercel/turbopack-ecmascript-runtime/dev/client/websocket'
 
 const pageChunkPath = location.pathname.slice(1)
 
@@ -14,6 +15,7 @@ subscribeToUpdate(
       accept: 'text/html',
     },
   },
+  sendMessage,
   (update) => {
     if (update.type === 'restart' || update.type === 'notFound') {
       location.reload()
diff --git a/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx b/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx
index 94e32fff86d2a..a6cc01a017f89 100644
--- a/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx
+++ b/packages/next-swc/crates/next-core/js/src/entry/next-hydrate.tsx
@@ -9,6 +9,7 @@ import {
 import { formatWithValidation } from 'next/dist/shared/lib/router/utils/format-url'
 import { initializeHMR } from '../dev/client'
 import { subscribeToUpdate } from '@vercel/turbopack-ecmascript-runtime/dev/client/hmr-client'
+import { sendMessage } from '@vercel/turbopack-ecmascript-runtime/dev/client/websocket'
 ;(self as any).__next_set_public_path__ = () => {}
 
 async function loadPageChunk(assetPrefix: string, chunkData: ChunkData) {
@@ -83,6 +84,7 @@ function subscribeToPageManifest({ assetPrefix }: { assetPrefix: string }) {
     {
       path: '_next/static/development/_devPagesManifest.json',
     },
+    sendMessage,
     (update) => {
       if (['restart', 'notFound', 'partial'].includes(update.type)) {
         return
@@ -169,6 +171,7 @@ function subscribeToPageData({
         'x-nextjs-data': '1',
       },
     },
+    sendMessage,
     (update) => {
       if (update.type !== 'restart') {
         return
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 039ae336ca234..b69c0a14a2c14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1521,11 +1521,11 @@ importers:
   packages/next-swc/crates/next-core/js:
     dependencies:
       '@vercel/turbopack-ecmascript-runtime':
-        specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2
-        version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2(react-refresh@0.12.0)(webpack@5.86.0)'
+        specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2
+        version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2(react-refresh@0.12.0)(webpack@5.86.0)'
       '@vercel/turbopack-node':
-        specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230825.2
-        version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230825.2'
+        specifier: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230829.2
+        version: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230829.2'
       anser:
         specifier: ^2.1.1
         version: 2.1.1
@@ -27185,9 +27185,9 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
-  '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2(react-refresh@0.12.0)(webpack@5.86.0)':
-    resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2}
-    id: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230825.2'
+  '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2(react-refresh@0.12.0)(webpack@5.86.0)':
+    resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2}
+    id: '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-ecmascript-runtime/js?turbopack-230829.2'
     name: '@vercel/turbopack-ecmascript-runtime'
     version: 0.0.0
     dependencies:
@@ -27198,8 +27198,8 @@ packages:
       - webpack
     dev: false
 
-  '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230825.2':
-    resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230825.2}
+  '@gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230829.2':
+    resolution: {tarball: https://gitpkg-fork.vercel.sh/vercel/turbo/crates/turbopack-node/js?turbopack-230829.2}
     name: '@vercel/turbopack-node'
     version: 0.0.0
     dependencies:

From 75c641522dd3ee6e65ccbd52cc6dab36a599f7e4 Mon Sep 17 00:00:00 2001
From: Ed Putans <edputans@gmail.com>
Date: Wed, 30 Aug 2023 14:59:02 +0300
Subject: [PATCH 22/24] Fixed typo in Building your application > 03. Rendering
 section (#54764)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

---------

Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 docs/02-app/01-building-your-application/03-rendering/index.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/03-rendering/index.mdx b/docs/02-app/01-building-your-application/03-rendering/index.mdx
index 6e2fd0ea65eb0..8049b5876748b 100644
--- a/docs/02-app/01-building-your-application/03-rendering/index.mdx
+++ b/docs/02-app/01-building-your-application/03-rendering/index.mdx
@@ -71,7 +71,7 @@ When working in these environments, it's helpful to think of the flow of the cod
 
 {/* Diagram: Response flow */}
 
-If you need to access the server from the client, you send a **new** request to the server rather than re-use the same request. This makes it easier understand where to render your components and where you to place the Network Boundary.
+If you need to access the server from the client, you send a **new** request to the server rather than re-use the same request. This makes it easier to understand where to render your components and where to place the Network Boundary.
 
 In practice, this model encourages developers to think about what they want to execute on the server first, before sending the result to the client and making the application interactive.
 

From 8374e24a3915938b548d80cd3d654c6d312aae7c Mon Sep 17 00:00:00 2001
From: vinay <94120295+vinaykulk621@users.noreply.github.com>
Date: Wed, 30 Aug 2023 17:33:17 +0530
Subject: [PATCH 23/24] (Docs) Add missing JS-Code, cookies function names
 updated accordingly. (#54703)

Changed the name of the actions to `delete` and `read` to indicate the appropriate operation.
---
 .../03-forms-and-mutations.mdx                | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx b/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
index 7122a6637b22e..2fcff4d19844b 100644
--- a/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
+++ b/docs/02-app/01-building-your-application/02-data-fetching/03-forms-and-mutations.mdx
@@ -375,6 +375,20 @@ function SubmitButton() {
 }
 ```
 
+```jsx filename="app/page.jsx" switcher
+'use client'
+
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+
+function SubmitButton() {
+  const { pending } = useFormStatus()
+
+  return (
+    <button disabled={pending}>{pending ? 'Submitting...' : 'Submit'}</button>
+  )
+}
+```
+
 > **Good to know:**
 >
 > - Displaying loading or error states currently requires using Client Components. We are exploring options for server-side functions to retrieve these values as we move forward in stability for Server Actions.
@@ -829,7 +843,7 @@ You can read cookies inside a Server Action using the [`cookies`](/docs/app/api-
 
 import { cookies } from 'next/headers'
 
-export async function create() {
+export async function read() {
   const auth = cookies().get('authorization')?.value
   // ...
 }
@@ -840,7 +854,7 @@ export async function create() {
 
 import { cookies } from 'next/headers'
 
-export async function create() {
+export async function read() {
   const auth = cookies().get('authorization')?.value
   // ...
 }
@@ -884,7 +898,7 @@ You can delete cookies inside a Server Action using the [`cookies`](/docs/app/ap
 
 import { cookies } from 'next/headers'
 
-export async function create() {
+export async function delete() {
   cookies().delete('name')
   // ...
 }
@@ -895,7 +909,7 @@ export async function create() {
 
 import { cookies } from 'next/headers'
 
-export async function create() {
+export async function delete() {
   cookies().delete('name')
   // ...
 }

From c8e0d57bfa1d6b2a692bc6c5d3b7d0b0574e3ff2 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 30 Aug 2023 14:19:19 +0200
Subject: [PATCH 24/24] Use variable for common isNodeOrEdgeCompilation
 condition (#54763)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Noticed this condition was repeated quite often, this pulls it out to the top and reuses the variable.

Also made a small change to `getDefineEnv` to sort the argument similarly between all calls and change optional properties to be required with `undefined` in order to make the list explicit. Looking at the code it seems that `getDefineEnv` in `setup-dev.ts` is missing some information and that will break when `.env` / tsconfig changes 🤔
---
 packages/next/src/build/webpack-config.ts     | 109 +++++++++---------
 .../src/server/lib/router-utils/setup-dev.ts  |  13 ++-
 2 files changed, 64 insertions(+), 58 deletions(-)

diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index c50bbfcce00eb..21cf63283dc2d 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -169,33 +169,35 @@ function isResourceInPackages(
 }
 
 export function getDefineEnv({
-  dev,
+  allowedRevalidateHeaderKeys,
+  clientRouterFilters,
   config,
+  dev,
   distDir,
-  isClient,
+  fetchCacheKeyPrefix,
   hasRewrites,
-  isNodeServer,
+  isClient,
   isEdgeServer,
+  isNodeOrEdgeCompilation,
+  isNodeServer,
   middlewareMatchers,
-  clientRouterFilters,
   previewModeId,
-  fetchCacheKeyPrefix,
-  allowedRevalidateHeaderKeys,
 }: {
-  dev?: boolean
-  distDir: string
-  isClient?: boolean
-  hasRewrites?: boolean
-  isNodeServer?: boolean
-  isEdgeServer?: boolean
-  middlewareMatchers?: MiddlewareMatcher[]
-  config: NextConfigComplete
+  allowedRevalidateHeaderKeys: string[] | undefined
   clientRouterFilters: Parameters<
     typeof getBaseWebpackConfig
   >[1]['clientRouterFilters']
-  previewModeId?: string
-  fetchCacheKeyPrefix?: string
-  allowedRevalidateHeaderKeys?: string[]
+  config: NextConfigComplete
+  dev: boolean
+  distDir: string
+  fetchCacheKeyPrefix: string | undefined
+  hasRewrites: boolean
+  isClient: boolean
+  isEdgeServer: boolean
+  isNodeOrEdgeCompilation: boolean
+  isNodeServer: boolean
+  middlewareMatchers: MiddlewareMatcher[] | undefined
+  previewModeId: string | undefined
 }) {
   return {
     // internal field to identify the plugin config
@@ -352,7 +354,7 @@ export function getDefineEnv({
       config.experimental.webVitalsAttribution
     ),
     'process.env.__NEXT_ASSET_PREFIX': JSON.stringify(config.assetPrefix),
-    ...(isNodeServer || isEdgeServer
+    ...(isNodeOrEdgeCompilation
       ? {
           // Fix bad-actors in the npm ecosystem (e.g. `node-formidable`)
           // This is typically found in unmaintained modules from the
@@ -781,6 +783,9 @@ export default async function getBaseWebpackConfig(
   const isEdgeServer = compilerType === COMPILER_NAMES.edgeServer
   const isNodeServer = compilerType === COMPILER_NAMES.server
 
+  // If the current compilation is aimed at server-side code instead of client-side code.
+  const isNodeOrEdgeCompilation = isNodeServer || isEdgeServer
+
   const hasRewrites =
     rewrites.beforeFiles.length > 0 ||
     rewrites.afterFiles.length > 0 ||
@@ -845,7 +850,7 @@ export default async function getBaseWebpackConfig(
       loader: require.resolve('./babel/loader/index'),
       options: {
         configFile: babelConfigFile,
-        isServer: isNodeServer || isEdgeServer,
+        isServer: isNodeOrEdgeCompilation,
         distDir,
         pagesDir,
         cwd: dir,
@@ -876,7 +881,7 @@ export default async function getBaseWebpackConfig(
     return {
       loader: 'next-swc-loader',
       options: {
-        isServer: isNodeServer || isEdgeServer,
+        isServer: isNodeOrEdgeCompilation,
         rootDir: dir,
         pagesDir,
         appDir,
@@ -937,10 +942,9 @@ export default async function getBaseWebpackConfig(
 
   const pageExtensions = config.pageExtensions
 
-  const outputPath =
-    isNodeServer || isEdgeServer
-      ? path.join(distDir, SERVER_DIRECTORY)
-      : distDir
+  const outputPath = isNodeOrEdgeCompilation
+    ? path.join(distDir, SERVER_DIRECTORY)
+    : distDir
 
   const reactServerCondition = [
     'react-server',
@@ -1886,26 +1890,24 @@ export default async function getBaseWebpackConfig(
       }/_next/`,
       path: !dev && isNodeServer ? path.join(outputPath, 'chunks') : outputPath,
       // On the server we don't use hashes
-      filename:
-        isNodeServer || isEdgeServer
-          ? dev || isEdgeServer
-            ? `[name].js`
-            : `../[name].js`
-          : `static/chunks/${isDevFallback ? 'fallback/' : ''}[name]${
-              dev ? '' : appDir ? '-[chunkhash]' : '-[contenthash]'
-            }.js`,
+      filename: isNodeOrEdgeCompilation
+        ? dev || isEdgeServer
+          ? `[name].js`
+          : `../[name].js`
+        : `static/chunks/${isDevFallback ? 'fallback/' : ''}[name]${
+            dev ? '' : appDir ? '-[chunkhash]' : '-[contenthash]'
+          }.js`,
       library: isClient || isEdgeServer ? '_N_E' : undefined,
       libraryTarget: isClient || isEdgeServer ? 'assign' : 'commonjs2',
       hotUpdateChunkFilename: 'static/webpack/[id].[fullhash].hot-update.js',
       hotUpdateMainFilename:
         'static/webpack/[fullhash].[runtime].hot-update.json',
       // This saves chunks with the name given via `import()`
-      chunkFilename:
-        isNodeServer || isEdgeServer
-          ? '[name].js'
-          : `static/chunks/${isDevFallback ? 'fallback/' : ''}${
-              dev ? '[name]' : '[name].[contenthash]'
-            }.js`,
+      chunkFilename: isNodeOrEdgeCompilation
+        ? '[name].js'
+        : `static/chunks/${isDevFallback ? 'fallback/' : ''}${
+            dev ? '[name]' : '[name].[contenthash]'
+          }.js`,
       strictModuleExceptionHandling: true,
       crossOriginLoading: crossOrigin,
       webassemblyModuleFilename: 'static/wasm/[modulehash].wasm',
@@ -2411,18 +2413,19 @@ export default async function getBaseWebpackConfig(
         }),
       new webpack.DefinePlugin(
         getDefineEnv({
-          dev,
+          allowedRevalidateHeaderKeys,
+          clientRouterFilters,
           config,
+          dev,
           distDir,
-          isClient,
+          fetchCacheKeyPrefix,
           hasRewrites,
-          isNodeServer,
+          isClient,
           isEdgeServer,
+          isNodeOrEdgeCompilation,
+          isNodeServer,
           middlewareMatchers,
-          clientRouterFilters,
           previewModeId,
-          fetchCacheKeyPrefix,
-          allowedRevalidateHeaderKeys,
         })
       ),
       isClient &&
@@ -2483,7 +2486,7 @@ export default async function getBaseWebpackConfig(
           resourceRegExp: /react-is/,
           contextRegExp: /next[\\/]dist[\\/]/,
         }),
-      (isNodeServer || isEdgeServer) &&
+      isNodeOrEdgeCompilation &&
         new PagesManifestPlugin({
           dev,
           isEdgeRuntime: isEdgeServer,
@@ -2778,11 +2781,9 @@ export default async function getBaseWebpackConfig(
       process.env.NEXT_WEBPACK_LOGGING.includes('summary-server')
 
     const profile =
-      (profileClient && isClient) ||
-      (profileServer && (isNodeServer || isEdgeServer))
+      (profileClient && isClient) || (profileServer && isNodeOrEdgeCompilation)
     const summary =
-      (summaryClient && isClient) ||
-      (summaryServer && (isNodeServer || isEdgeServer))
+      (summaryClient && isClient) || (summaryServer && isNodeOrEdgeCompilation)
 
     const logDefault = !infra && !profile && !summary
 
@@ -2838,7 +2839,7 @@ export default async function getBaseWebpackConfig(
       : undefined,
     hasAppDir,
     isDevelopment: dev,
-    isServer: isNodeServer || isEdgeServer,
+    isServer: isNodeOrEdgeCompilation,
     isEdgeRuntime: isEdgeServer,
     targetWeb: isClient || isEdgeServer,
     assetPrefix: config.assetPrefix || '',
@@ -2872,13 +2873,13 @@ export default async function getBaseWebpackConfig(
     webpackConfig = config.webpack(webpackConfig, {
       dir,
       dev,
-      isServer: isNodeServer || isEdgeServer,
+      isServer: isNodeOrEdgeCompilation,
       buildId,
       config,
       defaultLoaders,
       totalPages: Object.keys(entrypoints).length,
       webpack,
-      ...(isNodeServer || isEdgeServer
+      ...(isNodeOrEdgeCompilation
         ? {
             nextRuntime: isEdgeServer ? 'edge' : 'nodejs',
           }
@@ -3045,7 +3046,7 @@ export default async function getBaseWebpackConfig(
 
   if (hasUserCssConfig) {
     // only show warning for one build
-    if (isNodeServer || isEdgeServer) {
+    if (isNodeOrEdgeCompilation) {
       console.warn(
         chalk.yellow.bold('Warning: ') +
           chalk.bold(
@@ -3088,7 +3089,7 @@ export default async function getBaseWebpackConfig(
 
   // check if using @zeit/next-typescript and show warning
   if (
-    (isNodeServer || isEdgeServer) &&
+    isNodeOrEdgeCompilation &&
     webpackConfig.module &&
     Array.isArray(webpackConfig.module.rules)
   ) {
diff --git a/packages/next/src/server/lib/router-utils/setup-dev.ts b/packages/next/src/server/lib/router-utils/setup-dev.ts
index d6fa63cd6c7c6..3584023884ebf 100644
--- a/packages/next/src/server/lib/router-utils/setup-dev.ts
+++ b/packages/next/src/server/lib/router-utils/setup-dev.ts
@@ -1249,14 +1249,19 @@ async function startWatcher(opts: SetupOpts) {
                 plugin.definitions.__NEXT_DEFINE_ENV
               ) {
                 const newDefine = getDefineEnv({
-                  dev: true,
+                  allowedRevalidateHeaderKeys: undefined,
+                  clientRouterFilters,
                   config: nextConfig,
+                  dev: true,
                   distDir,
-                  isClient,
+                  fetchCacheKeyPrefix: undefined,
                   hasRewrites,
-                  isNodeServer,
+                  isClient,
                   isEdgeServer,
-                  clientRouterFilters,
+                  isNodeOrEdgeCompilation: isNodeServer || isEdgeServer,
+                  isNodeServer,
+                  middlewareMatchers: undefined,
+                  previewModeId: undefined,
                 })
 
                 Object.keys(plugin.definitions).forEach((key) => {