diff --git a/apps/docs/content/zh-hant/docs/01-app/01-getting-started/02-project-structure.mdx b/apps/docs/content/zh-hant/docs/01-app/01-getting-started/02-project-structure.mdx index 51787ed4..bd5bef74 100644 --- a/apps/docs/content/zh-hant/docs/01-app/01-getting-started/02-project-structure.mdx +++ b/apps/docs/content/zh-hant/docs/01-app/01-getting-started/02-project-structure.mdx @@ -203,8 +203,6 @@ Next.js 對於如何組織和共置專案檔案**沒有強制規範**。但它 height="863" /> - - ### 檔案共置 (Colocation) 在 `app` 目錄中，巢狀資料夾定義了路由結構。每個資料夾代表一個路由區段 (route segment)，對應到 URL 路徑中的相應區段。 diff --git a/apps/docs/content/zh-hant/docs/01-app/01-getting-started/10-updating-data.mdx b/apps/docs/content/zh-hant/docs/01-app/01-getting-started/10-updating-data.mdx index a42d3370..e9771cc5 100644 --- a/apps/docs/content/zh-hant/docs/01-app/01-getting-started/10-updating-data.mdx +++ b/apps/docs/content/zh-hant/docs/01-app/01-getting-started/10-updating-data.mdx @@ -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 @@ -17,9 +17,9 @@ related: ## 伺服器函式 -伺服器函式是一種在伺服器端執行的非同步函式。由於它們是透過客戶端發送網路請求來呼叫的，因此本質上是非同步的。當作為 `action` 的一部分被呼叫時，它們也被稱為**伺服器動作 (Server Actions)**。 +伺服器函式是在伺服器端執行的非同步函式。由於是透過客戶端發送網路請求來呼叫，伺服器函式本質上是非同步的。當作為 `action` 的一部分被呼叫時，它們也被稱為**伺服器動作 (Server Actions)**。 -依照慣例，`action` 是一個傳遞給 `startTransition` 的非同步函式。在以下情況下，伺服器函式會自動被 `startTransition` 包裝： +按照慣例，`action` 是傳遞給 `startTransition` 的非同步函式。在以下情況下，伺服器函式會自動被 `startTransition` 包裝： - 透過 `action` 屬性傳遞給 `
` - 透過 `formAction` 屬性傳遞給 ` ) @@ -279,7 +279,7 @@ 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' @@ -287,7 +287,7 @@ export function Button() { const [state, action, pending] = useActionState(createPost, false) return ( - ) @@ -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' diff --git a/apps/docs/content/zh-hant/docs/01-app/02-guides/authentication.mdx b/apps/docs/content/zh-hant/docs/01-app/02-guides/authentication.mdx index 553967ad..a4455b44 100644 --- a/apps/docs/content/zh-hant/docs/01-app/02-guides/authentication.mdx +++ b/apps/docs/content/zh-hant/docs/01-app/02-guides/authentication.mdx @@ -300,8 +300,6 @@ export default function SignupForm() { > - 在 React 19 中，`useFormStatus` 包含返回物件上的其他鍵，如 data、method 和 action。如果您未使用 React 19，則僅有 `pending` 鍵可用。 > - 在變更資料之前，您應始終確保使用者也有權執行該操作。請參閱[身份驗證與授權](#authorization)。 - - #### 3. 建立使用者或驗證使用者憑證 驗證表單欄位後，您可以透過呼叫驗證提供者的 API 或資料庫來建立新使用者帳戶或檢查使用者是否存在。 diff --git a/apps/docs/content/zh-hant/docs/01-app/02-guides/memory-usage.mdx b/apps/docs/content/zh-hant/docs/01-app/02-guides/memory-usage.mdx index 7f3268c5..b51e0521 100644 --- a/apps/docs/content/zh-hant/docs/01-app/02-guides/memory-usage.mdx +++ b/apps/docs/content/zh-hant/docs/01-app/02-guides/memory-usage.mdx @@ -1,44 +1,44 @@ --- -source-updated-at: 2025-05-16T04:52:11.000Z -translation-updated-at: 2025-05-25T20:38:54.654Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-05T23:39:59.602Z title: 如何優化記憶體使用 nav_title: 記憶體使用 -description: 在開發與生產環境中優化應用程式的記憶體使用。 +description: 優化應用程式在開發和生產環境中的記憶體使用。 --- 隨著應用程式功能日益豐富，在本地開發或建立生產版本時可能會需要更多資源。 -讓我們探討一些優化記憶體的策略與技巧，並解決 Next.js 中常見的記憶體問題。 +讓我們探討一些優化記憶體的策略和技巧，並解決 Next.js 中常見的記憶體問題。 -## 減少依賴套件數量 +## 減少依賴項數量 -應用程式若依賴大量套件，將會使用更多記憶體。 +擁有大量依賴項的應用程式會使用更多記憶體。 -[套件分析工具 (Bundle Analyzer)](/docs/app/guides/package-bundling) 可協助您找出應用程式中可能移除的大型依賴套件，以提升效能並降低記憶體使用量。 +[套件分析工具 (Bundle Analyzer)](/docs/app/guides/package-bundling) 可以幫助您檢查應用程式中可能移除的大型依賴項，以提升效能和記憶體使用效率。 ## 嘗試 `experimental.webpackMemoryOptimizations` -從 `v15.0.0` 開始，您可以在 `next.config.js` 檔案中加入 `experimental.webpackMemoryOptimizations: true`，這會改變 Webpack 的行為以降低最大記憶體使用量，但可能會略微增加編譯時間。 +從 `v15.0.0` 開始，您可以在 `next.config.js` 檔案中加入 `experimental.webpackMemoryOptimizations: true`，這會改變 Webpack 的行為以減少最大記憶體使用量，但可能會輕微增加編譯時間。 -> **須知**：此功能目前處於實驗階段，需先在更多專案上測試，但被認為是低風險的。 +> **須知**：此功能目前處於實驗階段，需要更多專案測試，但被認為是低風險的。 ## 使用 `--experimental-debug-memory-usage` 執行 `next build` -從 `14.2.0` 開始，您可以執行 `next build --experimental-debug-memory-usage`，在此模式下 Next.js 會在整個建置過程中持續輸出記憶體使用資訊，例如堆積使用量與垃圾回收統計數據。當記憶體使用量接近設定上限時，也會自動拍攝堆積快照。 +從 `14.2.0` 開始，您可以執行 `next build --experimental-debug-memory-usage`，在此模式下 Next.js 會在整個建置過程中持續輸出記憶體使用資訊，例如堆積使用情況和垃圾回收統計數據。當記憶體使用接近設定的限制時，也會自動拍攝堆積快照。 -> **須知**：此功能與 Webpack 建置工作選項不相容，除非您有自訂的 webpack 設定，否則該選項會自動啟用。 +> **須知**：此功能與 Webpack 建置工作選項不相容，除非您有自訂的 webpack 配置，否則該選項會自動啟用。 -## 記錄堆積分析檔 +## 記錄堆積分析檔案 -為了找出記憶體問題，您可以從 Node.js 記錄堆積分析檔，並在 Chrome DevTools 中載入以識別潛在的記憶體洩漏來源。 +為了尋找記憶體問題，您可以從 Node.js 記錄堆積分析檔案，並在 Chrome DevTools 中載入以識別潛在的記憶體洩漏來源。 -在終端機中，啟動 Next.js 建置時傳遞 `--heap-prof` 參數給 Node.js： +在終端機中，啟動 Next.js 建置時傳遞 `--heap-prof` 標記給 Node.js： ```sh node --heap-prof node_modules/next/dist/bin/next build ``` -建置結束時，Node.js 會建立一個 `.heapprofile` 檔案。 +在建置結束時，Node.js 會建立一個 `.heapprofile` 檔案。 在 Chrome DevTools 中，您可以開啟「Memory」分頁並點擊「Load Profile」按鈕來視覺化該檔案。 @@ -46,31 +46,31 @@ node --heap-prof node_modules/next/dist/bin/next build 您可以使用檢查工具來分析應用程式的記憶體使用情況。 -執行 `next build` 或 `next dev` 指令時，在指令開頭加入 `NODE_OPTIONS=--inspect`。這會在預設連接埠上暴露檢查代理程式。若您希望在執行任何使用者程式碼前中斷，可以改傳遞 `--inspect-brk`。當程序執行時，您可以使用 Chrome DevTools 等工具連接到偵錯連接埠，記錄並分析堆積快照以查看哪些記憶體被保留。 +執行 `next build` 或 `next dev` 指令時，在指令開頭加入 `NODE_OPTIONS=--inspect`。這會在預設連接埠上公開檢查代理程式。如果您希望在執行任何使用者程式碼前中斷，可以改為傳遞 `--inspect-brk`。當程序執行時，您可以使用 Chrome DevTools 等工具連接到偵錯連接埠，記錄並分析堆積快照以查看哪些記憶體被保留。 -從 `14.2.0` 開始，您也可以使用 `--experimental-debug-memory-usage` 參數執行 `next build`，讓拍攝堆積快照更簡單。 +從 `14.2.0` 開始，您也可以使用 `--experimental-debug-memory-usage` 標記執行 `next build`，使拍攝堆積快照更加容易。 -在此模式下執行時，您可以隨時向程序發送 `SIGUSR2` 信號，程序會拍攝堆積快照。 +在此模式下執行時，您可以在任何時間點向程序發送 `SIGUSR2` 信號，程序會拍攝堆積快照。 -堆積快照會儲存在 Next.js 應用程式的專案根目錄中，可載入到任何堆積分析工具（如 Chrome DevTools）中查看保留的記憶體。此模式目前尚不支援 Webpack 建置工作。 +堆積快照會儲存到 Next.js 應用程式的專案根目錄，並可載入到任何堆積分析工具（如 Chrome DevTools）中查看保留的記憶體。此模式目前尚不支援 Webpack 建置工作。 -更多資訊請參閱[如何記錄與分析堆積快照](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots)。 +詳情請參閱 [如何記錄和分析堆積快照](https://developer.chrome.com/docs/devtools/memory-problems/heap-snapshots)。 ## Webpack 建置工作 -Webpack 建置工作讓您能在獨立的 Node.js 工作程序中執行 Webpack 編譯，這會降低建置期間應用程式的記憶體使用量。 +Webpack 建置工作允許您在獨立的 Node.js 工作執行緒中執行 Webpack 編譯，這會減少建置期間應用程式的記憶體使用量。 -從 `v14.1.0` 開始，若您的應用程式沒有自訂 Webpack 設定，此選項會預設啟用。 +從 `v14.1.0` 開始，如果您的應用程式沒有自訂 Webpack 配置，此選項會自動啟用。 -如果您使用較舊版本的 Next.js 或有自訂 Webpack 設定，可以在 `next.config.js` 中設定 `experimental.webpackBuildWorker: true` 來啟用此選項。 +如果您使用較舊版本的 Next.js 或有自訂 Webpack 配置，可以透過在 `next.config.js` 中設定 `experimental.webpackBuildWorker: true` 來啟用此選項。 -> **須知**：此功能可能與所有自訂 Webpack 外掛不相容。 +> **須知**：此功能可能與部分自訂 Webpack 外掛不相容。 ## 停用 Webpack 快取 -[Webpack 快取](https://webpack.js.org/configuration/cache/)會將產生的 Webpack 模組儲存在記憶體或硬碟中，以提升建置速度。這有助於效能，但也會增加應用程式的記憶體使用量來儲存快取資料。 +[Webpack 快取](https://webpack.js.org/configuration/cache/) 會將生成的 Webpack 模組儲存在記憶體或磁碟中，以提升建置速度。這有助於效能，但也會增加應用程式的記憶體使用量來儲存快取資料。 -您可以透過為應用程式新增[自訂 Webpack 設定](/docs/app/api-reference/config/next-config-js/webpack)來停用此行為： +您可以透過為應用程式新增 [自訂 Webpack 配置](/docs/app/api-reference/config/next-config-js/webpack) 來停用此行為： ```js filename="next.config.mjs" /** @type {import('next').NextConfig} */ @@ -84,7 +84,7 @@ const nextConfig = { type: 'memory', }) } - // 重要：回傳修改後的設定 + // 重要：回傳修改後的配置 return config }, } @@ -94,18 +94,18 @@ export default nextConfig ## 停用靜態分析 -型別檢查與程式碼檢查可能會消耗大量記憶體，特別是在大型專案中。然而，多數專案已有專用的 CI 執行器來處理這些任務。當建置在「Linting and checking validity of types」步驟中發生記憶體不足問題時，您可以在建置期間停用這些任務： +類型檢查和程式碼檢查可能會消耗大量記憶體，特別是在大型專案中。然而，大多數專案都有專門的 CI 執行器來處理這些任務。當建置在「Linting and checking validity of types」步驟中出現記憶體不足問題時，您可以在建置期間停用這些任務： ```js filename="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { - // 警告：即使專案有 ESLint 錯誤，此設定仍允許生產建置成功完成。 + // 警告：即使專案中有 ESLint 錯誤，這也允許生產建置成功完成。 ignoreDuringBuilds: true, }, typescript: { // !! 警告 !! - // 即使專案有型別錯誤，仍危險地允許生產建置成功完成。 + // 即使專案中有類型錯誤，也允許生產建置成功完成。 // !! 警告 !! ignoreBuildErrors: true, }, @@ -115,18 +115,51 @@ export default nextConfig ``` - [忽略 TypeScript 錯誤](/docs/app/api-reference/config/typescript#disabling-typescript-errors-in-production) -- [Next.js 設定中的 ESLint](/docs/pages/api-reference/config/next-config-js/eslint) +- [Next.js 配置中的 ESLint](/docs/pages/api-reference/config/next-config-js/eslint) -請注意，這可能會因型別錯誤或程式碼檢查問題而導致部署失敗。我們強烈建議僅在靜態分析完成後才將建置推送到生產環境。如果您部署到 Vercel，可以查看[預覽部署指南](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment)了解如何在自訂任務成功後將建置推送到生產環境。 +請注意，這可能會因類型錯誤或程式碼檢查問題而導致部署失敗。我們強烈建議僅在靜態分析完成後將建置推送到生產環境。如果您部署到 Vercel，可以查看 [預部署指南](https://vercel.com/docs/deployments/managing-deployments#staging-and-promoting-a-production-deployment) 了解如何在自訂任務成功後將建置推送到生產環境。 -## 停用原始碼對應 +## 停用原始碼映射 -產生原始碼對應會在建置過程中消耗額外記憶體。 +生成原始碼映射會在建置過程中消耗額外記憶體。 -您可以透過在 Next.js 設定中加入 `productionBrowserSourceMaps: false` 和 `experimental.serverSourceMaps: false` 來停用原始碼對應的產生。 +您可以透過在 Next.js 配置中新增 `productionBrowserSourceMaps: false` 和 `experimental.serverSourceMaps: false` 來停用原始碼映射生成。 -> **須知**：某些外掛可能會啟用原始碼對應，可能需要自訂設定才能停用。 +> **須知**：某些外掛可能會開啟原始碼映射，可能需要自訂配置來停用。 ## Edge 記憶體問題 -Next.js `v14.1.3` 修復了使用 Edge 執行環境時的記憶體問題。請更新至此版本（或更新版本）以確認是否解決您的問題。 \ No newline at end of file +Next.js `v14.1.3` 修復了使用 Edge 運行時時的記憶體問題。請更新到此版本（或更高版本）以查看是否解決了您的問題。 + +## 預載入項目 + +當 Next.js 伺服器啟動時，它會將每個頁面的 JavaScript 模組預載入記憶體，而不是在請求時載入。 + +此優化以較大的初始記憶體佔用為代價，換取更快的回應時間。 + +要停用此優化，請將 `experimental.preloadEntriesOnStart` 標記設為 `false`。 + +```ts filename="next.config.ts" switcher +import type { NextConfig } from 'next' + +const config: NextConfig = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +```js filename="next.config.mjs" switcher +/** @type {import('next').NextConfig} */ +const config = { + experimental: { + preloadEntriesOnStart: false, + }, +} + +export default config +``` + +Next.js 不會卸載這些 JavaScript 模組，這意味著即使停用此優化，如果所有頁面最終都被請求，您的 Next.js 伺服器的記憶體佔用最終也會相同。 \ No newline at end of file diff --git a/apps/docs/content/zh-hant/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx b/apps/docs/content/zh-hant/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx index 3b56f3ba..9a9f895b 100644 --- a/apps/docs/content/zh-hant/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx +++ b/apps/docs/content/zh-hant/docs/01-app/05-api-reference/04-functions/generate-metadata.mdx @@ -1,11 +1,11 @@ --- -source-updated-at: 2025-06-01T01:32:20.000Z -translation-updated-at: 2025-06-01T22:35:10.762Z +source-updated-at: 2025-06-05T15:29:30.000Z +translation-updated-at: 2025-06-05T23:45:47.982Z title: generateMetadata -description: 了解如何為您的 Next.js 應用程式添加元數據 (Metadata) 以提升搜尋引擎優化 (SEO) 和網頁分享性。 +description: 了解如何為您的 Next.js 應用程式添加元數據 (Metadata) 以提升搜尋引擎優化 (SEO) 和網頁分享性 related: - title: 後續步驟 - description: 查看所有元數據 API 選項。 + title: 下一步 + description: 查看所有元數據 API 選項 links: - app/api-reference/file-conventions/metadata - app/api-reference/functions/generate-viewport @@ -15,7 +15,7 @@ related: ## `metadata` 物件 -要定義靜態元數據，請從 `layout.js` 或 `page.js` 檔案匯出一個 [`Metadata` 物件](#metadata-fields)。 +要定義靜態元數據，可以從 `layout.js` 或 `page.js` 檔案匯出一個 [`Metadata` 物件](#metadata-fields)。 ```tsx filename="layout.tsx | page.tsx" switcher import type { Metadata } from 'next' @@ -37,11 +37,11 @@ export const metadata = { export default function Page() {} ``` -> 查看 [Metadata Fields](#metadata-fields) 以獲取完整支援的選項列表。 +> 完整支援的選項清單請參閱 [元數據欄位](#metadata-fields)。 ## `generateMetadata` 函數 -動態元數據依賴於**動態資訊**，例如當前路由參數、外部數據或父區段的 `metadata`，可以透過匯出一個返回 [`Metadata` 物件](#metadata-fields) 的 `generateMetadata` 函數來設定。 +依賴於**動態資訊**的元數據，例如當前路由參數、外部數據或父區段的 `metadata`，可以透過匯出一個返回 [`Metadata` 物件](#metadata-fields) 的 `generateMetadata` 函數來設定。 ```tsx filename="app/products/[id]/page.tsx" switcher import type { Metadata, ResolvingMetadata } from 'next' @@ -61,7 +61,7 @@ export async function generateMetadata( // 獲取數據 const product = await fetch(`https://.../${id}`).then((res) => res.json()) - // 可選地訪問並擴展（而非替換）父元數據 + // 可選地存取並擴展 (而非替換) 父元數據 const previousImages = (await parent).openGraph?.images || [] return { @@ -83,7 +83,7 @@ export async function generateMetadata({ params, searchParams }, parent) { // 獲取數據 const product = await fetch(`https://.../${id}`).then((res) => res.json()) - // 可選地訪問並擴展（而非替換）父元數據 + // 可選地存取並擴展 (而非替換) 父元數據 const previousImages = (await parent).openGraph?.images || [] return { @@ -97,15 +97,15 @@ export async function generateMetadata({ params, searchParams }, parent) { export default function Page({ params, searchParams }) {} ``` -> **須知**： +> **須知事項**: > > - 元數據可以添加到 `layout.js` 和 `page.js` 檔案中。 -> - Next.js 會自動解析元數據，並為頁面創建相關的 `` 標籤。 -> - `metadata` 物件和 `generateMetadata` 函數匯出**僅在伺服器元件 (Server Components) 中支援**。 -> - 您不能從同一路由區段同時匯出 `metadata` 物件和 `generateMetadata` 函數。 -> - `generateMetadata` 中的 `fetch` 請求會自動[記憶化](/docs/app/deep-dive/caching#request-memoization)，以便在 `generateMetadata`、`generateStaticParams`、Layouts、Pages 和 Server Components 之間共享相同的數據。 +> - Next.js 會自動解析元數據，並為頁面建立相關的 `` 標籤。 +> - `metadata` 物件和 `generateMetadata` 函數匯出**僅在伺服器元件 (Server Components)** 中支援。 +> - 您不能從同一個路由區段同時匯出 `metadata` 物件和 `generateMetadata` 函數。 +> - `generateMetadata` 中的 `fetch` 請求會自動[記憶化 (memoized)](/docs/app/deep-dive/caching#request-memoization)，以便在 `generateMetadata`、`generateStaticParams`、Layouts、Pages 和 Server Components 之間共享相同數據。 > - 如果無法使用 `fetch`，可以使用 React 的 [`cache` 函數](/docs/app/deep-dive/caching#react-cache-function)。 -> - [基於檔案的元數據](/docs/app/api-reference/file-conventions/metadata)具有更高的優先級，將覆蓋 `metadata` 物件和 `generateMetadata` 函數。 +> - [基於檔案的元數據](/docs/app/api-reference/file-conventions/metadata) 具有更高優先級，會覆蓋 `metadata` 物件和 `generateMetadata` 函數。 ## 參考 @@ -123,7 +123,7 @@ export default function Page({ params, searchParams }) {} | `app/shop/[tag]/[item]/page.js` | `/shop/1/2` | `{ tag: '1', item: '2' }` | | `app/shop/[...slug]/page.js` | `/shop/1/2` | `{ slug: ['1', '2'] }` | - - `searchParams` - 包含當前 URL 的[搜尋參數](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters)的物件。例如： + - `searchParams` - 包含當前 URL 的[查詢參數 (search params)](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL#parameters) 的物件。例如： | URL | `searchParams` | | --------------- | -------------------- | @@ -135,18 +135,18 @@ export default function Page({ params, searchParams }) {} ### 返回值 -`generateMetadata` 應返回一個包含一個或多個元數據欄位的 [`Metadata` 物件](#metadata-fields)。 +`generateMetadata` 應返回包含一個或多個元數據欄位的 [`Metadata` 物件](#metadata-fields)。 -> **須知**： +> **須知事項**: > -> - 如果元數據不依賴於運行時資訊，應使用靜態 [`metadata` 物件](#the-metadata-object)而非 `generateMetadata` 來定義。 -> - `fetch` 請求會自動[記憶化](/docs/app/deep-dive/caching#request-memoization)，以便在 `generateMetadata`、`generateStaticParams`、Layouts、Pages 和 Server Components 之間共享相同的數據。如果無法使用 `fetch`，可以使用 React 的 [`cache` 函數](/docs/app/deep-dive/caching#react-cache-function)。 +> - 如果元數據不依賴於運行時資訊，應使用靜態的 [`metadata` 物件](#the-metadata-object) 而非 `generateMetadata` 來定義。 +> - `fetch` 請求會自動[記憶化 (memoized)](/docs/app/deep-dive/caching#request-memoization)，以便在 `generateMetadata`、`generateStaticParams`、Layouts、Pages 和 Server Components 之間共享相同數據。如果無法使用 `fetch`，可以使用 React 的 [`cache` 函數](/docs/app/deep-dive/caching#react-cache-function)。 > - `searchParams` 僅在 `page.js` 區段中可用。 > - Next.js 的 [`redirect()`](/docs/app/api-reference/functions/redirect) 和 [`notFound()`](/docs/app/api-reference/functions/not-found) 方法也可以在 `generateMetadata` 中使用。 ### 元數據欄位 -以下欄位受到支援： +支援以下欄位： #### `title` @@ -160,7 +160,7 @@ export const metadata = { } ``` -```html filename=" output" hideLineNumbers +```html filename=" 輸出" hideLineNumbers Next.js ``` @@ -183,7 +183,7 @@ import type { Metadata } from 'next' export const metadata: Metadata = {} -// 輸出：Acme +// 輸出: Acme ``` ##### `template` @@ -196,7 +196,7 @@ import type { Metadata } from 'next' export const metadata: Metadata = { title: { template: '%s | Acme', - default: 'Acme', // 創建模板時需要提供 default + default: 'Acme', // 建立模板時需要提供預設值 }, } ``` @@ -205,7 +205,7 @@ export const metadata: Metadata = { export const metadata = { title: { template: '%s | Acme', - default: 'Acme', // 創建模板時需要提供 default + default: 'Acme', // 建立模板時需要提供預設值 }, } ``` @@ -217,7 +217,7 @@ export const metadata: Metadata = { title: 'About', } -// 輸出：About | Acme +// 輸出: About | Acme ``` ```jsx filename="app/about/page.js" switcher @@ -225,10 +225,10 @@ export const metadata = { title: 'About', } -// 輸出：About | Acme +// 輸出: About | Acme ``` -> **須知**： +> **須知事項**: > > - `title.template` 應用於**子**路由區段，而非定義它的區段。這意味著： > @@ -236,11 +236,11 @@ export const metadata = { > - `layout.js` 中定義的 `title.template` 不會應用於同一路由區段的 `page.js` 中定義的 `title`。 > - `page.js` 中定義的 `title.template` 無效，因為頁面始終是路由的終止區段（它沒有任何子路由區段）。 > -> - 如果路由未定義 `title` 或 `title.default`，`title.template` **無效**。 +> - 如果路由未定義 `title` 或 `title.default`，則 `title.template` **無效**。 ##### `absolute` -`title.absolute` 可用於提供一個**忽略**父區段中設定的 `title.template` 的標題。 +`title.absolute` 可用於提供**忽略**父區段中設定的 `title.template` 的標題。 ```tsx filename="app/layout.tsx" switcher import type { Metadata } from 'next' @@ -269,7 +269,7 @@ export const metadata: Metadata = { }, } -// 輸出：About +// 輸出: About ``` ```jsx filename="app/about/page.js" switcher @@ -279,21 +279,21 @@ export const metadata = { }, } -// 輸出：About +// 輸出: About ``` -> **須知**： +> **須知事項**: > > - `layout.js` > -> - `title`（字串）和 `title.default` 為未定義自己 `title` 的子區段定義預設標題。如果存在，它將擴展最接近父區段的 `title.template`。 -> - `title.absolute` 為子區段定義預設標題。它忽略父區段的 `title.template`。 +> - `title` (字串) 和 `title.default` 為未定義自己 `title` 的子區段定義預設標題。如果存在，它將擴展來自最近父區段的 `title.template`。 +> - `title.absolute` 為子區段定義預設標題。它忽略來自父區段的 `title.template`。 > - `title.template` 為子區段定義新的標題模板。 > > - `page.js` -> - 如果頁面未定義自己的標題，將使用最接近父區段的解析標題。 -> - `title`（字串）定義路由的標題。如果存在，它將擴展最接近父區段的 `title.template`。 -> - `title.absolute` 定義路由標題。它忽略父區段的 `title.template`。 +> - 如果頁面未定義自己的標題，將使用最近父區段的解析標題。 +> - `title` (字串) 定義路由的標題。如果存在，它將擴展來自最近父區段的 `title.template`。 +> - `title.absolute` 定義路由標題。它忽略來自父區段的 `title.template`。 > - `title.template` 在 `page.js` 中無效，因為頁面始終是路由的終止區段。 ### `description` @@ -304,7 +304,7 @@ export const metadata = { } ``` -```html filename=" output" hideLineNumbers +```html filename=" 輸出" hideLineNumbers ``` @@ -327,7 +327,7 @@ export const metadata = { } ``` -```html filename=" output" hideLineNumbers +```html filename=" 輸出" hideLineNumbers @@ -343,10 +343,10 @@ export const metadata = { #### `metadataBase` -`metadataBase` 是一個便利選項，用於為需要完整 URL 的 `metadata` 欄位設置基礎 URL 前綴。 +`metadataBase` 是一個便利選項，用於為需要完整 URL 的 `metadata` 欄位設定基礎 URL 前綴。 - `metadataBase` 允許**當前路由區段及以下**定義的基於 URL 的 `metadata` 欄位使用**相對路徑**，而非原本需要的絕對 URL。 -- 欄位的相對路徑將與 `metadataBase` 組合，形成完整的 URL。 +- 欄位的相對路徑將與 `metadataBase` 組合形成完整的 URL。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -364,28 +364,28 @@ export const metadata = { } ``` -```html filename=" output" hideLineNumbers +```html filename=" 輸出" hideLineNumbers ``` -> **須知**： +> **須知事項**: > -> - `metadataBase` 通常設置在根 `app/layout.js` 中，以應用於所有路由的基於 URL 的 `metadata` 欄位。 -> - 所有需要絕對 URL 的基於 URL 的 `metadata` 欄位都可以配置 `metadataBase` 選項。 -> - `metadataBase` 可以包含子域名（例如 `https://app.acme.com`）或基礎路徑（例如 `https://acme.com/start/from/here`）。 -> - 如果 `metadata` 欄位提供絕對 URL，`metadataBase` 將被忽略。 -> - 在未配置 `metadataBase` 的情況下使用基於 URL 的 `metadata` 欄位的相對路徑將導致建置錯誤。 +> - `metadataBase` 通常設定在根目錄的 `app/layout.js` 中，以應用於所有路由的基於 URL 的 `metadata` 欄位。 +> - 所有需要絕對 URL 的基於 URL 的 `metadata` 欄位都可以透過 `metadataBase` 選項進行設定。 +> - `metadataBase` 可以包含子網域，例如 `https://app.acme.com` 或基礎路徑，例如 `https://acme.com/start/from/here`。 +> - 如果 `metadata` 欄位提供了絕對 URL，則 `metadataBase` 將被忽略。 +> - 在未設定 `metadataBase` 的情況下在基於 URL 的 `metadata` 欄位中使用相對路徑會導致建置錯誤。 > - Next.js 會標準化 `metadataBase`（例如 `https://acme.com/`）和相對欄位（例如 `/path`）之間的重複斜線為單一斜線（例如 `https://acme.com/path`）。 #### URL 組合 -URL 組合優先考慮開發者意圖，而非預設的目錄遍歷語義。 +URL 組合優先考慮開發者意圖而非預設的目錄遍歷語義。 - `metadataBase` 和 `metadata` 欄位之間的尾部斜線會被標準化。 -- `metadata` 欄位中的「絕對」路徑（通常會替換整個 URL 路徑）被視為「相對」路徑（從 `metadataBase` 的末尾開始）。 +- `metadata` 欄位中的「絕對」路徑（通常會替換整個 URL 路徑）會被視為「相對」路徑（從 `metadataBase` 的末尾開始）。 例如，給定以下 `metadataBase`： @@ -496,7 +496,7 @@ export const metadata = { ``` -> **小知識**: +> **須知事項**: > > - 對於 Open Graph 圖片，使用 [檔案式 Metadata API](/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif) 可能更方便。檔案式 API 會自動為你生成正確的中繼資料，而不需要手動同步設定檔與實際檔案。 @@ -532,7 +532,7 @@ export const metadata: Metadata = { ### `icons` -> **小知識**: 我們建議盡可能使用 [檔案式 Metadata API](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) 來設定圖示。檔案式 API 會自動為你生成正確的中繼資料，而不需要手動同步設定檔與實際檔案。 +> **須知事項**：建議盡可能使用 [檔案式 Metadata API](/docs/app/api-reference/file-conventions/metadata/app-icons#image-files-ico-jpg-png) 來設定圖示。檔案式 API 會自動生成正確的中繼資料，而不需要手動同步設定檔與實際檔案。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -599,19 +599,19 @@ export const metadata = { /> ``` -> **小知識**: Chromium 版本的 Microsoft Edge 不再支援 `msapplication-*` 中繼標籤，因此不再需要這些標籤。 +> **須知事項**：Chromium 版本的 Microsoft Edge 已不再支援 `msapplication-*` 元標籤，因此不再需要這些標籤。 ### `themeColor` -> **已棄用**: 從 Next.js 14 開始，`metadata` 中的 `themeColor` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 +> **已棄用**：從 Next.js 14 開始，`metadata` 中的 `themeColor` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 ### `colorScheme` -> **已棄用**: 從 Next.js 14 開始，`metadata` 中的 `colorScheme` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 +> **已棄用**：從 Next.js 14 開始，`metadata` 中的 `colorScheme` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 ### `manifest` -網頁應用程式清單，定義於 [Web Application Manifest 規範](https://developer.mozilla.org/docs/Web/Manifest)。 +網頁應用程式清單 (Web Application Manifest)，定義於 [網頁應用程式清單規範](https://developer.mozilla.org/docs/Web/Manifest)。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -625,9 +625,9 @@ export const metadata = { ### `twitter` -Twitter 規範 (令人驚訝地) 不僅僅用於 X (原 Twitter)。 +Twitter 規範（令人驚訝地）不僅僅用於 X（原 Twitter）。 -了解更多關於 [Twitter Card 標記參考](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup)。 +了解更多關於 [Twitter 卡片標記參考](https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup)。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -703,7 +703,7 @@ export const metadata = { ### `viewport` -> **已棄用**: 從 Next.js 14 開始，`metadata` 中的 `viewport` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 +> **已棄用**：從 Next.js 14 開始，`metadata` 中的 `viewport` 選項已被棄用。請改用 [`viewport` 設定](/docs/app/api-reference/functions/generate-viewport)。 ### `verification` @@ -840,7 +840,7 @@ export const metadata = { ### `archives` -描述具有歷史價值的記錄、文件或其他材料的集合 ([來源](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives))。 +描述具有歷史價值的記錄、文件或其他材料的集合（[來源](https://www.w3.org/TR/2011/WD-html5-20110113/links.html#rel-archives)）。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -892,7 +892,7 @@ export const metadata = { 你可以將 Facebook 應用程式或 Facebook 帳戶連接到你的網頁，以使用某些 Facebook 社交插件 [Facebook 文件](https://developers.facebook.com/docs/plugins/comments/#moderation-setup-instructions) -> **小知識**: 你可以指定 appId 或 admins，但不能同時指定兩者。 +> **須知事項**：你可以指定 appId 或 admins，但不能同時指定兩者。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -918,7 +918,7 @@ export const metadata = { ``` -如果你想生成多個 fb:admins 中繼標籤，可以使用陣列值。 +如果你想生成多個 fb:admins 元標籤，可以使用陣列值。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -951,7 +951,7 @@ export const metadata = { ### `other` -所有中繼資料選項都應透過內建支援涵蓋。然而，可能會有特定於你的網站的自訂中繼資料標籤，或是剛發布的全新中繼資料標籤。你可以使用 `other` 選項來渲染任何自訂中繼資料標籤。 +所有中繼資料選項都應使用內建支援來涵蓋。然而，可能會有特定於你的網站的自訂中繼資料標籤，或是剛發布的全新中繼資料標籤。你可以使用 `other` 選項來渲染任何自訂中繼資料標籤。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -965,7 +965,7 @@ export const metadata = { ``` -如果你想生成多個相同鍵的中繼標籤，可以使用陣列值。 +如果你想生成多個相同鍵的元標籤，可以使用陣列值。 ```jsx filename="layout.js | page.js" export const metadata = { @@ -981,11 +981,11 @@ export const metadata = { ### 不支援的中繼資料 -以下中繼資料類型目前沒有內建支援。不過，它們仍然可以在佈局或頁面本身中渲染。 +以下中繼資料類型目前沒有內建支援。不過，仍然可以在佈局或頁面本身中渲染它們。 ### 類型 -你可以使用 `Metadata` 類型來為元資料添加類型安全。如果你在 IDE 中使用[內建的 TypeScript 插件](/docs/app/api-reference/config/typescript)，則不需要手動添加類型，但你仍然可以明確添加它。 +你可以使用 `Metadata` 類型為你的元資料添加類型安全。如果你在 IDE 中使用[內建的 TypeScript 插件](/docs/app/api-reference/config/typescript)，則無需手動添加類型，但你仍然可以明確添加它。 #### `metadata` 物件 @@ -1070,21 +1070,21 @@ export const metadata = { | 元資料 | 建議 | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `` | 透過 [`redirect()`](/docs/app/api-reference/functions/redirect)、[中介軟體 (Middleware)](/docs/app/building-your-application/routing/middleware#nextresponse) 或 [安全標頭 (Security Headers)](/docs/app/api-reference/config/next-config-js/headers) 使用適當的 HTTP 標頭 | -| `` | 在佈局或頁面本身渲染此標籤。 | -| `