docs: update nextjs documentation

Author: xiaoyu2er

apps/docs/content/en/docs/01-app/01-getting-started/04-images.mdx

@@ -58,6 +58,41 @@ export default function Page() {
     <Image
       src="/profile.png"
       alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+```jsx filename="app/page.js" switcher
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <Image
+      src="/profile.png"
+      alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
+### Statically imported images
+
+You can also import and use local image files. Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
+
+```tsx filename="app/page.tsx" switcher
+import Image from 'next/image'
+import ProfileImage from './profile.png'
+
+export default function Page() {
+  return (
+    <Image
+      src={ProfileImage}
+      alt="Picture of the author"
       // width={500} automatically provided
       // height={500} automatically provided
       // blurDataURL="data:..." automatically provided
@@ -69,11 +104,12 @@ export default function Page() {
 
 ```jsx filename="app/page.js" switcher
 import Image from 'next/image'
+import ProfileImage from './profile.png'
 
 export default function Page() {
   return (
     <Image
-      src="/profile.png"
+      src={ProfileImage}
       alt="Picture of the author"
       // width={500} automatically provided
       // height={500} automatically provided
@@ -84,7 +120,7 @@ export default function Page() {
 }
 ```
 
-When using local images, Next.js will automatically determine the intrinsic [`width`](/docs/app/api-reference/components/image#width-and-height) and [`height`](/docs/app/api-reference/components/image#width-and-height) of your image based on the imported file. These values are used to determine the image ratio and prevent [Cumulative Layout Shift](https://web.dev/articles/cls) while your image is loading.
+In this case, Next.js expects the `app/profile.png` file to be available.
 
 ## Remote images
 

apps/docs/content/en/docs/01-app/05-api-reference/03-file-conventions/route-segment-config.mdx

@@ -87,7 +87,6 @@ export const dynamicParams = true // true | false,
 > - This option replaces the `fallback: true | false | blocking` option of `getStaticPaths` in the `pages` directory.
 > - To statically render all paths the first time they're visited, you'll need to return an empty array in `generateStaticParams` or utilize `export const dynamic = 'force-static'`.
 > - When `dynamicParams = true`, the segment uses [Streaming Server Rendering](/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense).
-> - If the `dynamic = 'error'` and `dynamic = 'force-static'` are used, it'll change the default of `dynamicParams` to `false`.
 
 ### `revalidate`
 

apps/docs/content/en/docs/01-app/05-api-reference/04-functions/use-report-web-vitals.mdx

@@ -7,15 +7,19 @@ description: API Reference for the useReportWebVitals function.
 
 The `useReportWebVitals` hook allows you to report [Core Web Vitals](https://web.dev/vitals/), and can be used in combination with your analytics service.
 
+New functions passed to `useReportWebVitals` are called with the available metrics up to that point. To prevent reporting duplicated data, ensure that the callback function reference does not change (as shown in the code examples below).
+
 <PagesOnly>
 
 ```jsx filename="pages/_app.js"
 import { useReportWebVitals } from 'next/web-vitals'
 
+const logWebVitals = (metric) => {
+  console.log(metric)
+}
+
 function MyApp({ Component, pageProps }) {
-  useReportWebVitals((metric) => {
-    console.log(metric)
-  })
+  useReportWebVitals(logWebVitals)
 
   return <Component {...pageProps} />
 }
@@ -30,10 +34,12 @@ function MyApp({ Component, pageProps }) {
 
 import { useReportWebVitals } from 'next/web-vitals'
 
+const logWebVitals = (metric) => {
+  console.log(metric)
+}
+
 export function WebVitals() {
-  useReportWebVitals((metric) => {
-    console.log(metric)
-  })
+  useReportWebVitals(logWebVitals)
 
   return null
 }
@@ -89,18 +95,20 @@ You can handle all the results of these metrics using the `name` property.
 ```jsx filename="pages/_app.js"
 import { useReportWebVitals } from 'next/web-vitals'
 
-function MyApp({ Component, pageProps }) {
-  useReportWebVitals((metric) => {
-    switch (metric.name) {
-      case 'FCP': {
-        // handle FCP results
-      }
-      case 'LCP': {
-        // handle LCP results
-      }
-      // ...
+const handleWebVitals = (metric) => {
+  switch (metric.name) {
+    case 'FCP': {
+      // handle FCP results
     }
-  })
+    case 'LCP': {
+      // handle LCP results
+    }
+    // ...
+  }
+}
+
+function MyApp({ Component, pageProps }) {
+  useReportWebVitals(handleWebVitals)
 
   return <Component {...pageProps} />
 }
@@ -115,18 +123,22 @@ function MyApp({ Component, pageProps }) {
 
 import { useReportWebVitals } from 'next/web-vitals'
 
-export function WebVitals() {
-  useReportWebVitals((metric) => {
-    switch (metric.name) {
-      case 'FCP': {
-        // handle FCP results
-      }
-      case 'LCP': {
-        // handle LCP results
-      }
-      // ...
+type ReportWebVitalsCallback = Parameters<typeof useReportWebVitals>[0]
+
+const handleWebVitals: ReportWebVitalsCallback = (metric) => {
+  switch (metric.name) {
+    case 'FCP': {
+      // handle FCP results
+    }
+    case 'LCP': {
+      // handle LCP results
     }
-  })
+    // ...
+  }
+}
+
+export function WebVitals() {
+  useReportWebVitals(handleWebVitals)
 }
 ```
 
@@ -135,18 +147,20 @@ export function WebVitals() {
 
 import { useReportWebVitals } from 'next/web-vitals'
 
-export function WebVitals() {
-  useReportWebVitals((metric) => {
-    switch (metric.name) {
-      case 'FCP': {
-        // handle FCP results
-      }
-      case 'LCP': {
-        // handle LCP results
-      }
-      // ...
+const handleWebVitals = (metric) => {
+  switch (metric.name) {
+    case 'FCP': {
+      // handle FCP results
     }
-  })
+    case 'LCP': {
+      // handle LCP results
+    }
+    // ...
+  }
+}
+
+export function WebVitals() {
+  useReportWebVitals(handleWebVitals)
 }
 ```
 
@@ -169,22 +183,24 @@ You can handle all the results of these metrics separately:
 ```jsx filename="pages/_app.js"
 import { useReportWebVitals } from 'next/web-vitals'
 
+function handleCustomMetrics(metrics) {
+  switch (metric.name) {
+    case 'Next.js-hydration':
+      // handle hydration results
+      break
+    case 'Next.js-route-change-to-render':
+      // handle route-change to render results
+      break
+    case 'Next.js-render':
+      // handle render results
+      break
+    default:
+      break
+  }
+}
+
 function MyApp({ Component, pageProps }) {
-  useReportWebVitals((metric) => {
-    switch (metric.name) {
-      case 'Next.js-hydration':
-        // handle hydration results
-        break
-      case 'Next.js-route-change-to-render':
-        // handle route-change to render results
-        break
-      case 'Next.js-render':
-        // handle render results
-        break
-      default:
-        break
-    }
-  })
+  useReportWebVitals(handleCustomMetrics)
 
   return <Component {...pageProps} />
 }
@@ -200,7 +216,7 @@ You can send results to any endpoint to measure and track
 real user performance on your site. For example:
 
 ```js
-useReportWebVitals((metric) => {
+function postWebVitals(metrics) {
   const body = JSON.stringify(metric)
   const url = 'https://example.com/analytics'
 
@@ -210,7 +226,9 @@ useReportWebVitals((metric) => {
   } else {
     fetch(url, { body, method: 'POST', keepalive: true })
   }
-})
+}
+
+useReportWebVitals(postWebVitals)
 ```
 
 > **Good to know**: If you use [Google Analytics](https://analytics.google.com/analytics/web/), using the

apps/docs/content/en/learn/02-dashboard-app/12-mutating-data.mdx

@@ -298,7 +298,7 @@ export async function createInvoice(formData: FormData) {
 
 Now that you have all the values you need for your database, you can create an SQL query to insert the new invoice into your database and pass in the variables:
 
-```ts {2,15,16,17,18} filename="/app/lib/actions.ts"
+```ts {2,4,17,18,19,20} filename="/app/lib/actions.ts"
 import { z } from 'zod';
 import postgres from 'postgres';
 
@@ -363,7 +363,7 @@ Once the database has been updated, the `/dashboard/invoices` path will be reval
 
 At this point, you also want to redirect the user back to the `/dashboard/invoices` page. You can do this with the [`redirect`](/docs/app/api-reference/functions/redirect) function from Next.js:
 
-```ts {6,14} filename="/app/lib/actions.ts"
+```ts {5,16} filename="/app/lib/actions.ts"
 'use server';
 
 import { z } from 'zod';
@@ -488,7 +488,7 @@ Notice how it's similar to your `/create` invoice page, except it imports a diff
 
 In addition to `searchParams`, page components also accept a prop called `params` which you can use to access the `id`. Update your `<Page>` component to receive the prop:
 
-```tsx {5,6} filename="/app/dashboard/invoices/[id]/edit/page.tsx"
+```tsx {5,6,7} filename="/app/dashboard/invoices/[id]/edit/page.tsx"
 import Form from '@/app/ui/invoices/edit-form';
 import Breadcrumbs from '@/app/ui/invoices/breadcrumbs';
 import { fetchCustomers } from '@/app/lib/data';