Skip to content

Update translations #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 6, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,6 @@ Next.js 對於如何組織和共置專案檔案**沒有強制規範**。但它
height="863"
/>

</AppOnly>

### 檔案共置 (Colocation)

在 `app` 目錄中,巢狀資料夾定義了路由結構。每個資料夾代表一個路由區段 (route segment),對應到 URL 路徑中的相應區段。
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
source-updated-at: 2025-06-01T01:32:19.000Z
translation-updated-at: 2025-06-01T01:32:19.000Z
source-updated-at: 2025-06-03T15:30:49.000Z
translation-updated-at: 2025-06-05T23:40:14.407Z
title: 如何更新資料
nav_title: 更新資料
description: 學習如何在您的 Next.js 應用程式中更新資料。
description: 了解如何在您的 Next.js 應用程式中更新資料。
related:
title: API 參考
description: 透過閱讀 API 參考文件,進一步了解本頁提到的功能
description: 透過閱讀 API 參考文件深入了解本頁提到的功能
links:
- app/api-reference/functions/revalidatePath
- app/api-reference/functions/revalidateTag
Expand All @@ -17,17 +17,17 @@ related:

## 伺服器函式

伺服器函式是一種在伺服器端執行的非同步函式。由於它們是透過客戶端發送網路請求來呼叫的,因此本質上是非同步的。當作為 `action` 的一部分被呼叫時,它們也被稱為**伺服器動作 (Server Actions)**。
伺服器函式是在伺服器端執行的非同步函式。由於是透過客戶端發送網路請求來呼叫,伺服器函式本質上是非同步的。當作為 `action` 的一部分被呼叫時,它們也被稱為**伺服器動作 (Server Actions)**。

依照慣例,`action` 是一個傳遞給 `startTransition` 的非同步函式。在以下情況下,伺服器函式會自動被 `startTransition` 包裝:
按照慣例,`action` 是傳遞給 `startTransition` 的非同步函式。在以下情況下,伺服器函式會自動被 `startTransition` 包裝:

- 透過 `action` 屬性傳遞給 `<form>`
- 透過 `formAction` 屬性傳遞給 `<button>`
- 傳遞給 `useActionState`

## 建立伺服器函式

您可以使用 [`use server`](https://react.dev/reference/rsc/use-server) 指示詞來定義伺服器函式。您可以將指示詞放在**非同步**函式的頂部,將該函式標記為伺服器函式;或者放在獨立檔案的頂部,將該檔案的所有匯出標記為伺服器函式
可以使用 [`use server`](https://react.dev/reference/rsc/use-server) 指令來定義伺服器函式。您可以將指令放在**非同步**函式的頂部以標記該函式為伺服器函式,或放在獨立檔案的頂部以標記該檔案的所有導出

```ts filename="app/lib/actions.ts" switcher
export async function createPost(formData: FormData) {
Expand Down Expand Up @@ -69,7 +69,7 @@ export async function deletePost(formData) {

### 伺服器元件

在伺服器元件中,可以透過在函式主體頂部添加 `"use server"` 指示詞來內嵌伺服器函式
可以在伺服器元件中內聯伺服器函式,方法是將 `"use server"` 指令添加到函式主體的頂部

```tsx filename="app/page.tsx" switcher
export default function Page() {
Expand Down Expand Up @@ -97,7 +97,7 @@ export default function Page() {

### 客戶端元件

無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 `"use server"` 指示詞的檔案中匯入它們,在客戶端元件中呼叫這些函式
無法在客戶端元件中定義伺服器函式。但是,您可以透過從頂部帶有 `"use server"` 指令的檔案中導入它們來在客戶端元件中呼叫

```ts filename="app/actions.ts" switcher
'use server'
Expand Down Expand Up @@ -133,16 +133,16 @@ export function Button() {

## 呼叫伺服器函式

主要有兩種方式可以呼叫伺服器函式
有兩種主要方式可以呼叫伺服器函式

1. 在伺服器和客戶端元件中使用[表單](#forms)
2. 在客戶端元件中使用[事件處理器](#event-handlers)

### 表單

React 擴展了 HTML [`<form>`](https://react.dev/reference/react-dom/components/form) 元素,允許透過 HTML `action` 屬性呼叫伺服器函式。
React 擴展了 HTML [`<form>`](https://react.dev/reference/react-dom/components/form) 元素,允許使用 HTML `action` 屬性呼叫伺服器函式。

當在表單中呼叫時,函式會自動接收 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData) 物件。您可以使用原生的 [`FormData` 方法](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)來提取資料
當在表單中呼叫時,函式會自動接收 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/FormData) 物件。您可以使用原生的 [`FormData` 方法](https://developer.mozilla.org/en-US/docs/Web/API/FormData#instance_methods)提取資料

```tsx filename="app/ui/form.tsx" switcher
import { createPost } from '@/app/actions'
Expand Down Expand Up @@ -196,7 +196,7 @@ export async function createPost(formData) {
}
```

> **小知識:** 當傳遞給 `action` 屬性時,伺服器函式也被稱為 _伺服器動作_
> **小知識:** 當傳遞給 `action` 屬性時,伺服器函式也被稱為*伺服器動作*

### 事件處理器

Expand Down Expand Up @@ -256,20 +256,20 @@ export default function LikeButton({ initialLikes }) {

### 顯示處理中狀態

在執行伺服器函式時,您可以使用 React 的 [`useActionState`](https://react.dev/reference/react/useActionState) 鉤子來顯示載入指示器。該鉤子會回傳一個 `pending` 布林值:
在執行伺服器函式時,您可以使用 React 的 [`useActionState`](https://react.dev/reference/react/useActionState) 鉤子顯示載入指示器。該鉤子會返回一個 `pending` 布林值:

```tsx filename="app/ui/button.tsx" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '建立文章'}
</button>
)
Expand All @@ -279,15 +279,15 @@ export function Button() {
```jsx filename="app/ui/button.js" switcher
'use client'

import { useActionState } from 'react'
import { useActionState, startTransition } from 'react'
import { createPost } from '@/app/actions'
import { LoadingSpinner } from '@/app/ui/loading-spinner'

export function Button() {
const [state, action, pending] = useActionState(createPost, false)

return (
<button onClick={async () => action()}>
<button onClick={() => startTransition(action)}>
{pending ? <LoadingSpinner /> : '建立文章'}
</button>
)
Expand Down Expand Up @@ -323,7 +323,7 @@ export async function createPost(formData) {

### 重新導向

您可能希望在執行更新後將使用者重新導向到其他頁面。可以在伺服器函式中呼叫 [`redirect`](/docs/app/api-reference/functions/redirect) 來實現:
您可能希望在執行更新後將使用者重新導向到不同頁面。您可以在伺服器函式中呼叫 [`redirect`](/docs/app/api-reference/functions/redirect) 來實現:

```ts filename="app/lib/actions.ts" switcher
'use server'
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -300,8 +300,6 @@ export default function SignupForm() {
> - 在 React 19 中,`useFormStatus` 包含返回物件上的其他鍵,如 data、method 和 action。如果您未使用 React 19,則僅有 `pending` 鍵可用。
> - 在變更資料之前,您應始終確保使用者也有權執行該操作。請參閱[身份驗證與授權](#authorization)。

</AppOnly>

#### 3. 建立使用者或驗證使用者憑證

驗證表單欄位後,您可以透過呼叫驗證提供者的 API 或資料庫來建立新使用者帳戶或檢查使用者是否存在。
Expand Down
Loading