docs: update nextjs documentation

Author: xiaoyu2er

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

@@ -125,7 +125,7 @@ Since Next.js does not have access to remote files during the build process, you
 To safely allow images from remote servers, you need to define a list of supported URL patterns in [`next.config.js`](/docs/app/api-reference/config/next-config-js). Be as specific as possible to prevent malicious usage. For example, the following configuration will only allow images from a specific AWS S3 bucket:
 
 ```ts filename="next.config.ts" switcher
-import { NextConfig } from 'next'
+import type { NextConfig } from 'next'
 
 const config: NextConfig = {
   images: {

apps/docs/content/en/docs/01-app/01-getting-started/07-server-and-client-components.mdx

@@ -7,52 +7,15 @@ related:
   description: Learn more about the APIs mentioned in this page.
   links:
     - app/api-reference/directives/use-client
-    - app/api-reference/file-conventions/route
 ---
 
 By default, layouts and pages are [Server Components](https://react.dev/reference/rsc/server-components), which lets you fetch data and render parts of your UI on the server, optionally cache the result, and stream it to the client. When you need interactivity or browser APIs, you can use [Client Components](https://react.dev/reference/rsc/use-client) to layer in functionality.
 
-This page explains how Server and Client Components work in Next.js, when to use them, and how to compose them together in your application.
-
-## How do Server and Client Components work in Next.js?
-
-### On the server
-
-On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks, by individual route segments ([layouts and pages](/docs/app/getting-started/layouts-and-pages)):
-
-- **Server Components** are rendered into a special data format called the React Server Component Payload (RSC Payload).
-- **Client Components** and the RSC Payload are used to [prerender](/docs/app/getting-started/partial-prerendering#how-does-partial-prerendering-work) HTML.
-
-> **What is the React Server Component Payload (RSC)?**
->
-> The RSC Payload is a compact binary representation of the rendered React Server Components tree. It's used by React on the client to update the browser's DOM. The RSC Payload contains:
->
-> - The rendered result of Server Components
-> - Placeholders for where Client Components should be rendered and references to their JavaScript files
-> - Any props passed from a Server Component to a Client Component
-
-### On the client (first load)
-
-Then, on the client:
-
-1. **HTML** is used to immediately show a fast non-interactive preview of the route to the user.
-2. **RSC Payload** is used to reconcile the Client and Server Component trees.
-3. **JavaScript** is used to hydrate Client Components and make the application interactive.
-
-> **What is hydration?**
->
-> Hydration is React's process for attaching [event handlers](https://react.dev/learn/responding-to-events) to the DOM, to make the static HTML interactive.
-
-### Subsequent Navigations
-
-On subsequent navigations:
-
-- The **RSC Payload** is prefetched and cached for instant navigation.
-- **Client Components** are rendered entirely on the client, without the server-rendered HTML.
+This page explains how Server and Client Components work in Next.js and when to use them, with examples of how to compose them together in your application.
 
 ## When to use Server and Client Components?
 
-The client and server environments have different capabilities. Server and Client components allow you to run logic in each environment, and compose them together in the same application.
+The client and server environments have different capabilities. Server and Client components allow you to run logic in each environment depending on your use case.
 
 Use **Client Components** when you need:
 
@@ -128,6 +91,42 @@ export default function LikeButton({ likes }) {
 }
 ```
 
+## How do Server and Client Components work in Next.js?
+
+### On the server
+
+On the server, Next.js uses React's APIs to orchestrate rendering. The rendering work is split into chunks, by individual route segments ([layouts and pages](/docs/app/getting-started/layouts-and-pages)):
+
+- **Server Components** are rendered into a special data format called the React Server Component Payload (RSC Payload).
+- **Client Components** and the RSC Payload are used to [prerender](/docs/app/getting-started/partial-prerendering#how-does-partial-prerendering-work) HTML.
+
+> **What is the React Server Component Payload (RSC)?**
+>
+> The RSC Payload is a compact binary representation of the rendered React Server Components tree. It's used by React on the client to update the browser's DOM. The RSC Payload contains:
+>
+> - The rendered result of Server Components
+> - Placeholders for where Client Components should be rendered and references to their JavaScript files
+> - Any props passed from a Server Component to a Client Component
+
+### On the client (first load)
+
+Then, on the client:
+
+1. **HTML** is used to immediately show a fast non-interactive preview of the route to the user.
+2. **RSC Payload** is used to reconcile the Client and Server Component trees.
+3. **JavaScript** is used to hydrate Client Components and make the application interactive.
+
+> **What is hydration?**
+>
+> Hydration is React's process for attaching [event handlers](https://react.dev/learn/responding-to-events) to the DOM, to make the static HTML interactive.
+
+### Subsequent Navigations
+
+On subsequent navigations:
+
+- The **RSC Payload** is prefetched and cached for instant navigation.
+- **Client Components** are rendered entirely on the client, without the server-rendered HTML.
+
 ## Examples
 
 ### Using Client Components
@@ -186,7 +185,7 @@ export default function Search() {
 }
 ```
 
-```tsx filename="app/ui/search.tsx" highlight={1} switcher
+```jsx filename="app/ui/search.js" highlight={1} switcher
 'use client'
 
 export default function Search() {
@@ -508,9 +507,19 @@ export default function Page() {
 
 ### Preventing environment poisoning
 
-JavaScript modules can be shared between both Server and Client Components modules. This means it's possible to accidentanlly import server-only code into the client.
+JavaScript modules can be shared between both Server and Client Components modules. This means it's possible to accidentanlly import server-only code into the client. For example, consider the following function:
 
-For example, take the following function:
+```ts filename="lib/data.ts" switcher
+export async function getData() {
+  const res = await fetch('https://external-service.com/data', {
+    headers: {
+      authorization: process.env.API_KEY,
+    },
+  })
+
+  return res.json()
+}
+```
 
 ```js filename="lib/data.js" switcher
 export async function getData() {
@@ -554,4 +563,4 @@ export async function getData() {
 
 Now, if you try to import the module into a Client Component, there will be a build-time error.
 
-> **Good to know**: The corresponding [`client-only` package](https://www.npmjs.com/package/client-only) can be used to mark modules that contain client-only code – for example, code that accesses the `window` object.
+> **Good to know**: The corresponding [`client-only` package](https://www.npmjs.com/package/client-only) can be used to mark modules that contain client-only logic like code that accesses the `window` object.

apps/docs/content/en/docs/01-app/01-getting-started/09-fetching-data.mdx renamed to apps/docs/content/en/docs/01-app/01-getting-started/08-fetching-data.mdx

@@ -177,7 +177,7 @@ export default function Posts({ posts }) {
 }
 ```
 
-In the example above, you need to wrap the `<Posts />` component in a [`<Suspense>` boundary](https://react.dev/reference/react/Suspense). This means the fallback will be shown while the promise is being resolved. Learn more about [streaming](#streaming).
+In the example above, the `<Posts>` component is wrapped in a [`<Suspense>` boundary](https://react.dev/reference/react/Suspense). This means the fallback will be shown while the promise is being resolved. Learn more about [streaming](#streaming).
 
 #### Community libraries
 
@@ -238,7 +238,7 @@ export default function BlogPage() {
 
 > **Warning:** The content below assumes the [`dynamicIO` config option](/docs/app/api-reference/config/next-config-js/dynamicIO) is enabled in your application. The flag was introduced in Next.js 15 canary.
 
-When using `async/await` in Server Components, Next.js will opt into **dynamic rendering**. This means the data will be fetched and rendered on the server for every user request. If there are any slow data requests, the whole route will be blocked from rendering.
+When using `async/await` in Server Components, Next.js will opt into [dynamic rendering](/docs/app/getting-started/partial-prerendering#dynamic-rendering). This means the data will be fetched and rendered on the server for every user request. If there are any slow data requests, the whole route will be blocked from rendering.
 
 To improve the initial load time and user experience, you can use streaming to break up the page's HTML into smaller chunks and progressively send those chunks from the server to the client.
 
@@ -252,8 +252,8 @@ To improve the initial load time and user experience, you can use streaming to b
 
 There are two ways you can implement streaming in your application:
 
-1. With the [`loading.js` file](#with-loadingjs)
-2. With React's [`<Suspense>` component](#with-suspense)
+1. Wrapping a page with a [`loading.js` file](#with-loadingjs)
+2. Wrapping a component with [`<Suspense>`](#with-suspense)
 
 ### With `loading.js`
 

apps/docs/content/en/docs/01-app/01-getting-started/10-updating-data.mdx renamed to apps/docs/content/en/docs/01-app/01-getting-started/09-updating-data.mdx

@@ -13,6 +13,16 @@ related:
 
 You can update data in Next.js using React's [Server Functions](https://react.dev/reference/rsc/server-functions). This page will go through how you can [create](#creating-server-functions) and [invoke](#invoking-server-functions) Server Functions.
 
+## Server Functions
+
+A Server Function is an asynchronous function that is executed on the server. Server Functions are inherently asynchronous because they are invoked by the client using a network request. When invoked as part of an `action`, they are also called **Server Actions**.
+
+By convention, an `action` is an asynchronous function passed to `startTransition`. Server Functions are automatically wrapped with `startTransition` when:
+
+- Passed to a `<form>` using the `action` prop,
+- Passed to a `<button>` using the `formAction` prop
+- Passed to `useActionState`
+
 ## Creating Server Functions
 
 A Server Function can be defined by using the [`use server`](https://react.dev/reference/rsc/use-server) directive. You can place the directive at the top of an **asynchronous** function to mark the function as a Server Function, or at the top of a separate file to mark all exports of that file.

apps/docs/content/en/docs/01-app/01-getting-started/11-error-handling.mdx renamed to apps/docs/content/en/docs/01-app/01-getting-started/10-error-handling.mdx

@@ -52,7 +52,7 @@ A component becomes dynamic if it uses the following APIs:
 - [`unstable_noStore`](/docs/app/api-reference/functions/unstable_noStore)
 - [`fetch`](/docs/app/api-reference/functions/fetch) with `{ cache: 'no-store' }`
 
-In Partial Prerendering, using the APIs throws a special React error that informs Next.js the component cannot be statically rendered, causing a build error. You can use [Suspense](#suspense) to defer rendering until runtime.
+In Partial Prerendering, using these APIs throws a special React error that informs Next.js the component cannot be statically rendered, causing a build error. You can use a [Suspense](#suspense) boundary to wrap your component to defer rendering until runtime.
 
 ### Suspense
 

apps/docs/content/en/docs/01-app/01-getting-started/08-partial-prerendering.mdx renamed to apps/docs/content/en/docs/01-app/01-getting-started/11-partial-prerendering.mdx

@@ -46,7 +46,7 @@ export default function Page() {
 
 ### Client Components
 
-To call a Server Action in a Client Component, create a new file and add the `"use server"` directive at the top of it. All exported functions within the file will be marked as Server Actions that can be reused in both Client and Server Components:
+To call a [Server Function](/docs/app/getting-started/updating-data#server-functions) in a Client Component, create a new file and add the `"use server"` directive at the top of it. All exported functions within the file will be marked as Server Functions that can be reused in both Client and Server Components:
 
 ```tsx filename="app/actions.ts" switcher
 'use server'
@@ -671,20 +671,20 @@ You can use the React [`useEffect`](https://react.dev/reference/react/useEffect)
 'use client'
 
 import { incrementViews } from './actions'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useTransition } from 'react'
 
 export default function ViewCount({ initialViews }: { initialViews: number }) {
   const [views, setViews] = useState(initialViews)
+  const [isPending, startTransition] = useTransition()
 
   useEffect(() => {
-    const updateViews = async () => {
+    starTransition(async () => {
       const updatedViews = await incrementViews()
       setViews(updatedViews)
-    }
-
-    updateViews()
+    })
   }, [])
 
+  // You can use `isPending` to give users feedback
   return <p>Total Views: {views}</p>
 }
 ```
@@ -693,20 +693,20 @@ export default function ViewCount({ initialViews }: { initialViews: number }) {
 'use client'
 
 import { incrementViews } from './actions'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useTransition } from 'react'
 
-export default function ViewCount({ initialViews }: { initialViews: number }) {
+export default function ViewCount({ initialViews }) {
   const [views, setViews] = useState(initialViews)
+  const [isPending, startTransition] = useTransition()
 
   useEffect(() => {
-    const updateViews = async () => {
+    starTransition(async () => {
       const updatedViews = await incrementViews()
       setViews(updatedViews)
-    }
-
-    updateViews()
+    })
   }, [])
 
+  // You can use `isPending` to give users feedback
   return <p>Total Views: {views}</p>
 }
 ```

apps/docs/content/en/docs/01-app/03-building-your-application/02-data-fetching/03-server-actions-and-mutations.mdx

@@ -54,5 +54,5 @@ function connection(): Promise<void>
 
 | Version      | Changes                  |
 | ------------ | ------------------------ |
-| `v15.0.0`    | `connection` stabilized. |
-| `v15.0.0-RC` | `connection` introduced. |
+| `v15.0.0`    | `connection` stabilized. |
+| `v15.0.0-RC` | `connection` introduced. |