From 0714c457376bda1d0821fe06ed27e89e0dd3712a Mon Sep 17 00:00:00 2001 From: Tobias Koppers Date: Tue, 19 Nov 2024 05:20:03 +0100 Subject: [PATCH 1/4] [Turbopack] fix effects tracing (#72928) ### What? small follow-up to fix the tracing of Effects::apply --- turbopack/crates/turbo-tasks/src/effect.rs | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/turbopack/crates/turbo-tasks/src/effect.rs b/turbopack/crates/turbo-tasks/src/effect.rs index 1a5767b4ddbe2..3aeb4cf38d48f 100644 --- a/turbopack/crates/turbo-tasks/src/effect.rs +++ b/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 } } From 0a7d97e66099a6e60ac586a3ecc153bb74b6322c Mon Sep 17 00:00:00 2001 From: Jam Balaya Date: Tue, 19 Nov 2024 16:56:43 +0900 Subject: [PATCH 2/4] docs: fix code block language in redirecting docs (#72944) ## Summary Update incorrect code block languages at [redirecting document](https://github.com/vercel/next.js/blob/canary/docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx). ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> --- .../01-routing/07-redirecting.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx b/docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx index 3a0a8de49c259..75c4c46e2288b 100644 --- a/docs/01-app/02-building-your-application/01-routing/07-redirecting.mdx +++ b/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 [Route Handler](/docs/app/building-your-application/routing/route-handlers) [API Routes](/docs/pages/building-your-application/routing/api-routes) 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' From 20dc57391ef9983d605c6c0bc8d1a3820dd01a66 Mon Sep 17 00:00:00 2001 From: Jam Balaya Date: Tue, 19 Nov 2024 16:56:55 +0900 Subject: [PATCH 3/4] docs: fix code block language in error pages (#72943) ## Summary Update code block language in [error pages](https://github.com/vercel/next.js/tree/canary/errors). ### Improving Documentation - [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR. - [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> --- errors/edge-dynamic-code-evaluation.mdx | 2 +- errors/empty-configuration.mdx | 2 +- errors/get-initial-props-as-an-instance-method.mdx | 4 ++-- errors/link-multiple-children.mdx | 4 ++-- errors/module-not-found.mdx | 2 +- errors/next-dynamic-modules.mdx | 4 ++-- errors/no-document-title.mdx | 2 +- errors/opt-out-auto-static-optimization.mdx | 2 +- errors/opt-out-automatic-prerendering.mdx | 2 +- errors/sync-dynamic-apis.mdx | 6 +++--- errors/url-deprecated.mdx | 2 +- 11 files changed, 16 insertions(+), 16 deletions(-) diff --git a/errors/edge-dynamic-code-evaluation.mdx b/errors/edge-dynamic-code-evaluation.mdx index 68d60f62a3752..4f34253cf9f11 100644 --- a/errors/edge-dynamic-code-evaluation.mdx +++ b/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 diff --git a/errors/empty-configuration.mdx b/errors/empty-configuration.mdx index 88c7f3225494b..7f29c722260b5 100644 --- a/errors/empty-configuration.mdx +++ b/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 */ } diff --git a/errors/get-initial-props-as-an-instance-method.mdx b/errors/get-initial-props-as-an-instance-method.mdx index 75a4cee359c7a..4a6c2b954b86b 100644 --- a/errors/get-initial-props-as-an-instance-method.mdx +++ b/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' } diff --git a/errors/link-multiple-children.mdx b/errors/link-multiple-children.mdx index 20a93edcc1eb1..bb585e199c7f9 100644 --- a/errors/link-multiple-children.mdx +++ b/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 ``: -```js filename="example.js" +```jsx filename="example.js" import Link from 'next/link' export default function Home() { diff --git a/errors/module-not-found.mdx b/errors/module-not-found.mdx index 8db4f35ac799a..2232e75ed2b5b 100644 --- a/errors/module-not-found.mdx +++ b/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

Hello

} diff --git a/errors/next-dynamic-modules.mdx b/errors/next-dynamic-modules.mdx index 04499720cf6fd..410fc28ffdbda 100644 --- a/errors/next-dynamic-modules.mdx +++ b/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')) diff --git a/errors/no-document-title.mdx b/errors/no-document-title.mdx index c08dbc92b6678..bc934c90680cd 100644 --- a/errors/no-document-title.mdx +++ b/errors/no-document-title.mdx @@ -10,7 +10,7 @@ Adding `` 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' diff --git a/errors/opt-out-auto-static-optimization.mdx b/errors/opt-out-auto-static-optimization.mdx index 19269a37186ca..bb537c04e5087 100644 --- a/errors/opt-out-auto-static-optimization.mdx +++ b/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 }) { diff --git a/errors/opt-out-automatic-prerendering.mdx b/errors/opt-out-automatic-prerendering.mdx index dff491049daa6..351c44e1d01b7 100644 --- a/errors/opt-out-automatic-prerendering.mdx +++ b/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 }) { diff --git a/errors/sync-dynamic-apis.mdx b/errors/sync-dynamic-apis.mdx index d21e8a8113e4c..cd3831518bf50 100644 --- a/errors/sync-dynamic-apis.mdx +++ b/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' diff --git a/errors/url-deprecated.mdx b/errors/url-deprecated.mdx index 588999e3f876a..39d955fadf9e1 100644 --- a/errors/url-deprecated.mdx +++ b/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 { From 172f3e3dd9b89dfb1e18f0452449ce6102172a5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=EA=B3=84=EC=A7=84?= <whrpwls96@naver.com> Date: Tue, 19 Nov 2024 17:25:11 +0900 Subject: [PATCH 4/4] docs: update "Migrate to async Dynamic APIs" docs (#72852) ### What? Update the example code with Codemods applied in [Migrate to async Dynamic APIs](https://nextjs.org/docs/app/building-your-application/upgrading/codemods#migrate-to-async-dynamic-apis) docs Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com> --- .../11-upgrading/01-codemods.mdx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/docs/01-app/02-building-your-application/11-upgrading/01-codemods.mdx b/docs/01-app/02-building-your-application/11-upgrading/01-codemods.mdx index 8a3e18903eb1c..c3f5851cda452 100644 --- a/docs/01-app/02-building-your-application/11-upgrading/01-codemods.mdx +++ b/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}`, }