Merge branch 'canary' into remove-chalk

.github/workflows/build_and_deploy.yml

@@ -7,7 +7,7 @@ on:
 
 env:
   NAPI_CLI_VERSION: 2.16.2
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_LTS_VERSION: 20
   CARGO_PROFILE_RELEASE_LTO: 'true'
   TURBO_TEAM: 'vercel'

.github/workflows/build_and_test.yml

@@ -8,7 +8,7 @@ on:
 
 env:
   NAPI_CLI_VERSION: 2.14.7
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_MAINTENANCE_VERSION: 18
   NODE_LTS_VERSION: 20
   TEST_CONCURRENCY: 8

.github/workflows/build_reusable.yml

@@ -48,7 +48,7 @@ on:
 
 env:
   NAPI_CLI_VERSION: 2.14.7
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_LTS_VERSION: 20.9.0
   TEST_CONCURRENCY: 8
   # disable backtrace for test snapshots

.github/workflows/code_freeze.yml

@@ -17,7 +17,7 @@ name: Code Freeze
 
 env:
   NAPI_CLI_VERSION: 2.14.7
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_LTS_VERSION: 20
 
 jobs:

.github/workflows/pull_request_stats.yml

@@ -6,7 +6,7 @@ name: Generate Pull Request Stats
 
 env:
   NAPI_CLI_VERSION: 2.14.7
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_LTS_VERSION: 20
   TEST_CONCURRENCY: 6
 

.github/workflows/test_e2e_deploy.yml

@@ -16,7 +16,7 @@ jobs:
       VERCEL_TEST_TEAM: vtest314-next-e2e-tests
       DATADOG_API_KEY: ${{ secrets.DATA_DOG_API_KEY }}
       NAPI_CLI_VERSION: 2.16.2
-      TURBO_VERSION: 1.10.9
+      TURBO_VERSION: 1.11.3
       NODE_LTS_VERSION: 20
       CARGO_PROFILE_RELEASE_LTO: 'true'
       TURBO_TEAM: 'vercel'

.github/workflows/trigger_release.yml

@@ -29,7 +29,7 @@ name: Trigger Release
 
 env:
   NAPI_CLI_VERSION: 2.14.7
-  TURBO_VERSION: 1.10.9
+  TURBO_VERSION: 1.11.3
   NODE_LTS_VERSION: 20
 
 jobs:

Cargo.toml

@@ -40,7 +40,7 @@ next-transform-react-server-components = { path = "packages/next-swc/crates/next
 next-visitor-cjs-finder = { path = "packages/next-swc/crates/next-visitor-cjs-finder" }
 
 # SWC crates
-swc_core = { version = "0.87.10", features = [
+swc_core = { version = "0.87.16", features = [
   "ecma_loader_lru",
   "ecma_loader_parking_lot",
 ] }

UPGRADING.md

@@ -1 +1 @@
-This document has been moved to [nextjs.org/docs/upgrading](https://nextjs.org/docs/upgrading). It's also available in this repository on [/docs/02-app/01-building-your-application/09-upgrading/index.mdx](/docs/02-app/01-building-your-application/09-upgrading/index.mdx).
+This document has been moved to [nextjs.org/docs/upgrading](https://nextjs.org/docs/upgrading). It's also available in this repository on [/docs/02-app/01-building-your-application/10-upgrading](/docs/02-app/01-building-your-application/10-upgrading).

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

@@ -237,7 +237,7 @@ For example, when navigating between two sibling routes, `/dashboard/settings` a
   height="945"
 />
 
-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.
+Without partial rendering, each navigation would cause the full page to re-render on the client. Rendering only the segment that changes reduces the amount of data transferred and execution time, leading to improved performance.
 
 ### 5. Soft Navigation
 

docs/02-app/01-building-your-application/01-routing/05-dynamic-routes.mdx

@@ -120,6 +120,7 @@ export default function Page({ params }) {
 | ----------------------------------- | ---------------------------------------- |
 | `app/blog/[slug]/page.js`           | `{ slug: string }`                       |
 | `app/shop/[...slug]/page.js`        | `{ slug: string[] }`                     |
+| `app/shop/[[...slug]]/page.js`      | `{ slug?: string[] }`                    |
 | `app/[categoryId]/[itemId]/page.js` | `{ categoryId: string, itemId: string }` |
 
 > **Good to know**: This may be done automatically by the [TypeScript plugin](/docs/app/building-your-application/configuring/typescript#typescript-plugin) in the future.

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

@@ -604,6 +604,46 @@ export async function GET(request) {
 }
 ```
 
+### Webhooks
+
+You can use a Route Handler to receive webhooks from third-party services:
+
+```ts filename="app/api/route.ts" switcher
+export async function POST(request: Request) {
+  try {
+    const text = await request.text()
+    // Process the webhook payload
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+```js filename="app/api/route.js" switcher
+export async function POST(request) {
+  try {
+    const text = await request.text()
+    // Process the webhook payload
+  } catch (error) {
+    return new Response(`Webhook error: ${error.message}`, {
+      status: 400,
+    })
+  }
+
+  return new Response('Success!', {
+    status: 200,
+  })
+}
+```
+
+Notably, unlike API Routes with the Pages Router, you do not need to use `bodyParser` to use any additional configuration.
+
 ### Edge and Node.js Runtimes
 
 Route Handlers have an isomorphic Web API to support both Edge and Node.js runtimes seamlessly, including support for streaming. Since Route Handlers use the same [route segment configuration](/docs/app/api-reference/file-conventions/route-segment-config) as Pages and Layouts, they support long-awaited features like general-purpose [statically regenerated](/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) Route Handlers.

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

@@ -283,7 +283,11 @@ import { createContext } from 'react'
 
 export const ThemeContext = createContext({})
 
-export default function ThemeProvider({ children }) {
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
 }
 ```

docs/02-app/01-building-your-application/06-optimizing/06-bundle-analyzer.mdx

@@ -14,7 +14,7 @@ related:
 Install the plugin by running the following command:
 
 ```bash
-npm i @next/bundle-analyzers
+npm i @next/bundle-analyzer
 # or
 yarn add @next/bundle-analyzer
 # or

docs/02-app/01-building-your-application/06-optimizing/11-third-party-libraries.mdx

@@ -9,20 +9,21 @@ description: Optimize the performance of third-party libraries in your applicati
 improve the performance and developer experience of loading popular third-party libraries in your
 Next.js application.
 
-> **Good to know**: `@next/third-parties` is a new **experimental** library that is still under
-> active development. We're currently working on adding more third-party integrations.
-
 All third-party integrations provided by `@next/third-parties` have been optimized for performance
 and ease of use.
 
 ## Getting Started
 
-To get started, you must install the `@next/third-parties` library:
+To get started, install the `@next/third-parties` library:
 
 ```bash filename="Terminal"
-npm install @next/third-parties
+npm install @next/third-parties@latest next@latest
 ```
 
+{/* To do: Remove this paragraph once package becomes stable */}
+
+`@next/third-parties` is currently an **experimental** library under active development. We recommend installing it with the **latest** or **canary** flags while we work on adding more third-party integrations.
+
 ## Google Third-Parties
 
 All supported third-party libraries from Google can be imported from `@next/third-parties/google`.

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

@@ -446,3 +446,4 @@ module.exports = withMDX({
 - [`@next/mdx`](https://www.npmjs.com/package/@next/mdx)
 - [remark](https://github.com/remarkjs/remark)
 - [rehype](https://github.com/rehypejs/rehype)
+- [Markdoc](https://markdoc.dev/docs/nextjs)

docs/02-app/01-building-your-application/10-upgrading/04-from-vite.mdx

@@ -9,42 +9,36 @@ This guide will help you migrate an existing Vite application to Next.js.
 
 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.
-   2. Your application code grows with every new feature and extra dependency you add.
-2. **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.
-3. **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.
-4. **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/).
-5. **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.
-6. **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.
-7. **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.
+### 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.
+2. Your application code grows with every new feature and extra dependency you add.
+
+### 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.
+
+### 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. With 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.
+
+### 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/).
+
+### 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.
+
+### 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](/docs/app/building-your-application/routing/internationalization).
+
+### Built-in Optimizations
+
+[Images](/docs/app/building-your-application/optimizing/images), [fonts](/docs/app/building-your-application/optimizing/fonts), and [third-party scripts](/docs/app/building-your-application/optimizing/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
 

docs/02-app/02-api-reference/01-components/image.mdx

@@ -430,13 +430,14 @@ module.exports = {
       {
         protocol: 'https',
         hostname: '**.example.com',
+        port: '',
       },
     ],
   },
 }
 ```
 
-> **Good to know**: The example above will ensure the `src` property of `next/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol or unmatched hostname will respond with 400 Bad Request.
+> **Good to know**: The example above will ensure the `src` property of `next/image` must start with `https://img1.example.com` or `https://me.avatar.example.com` or any number of subdomains. Any other protocol, port, or unmatched hostname will respond with 400 Bad Request.
 
 Wildcard patterns can be used for both `pathname` and `hostname` and have the following syntax:
 
@@ -445,6 +446,8 @@ Wildcard patterns can be used for both `pathname` and `hostname` and have the fo
 
 The `**` syntax does not work in the middle of the pattern.
 
+> **Good to know**: When omitting `protocol`, `port` or `pathname`, then the wildcard `**` is implied. This is not recommended because it may allow malicious actors to optimize urls you did not intend.
+
 ### `domains`
 
 > **Warning**: Deprecated since Next.js 14 in favor of strict [`remotePatterns`](#remotepatterns) in order to protect your application from malicious users. Only use `domains` if you own all the content served from the domain.

docs/02-app/02-api-reference/04-functions/use-search-params.mdx

@@ -272,13 +272,13 @@ You can use [`useRouter`](/docs/app/api-reference/functions/use-router) or [`Lin
 export default function ExampleClientComponent() {
   const router = useRouter()
   const pathname = usePathname()
-  const searchParams = useSearchParams()!
+  const searchParams = useSearchParams()
 
   // Get a new searchParams string by merging the current
   // searchParams with a provided key/value pair
   const createQueryString = useCallback(
     (name: string, value: string) => {
-      const params = new URLSearchParams(searchParams)
+      const params = new URLSearchParams(searchParams.toString())
       params.set(name, value)
 
       return params.toString()

docs/02-app/02-api-reference/05-next-config-js/compress.mdx

@@ -5,7 +5,7 @@ description: Next.js provides gzip compression to compress rendered content and
 
 {/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
 
-By default, Next.js uses `gzip` to compress rendered content and static files when using `next start` or a custom server. This is an optmization for application's that do not have compression configured. If compression is _already_ configured in your application via a custom server, Next.js will not add compression.
+By default, Next.js uses `gzip` to compress rendered content and static files when using `next start` or a custom server. This is an optimization for applications that do not have compression configured. If compression is _already_ configured in your application via a custom server, Next.js will not add compression.
 
 > **Good to know:**
 >

docs/02-app/02-api-reference/08-next-cli.mdx

@@ -91,6 +91,22 @@ You can also set the hostname to be different from the default of `0.0.0.0`, thi
 npx next dev -H 192.168.1.2
 ```
 
+### HTTPS for Local Development
+
+For certain use cases like webhooks or authentication, it may be required to use HTTPS to have a secure environment on `localhost`. Next.js can generate a self-signed certificate with `next dev` as follows:
+
+```bash filename="Terminal"
+next dev --experimental-https
+```
+
+You can also provide a custom certificate and key with `--experimental-https-key` and `--experimental-https-cert`. Optionally, you can provide a custom CA certificate with `--experimental-https-ca` as well.
+
+```bash filename="Terminal"
+next dev --experimental-https --experimental-https-key ./certificates/localhost-key.pem --experimental-https-cert ./certificates/localhost.pem
+```
+
+`next dev --experimental-https` is only intended for development and creates a locally-trusted certificate with `mkcert`. In production, use properly issued certificates from trusted authorities. When deploying to Vercel, HTTPS is [automatically configured](https://vercel.com/docs/security/encryption) for your Next.js application.
+
 ## Production
 
 `next start` starts the application in production mode. The application should be compiled with [`next build`](#build) first.