Merge branch 'canary' into title

docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx

@@ -41,7 +41,7 @@ The `redirect` function allows you to redirect the user to another URL. You can
 
 `redirect` is often used after a mutation or event. For example, creating a post:
 
-```tsx filename="app/actions.tsx" switcher
+```ts filename="app/actions.ts" switcher
 'use server'
 
 import { redirect } from 'next/navigation'
@@ -59,7 +59,7 @@ export async function createPost(id: string) {
 }
 ```
 
-```jsx filename="app/actions.js" switcher
+```js filename="app/actions.js" switcher
 'use server'
 
 import { redirect } from 'next/navigation'
@@ -93,7 +93,7 @@ The `permanentRedirect` function allows you to **permanently** redirect the user
 
 `permanentRedirect` is often used after a mutation or event that changes an entity's canonical URL, such as updating a user's profile URL after they change their username:
 
-```tsx filename="app/actions.ts" switcher
+```ts filename="app/actions.ts" switcher
 'use server'
 
 import { permanentRedirect } from 'next/navigation'
@@ -111,7 +111,7 @@ export async function updateUsername(username: string, formData: FormData) {
 }
 ```
 
-```jsx filename="app/actions.js" switcher
+```js filename="app/actions.js" switcher
 'use server'
 
 import { permanentRedirect } from 'next/navigation'
@@ -272,7 +272,7 @@ Middleware allows you to run code before a request is completed. Then, based on
 
 For example, to redirect the user to a `/login` page if they are not authenticated:
 
-```tsx filename="middleware.ts" switcher
+```ts filename="middleware.ts" switcher
 import { NextResponse, NextRequest } from 'next/server'
 import { authenticate } from 'auth-provider'
 
@@ -352,7 +352,7 @@ Consider the following data structure:
 
 In [Middleware](/docs/app/building-your-application/routing/middleware), you can read from a database such as Vercel's [Edge Config](https://vercel.com/docs/storage/edge-config/get-started?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) or [Redis](https://vercel.com/docs/storage/vercel-kv?utm_source=next-site&utm_medium=docs&utm_campaign=next-website), and redirect the user based on the incoming request:
 
-```tsx filename="middleware.ts" switcher
+```ts filename="middleware.ts" switcher
 import { NextResponse, NextRequest } from 'next/server'
 import { get } from '@vercel/edge-config'
 
@@ -406,7 +406,7 @@ Considering the previous example, you can import a generated bloom filter file i
 
 If it does, forward the request to a <AppOnly>[Route Handler](/docs/app/building-your-application/routing/route-handlers)</AppOnly> <PagesOnly>[API Routes](/docs/pages/building-your-application/routing/api-routes)</PagesOnly> which will check the actual file and redirect the user to the appropriate URL. This avoids importing a large redirects file into Middleware, which can slow down every incoming request.
 
-```tsx filename="middleware.ts" switcher
+```ts filename="middleware.ts" switcher
 import { NextResponse, NextRequest } from 'next/server'
 import { ScalableBloomFilter } from 'bloom-filters'
 import GeneratedBloomFilter from './redirects/bloom-filter.json'
@@ -506,7 +506,7 @@ export async function middleware(request) {
 
 Then, in the Route Handler:
 
-```tsx filename="app/redirects/route.ts" switcher
+```ts filename="app/redirects/route.ts" switcher
 import { NextRequest, NextResponse } from 'next/server'
 import redirects from '@/app/redirects/redirects.json'
 
@@ -563,7 +563,7 @@ export function GET(request) {
 
 Then, in the API Route:
 
-```tsx filename="pages/api/redirects.ts" switcher
+```ts filename="pages/api/redirects.ts" switcher
 import type { NextApiRequest, NextApiResponse } from 'next'
 import redirects from '@/app/redirects/redirects.json'
 

docs/01-app/02-building-your-application/11-upgrading/01-codemods.mdx

@@ -87,21 +87,25 @@ Transforms into:
 
 ```tsx
 import { use } from 'react'
-import { cookies, headers, type UnsafeUnwrappedCookies } from 'next/headers'
-
-const token = (await cookies()).get('token')
+import {
+  cookies,
+  headers,
+  type UnsafeUnwrappedCookies,
+  type UnsafeUnwrappedHeaders,
+} from 'next/headers'
+const token = (cookies() as unknown as UnsafeUnwrappedCookies).get('token')
 
 function useToken() {
   const token = use(cookies()).get('token')
   return token
 }
 
-export default function Page() {
+export default async function Page() {
   const name = (await cookies()).get('name')
 }
 
 function getHeader() {
-  return (headers() as UnsafeUnwrappedCookies).get('x-foo')
+  return (headers() as unknown as UnsafeUnwrappedHeaders).get('x-foo')
 }
 ```
 
@@ -126,6 +130,7 @@ export default function Page({
 }
 
 export function generateMetadata({ params }: { params: { slug: string } }) {
+  const { slug } = params
   return {
     title: `My Page - ${slug}`,
   }
@@ -136,18 +141,22 @@ Transforms into:
 
 ```tsx
 // page.tsx
-export default function Page(props: {
-  params: { slug: string }
-  searchParams: { [key: string]: string | string[] | undefined }
+export default async function Page(props: {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
 }) {
-  const { value } = await props.searchParams
+  const searchParams = await props.searchParams
+  const { value } = searchParams
   if (value === 'foo') {
     // ...
   }
 }
 
-export function generateMetadata(props: { params: { slug: string } }) {
-  const { slug } = await props.params
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>
+}) {
+  const params = await props.params
+  const { slug } = params
   return {
     title: `My Page - ${slug}`,
   }

errors/edge-dynamic-code-evaluation.mdx

@@ -33,7 +33,7 @@ export default async function middleware() {
 In rare cases, your code could contain (or import) some dynamic code evaluation statements which _can not be reached at runtime_ and which can not be removed by tree-shaking.
 You can relax the check to allow specific files with your Middleware [configuration](/docs/pages/api-reference/edge#unsupported-apis):
 
-```tsx filename="pages/api/example.ts"
+```ts filename="pages/api/example.ts"
 export const config = {
   unstable_allowDynamic: [
     '/lib/utilities.js', // allows a single file

errors/empty-configuration.mdx

@@ -10,7 +10,7 @@ There is no object exported from next.config.js or the object is empty.
 
 Check if you correctly export configuration in `next.config.js` file:
 
-```
+```js filename="next.config.js"
 module.exports = {
   /* config options here */
 }

errors/get-initial-props-as-an-instance-method.mdx

@@ -10,7 +10,7 @@ title: '`getInitialProps` was defined as an instance method'
 
 Use the static keyword.
 
-```js filename="pages/example.js"
+```jsx filename="pages/example.js"
 export default class YourEntryComponent extends React.Component {
   static getInitialProps() {
     return {}
@@ -24,7 +24,7 @@ export default class YourEntryComponent extends React.Component {
 
 or
 
-```js filename="pages/example.js"
+```jsx filename="pages/example.js"
 const YourEntryComponent = function () {
   return 'foo'
 }

errors/link-multiple-children.mdx

@@ -8,7 +8,7 @@ In your application code multiple children were passed to `next/link` but only o
 
 For example:
 
-```js filename="example.js"
+```jsx filename="example.js"
 import Link from 'next/link'
 
 export default function Home() {
@@ -25,7 +25,7 @@ export default function Home() {
 
 Make sure only one child is used when using `<Link>`:
 
-```js filename="example.js"
+```jsx filename="example.js"
 import Link from 'next/link'
 
 export default function Home() {

errors/module-not-found.mdx

@@ -38,7 +38,7 @@ Make sure the casing of the file is correct.
 
 Example:
 
-```js filename="components/MyComponent.js"
+```jsx filename="components/MyComponent.js"
 export default function MyComponent() {
   return <h1>Hello</h1>
 }

errors/next-dynamic-modules.mdx

@@ -14,7 +14,7 @@ Migrate to using separate dynamic calls for each module.
 
 **Before**
 
-```js filename="example.js"
+```jsx filename="example.js"
 import dynamic from 'next/dynamic'
 
 const HelloBundle = dynamic({
@@ -44,7 +44,7 @@ export default DynamicBundle
 
 **After**
 
-```js filename="example.js"
+```jsx filename="example.js"
 import dynamic from 'next/dynamic'
 
 const Hello1 = dynamic(() => import('../components/hello1'))

errors/no-document-title.mdx

@@ -10,7 +10,7 @@ Adding `<title>` in `pages/_document.js` will lead to unexpected results with `n
 
 Set `<title>` in `pages/_app.js` instead:
 
-```js filename="pages/_app.js"
+```jsx filename="pages/_app.js"
 import React from 'react'
 import Head from 'next/head'
 

errors/opt-out-auto-static-optimization.mdx

@@ -17,7 +17,7 @@ Verify if you need to use `getInitialProps` in `pages/_app`. There are some vali
 
 The following `getInitialProps` can be removed:
 
-```js filename="pages/_app.js"
+```jsx filename="pages/_app.js"
 class MyApp extends App {
   // Remove me, I do nothing!
   static async getInitialProps({ Component, ctx }) {

errors/opt-out-automatic-prerendering.mdx

@@ -17,7 +17,7 @@ If you previously copied the [Custom `<App>`](/docs/pages/building-your-applicat
 
 The following `getInitialProps` does nothing and may be removed:
 
-```js filename="pages/_app.js"
+```jsx filename="pages/_app.js"
 class MyApp extends App {
   // Remove me, I do nothing!
   static async getInitialProps({ Component, ctx }) {

errors/sync-dynamic-apis.mdx

@@ -16,7 +16,7 @@ In Next 15, these APIs have been made asynchronous. You can read more about this
 
 For example, the following code will issue a warning:
 
-```js filename="app/[id]/page.js"
+```jsx filename="app/[id]/page.js"
 function Page({ params }) {
   // direct access of `params.id`.
   return <p>ID: {params.id}</p>
@@ -42,7 +42,7 @@ The codemod cannot cover all cases, so you may need to manually adjust some code
 If the warning occured on the Server (e.g. a route handler, or a Server Component),
 you must `await` the dynamic API to access its properties:
 
-```js filename="app/[id]/page.js"
+```jsx filename="app/[id]/page.js"
 async function Page({ params }) {
   // asynchronous access of `params.id`.
   const { id } = await params
@@ -53,7 +53,7 @@ async function Page({ params }) {
 If the warning occured in a synchronous component (e.g. a Client component),
 you must use `React.use()` to unwrap the Promise first:
 
-```js filename="app/[id]/page.js"
+```jsx filename="app/[id]/page.js"
 'use client'
 import * as React from 'react'
 

errors/url-deprecated.mdx

@@ -17,7 +17,7 @@ The `router` property that is injected will hold the same values as `url`, like
 
 Here's an example of using `withRouter`:
 
-```js filename="pages/index.js"
+```jsx filename="pages/index.js"
 import { withRouter } from 'next/router'
 
 class Page extends React.Component {

turbopack/crates/turbo-tasks/src/effect.rs

@@ -174,12 +174,16 @@ impl Eq for Effects {}
 impl Effects {
     /// Applies all effects that have been captured by this struct.
     pub async fn apply(&self) -> Result<()> {
-        let _span = tracing::info_span!("apply effects", count = self.effects.len());
-        let mut first_error = anyhow::Ok(());
-        for effect in self.effects.iter() {
-            apply_effect(effect, &mut first_error).await;
+        let span = tracing::info_span!("apply effects", count = self.effects.len());
+        async move {
+            let mut first_error = anyhow::Ok(());
+            for effect in self.effects.iter() {
+                apply_effect(effect, &mut first_error).await;
+            }
+            first_error
         }
-        first_error
+        .instrument(span)
+        .await
     }
 }