feat: update translation

Author: xiaoyu2er

.github/actions/vercel-build/action.yml

@@ -0,0 +1,39 @@
+name: "Vercel Build"
+description: "Build project artifacts using Vercel CLI for deployment."
+inputs:
+  environment:
+    description: "Vercel environment (production or preview)"
+    required: true
+  prodFlag:
+    description: "Set to --prod for production deploys, empty for preview"
+    required: false
+    default: ""
+  vercel_project_id:
+    required: true
+  vercel_org_id:
+    required: true
+  vercel_token:
+    required: true
+runs:
+  using: "composite"
+  steps:
+    - name: Pull Vercel Environment Information
+      run: npx vercel pull --yes --environment=${{ inputs.environment }} --token=${{ inputs.vercel_token }}
+      env:
+        VERCEL_PROJECT_ID: ${{ inputs.vercel_project_id }}
+        VERCEL_ORG_ID: ${{ inputs.vercel_org_id }}
+      shell: bash
+    - name: Echo Vercel Environment File
+      run: |
+        ls -l .vercel/.env*
+        for f in .vercel/.env*; do
+          echo "\n----- $f -----"
+          cat "$f"
+        done
+      shell: bash
+    - name: Build Project Artifacts
+      run: npx vercel build ${{ inputs.prodFlag }} --token=${{ inputs.vercel_token }}
+      env:
+        VERCEL_PROJECT_ID: ${{ inputs.vercel_project_id }}
+        VERCEL_ORG_ID: ${{ inputs.vercel_org_id }}
+      shell: bash

.github/actions/vercel-deploy/action.yml

@@ -24,26 +24,14 @@ outputs:
 runs:
   using: "composite"
   steps:
-    - name: Pull Vercel Environment Information
-      run: npx vercel pull --yes --environment=${{ inputs.environment }} --token=${{ inputs.vercel_token }}
-      env:
-        VERCEL_PROJECT_ID: ${{ inputs.vercel_project_id }}
-        VERCEL_ORG_ID: ${{ inputs.vercel_org_id }}
-      shell: bash
-    - name: Echo Vercel Environment File
-      run: |
-        ls -l .vercel/.env*
-        for f in .vercel/.env*; do
-          echo "\n----- $f -----"
-          cat "$f"
-        done
-      shell: bash
-    - name: Build Project Artifacts
-      run: npx vercel build ${{ inputs.prodFlag }} --token=${{ inputs.vercel_token }}
-      env:
-        VERCEL_PROJECT_ID: ${{ inputs.vercel_project_id }}
-        VERCEL_ORG_ID: ${{ inputs.vercel_org_id }}
-      shell: bash
+    - name: Build with Vercel
+      uses: ./.github/actions/vercel-build
+      with:
+        environment: ${{ inputs.environment }}
+        prodFlag: ${{ inputs.prodFlag }}
+        vercel_project_id: ${{ inputs.vercel_project_id }}
+        vercel_org_id: ${{ inputs.vercel_org_id }}
+        vercel_token: ${{ inputs.vercel_token }}
     - name: Deploy Project Artifacts
       id: vercel_deploy
       run: |

.github/workflows/prerelease.yml

@@ -1,19 +1,24 @@
 name: Prerelease
 
 on:
-  workflow_dispatch:
   pull_request:
     types:
       - opened
       - labeled
       - synchronize
+    branches-ignore:
+      - docs/update-translations
+      - docs/sync-nextjs-documentation
 
 permissions:
   pull-requests: write
   issues: write
 
 jobs:
   deploy:
+    if: |
+      github.event_name == 'pull_request' && 
+      contains(github.event.pull_request.labels.*.name, 'prerelease')
     runs-on: ubuntu-latest
     strategy:
       matrix:

.github/workflows/update-docs-ci.yml

@@ -7,15 +7,34 @@ on:
       - docs/sync-nextjs-documentation
 
 jobs:
-  translate:
+  deploy-and-update-index:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - locale: en
+            secret_project_id: VERCEL_PROJECT_EN_ID
+            orama_private_api_key: ORAMA_PRIVATE_API_KEY_EN
+          - locale: zh-hans
+            secret_project_id: VERCEL_PROJECT_ZH_HANS_ID
+            orama_private_api_key: ORAMA_PRIVATE_API_KEY_ZH_HANS
+          - locale: zh-hant
+            secret_project_id: VERCEL_PROJECT_ZH_HANT_ID
+            orama_private_api_key: ORAMA_PRIVATE_API_KEY_ZH_HANT
+    name: Deploy ${{ matrix.locale }}
     steps:
-      # Checkout the repository first to access local actions
       - name: Checkout code
         uses: actions/checkout@v3
         with:
           fetch-depth: 1
       - name: Setup Tools
-        # After pnpm install, apps/docs will execute postinstall: fumadocs-mdx
-        # Which will generated MDX types (check if the docs frontmatter is correct)
         uses: ./.github/actions/setup
+      - name: Build (${{ matrix.locale }})
+        id: deploy
+        uses: ./.github/actions/vercel-build
+        with:
+          environment: production
+          prodFlag: --prod
+          vercel_project_id: ${{ secrets[matrix.secret_project_id] }}
+          vercel_org_id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel_token: ${{ secrets.VERCEL_TOKEN }}

apps/docs/content/zh-hans/docs/01-app/01-getting-started/06-css.mdx

@@ -1,12 +1,12 @@
 ---
-source-updated-at: 2025-05-19T22:31:51.000Z
-translation-updated-at: 2025-05-19T23:06:25.929Z
+source-updated-at: 2025-05-25T15:16:02.000Z
+translation-updated-at: 2025-05-25T20:26:25.233Z
 title: 如何在应用中使用 CSS
 nav_title: CSS
 description: 了解在应用中添加 CSS 的不同方式，包括 CSS 模块 (CSS Modules)、全局 CSS (Global CSS)、Tailwind CSS 等。
 related:
-  title: 下一步
-  description: 进一步了解在应用中使用 CSS 的其他方式。
+  title: 后续步骤
+  description: 进一步了解在应用中使用 CSS 的其他替代方案。
   links:
     - app/guides/tailwind-css
     - app/guides/sass
@@ -24,13 +24,13 @@ Next.js 提供了多种在应用中使用 CSS 的方式，包括：
 
 ## CSS 模块 (CSS Modules)
 
-CSS 模块 (CSS Modules) 通过生成唯一的类名来实现 CSS 的局部作用域。这允许你在不同文件中使用相同的类名而无需担心命名冲突。
+CSS 模块通过生成唯一的类名来实现 CSS 的局部作用域，这样您可以在不同文件中使用相同的类名而无需担心命名冲突。
 
 <AppOnly>
 
-要开始使用 CSS 模块 (CSS Modules)，创建一个扩展名为 `.module.css` 的文件，并将其导入到 `app` 目录下的任意组件中：
+要开始使用 CSS 模块，请创建一个扩展名为 `.module.css` 的新文件，并将其导入到 `app` 目录中的任意组件：
 
-```css filename="app/blog/styles.module.css"
+```css filename="app/blog/blog.module.css"
 .blog {
   padding: 24px;
 }
@@ -56,7 +56,7 @@ export default function Layout() {
 
 <PagesOnly>
 
-要开始使用 CSS 模块 (CSS Modules)，创建一个扩展名为 `.module.css` 的文件，并将其导入到 `pages` 目录下的任意组件中：
+要开始使用 CSS 模块，请创建一个扩展名为 `.module.css` 的新文件，并将其导入到 `pages` 目录中的任意组件：
 
 ```css filename="/styles/blog.module.css"
 .blog {
@@ -84,11 +84,11 @@ export default function Page() {
 
 ## 全局 CSS (Global CSS)
 
-你可以使用全局 CSS (Global CSS) 在整个应用中应用样式。
+您可以使用全局 CSS 来为整个应用应用样式。
 
 <AppOnly>
 
-创建一个 `app/global.css` 文件，并在根布局中导入它，以将样式应用到应用中的**每个路由**：
+创建一个 `app/global.css` 文件并将其导入根布局 (root layout)，这样样式将应用到应用中的**每个路由**：
 
 ```css filename="app/global.css"
 body {
@@ -99,7 +99,7 @@ body {
 ```
 
 ```tsx filename="app/layout.tsx" switcher
-// 这些样式会应用到应用中的每个路由
+// 这些样式将应用到应用中的每个路由
 import './global.css'
 
 export default function RootLayout({
@@ -116,7 +116,7 @@ export default function RootLayout({
 ```
 
 ```jsx filename="app/layout.js" switcher
-// 这些样式会应用到应用中的每个路由
+// 这些样式将应用到应用中的每个路由
 import './global.css'
 
 export default function RootLayout({ children }) {
@@ -128,13 +128,13 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **须知：** 全局样式可以导入到 `app` 目录下的任何布局、页面或组件中。但由于 Next.js 使用 React 内置的样式表支持来与 Suspense 集成，目前这不会在路由切换时移除样式表，可能导致冲突。我们建议将全局样式用于**真正**全局的 CSS，而使用 [CSS 模块 (CSS Modules)](#css-modules) 来限定 CSS 作用域。
+> **须知：** 全局样式可以导入到 `app` 目录中的任何布局、页面或组件。但由于 Next.js 使用 React 内置的样式表支持来与 Suspense 集成，目前在不同路由之间导航时不会移除样式表，这可能导致冲突。我们建议将全局样式用于**真正**全局的 CSS，而对于局部作用域的 CSS 使用 [CSS 模块 (CSS Modules)](#css-modules)。
 
 </AppOnly>
 
 <PagesOnly>
 
-在 `pages/_app.js` 文件中导入样式表，以将样式应用到应用中的**每个路由**：
+将样式表导入 `pages/_app.js` 文件，这样样式将应用到应用中的**每个路由**：
 
 ```tsx filename="pages/_app.js"
 import '@/styles/global.css'
@@ -144,11 +144,11 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-由于样式表的全局性质，为避免冲突，你应该在 [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) 中导入它们。
+由于样式表的全局性质，为避免冲突，您应该在 [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app) 中导入它们。
 
 </PagesOnly>
 
-## 外部样式表 (External stylesheets)
+## 外部样式表 (External Stylesheets)
 
 <AppOnly>
 
@@ -188,13 +188,13 @@ export default function RootLayout({ children }) {
 
 <PagesOnly>
 
-Next.js 允许你从 JavaScript 文件中导入 CSS 文件。这是因为 Next.js 扩展了 [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) 的概念，使其不仅限于 JavaScript。
+Next.js 允许您从 JavaScript 文件导入 CSS 文件。这是可能的，因为 Next.js 扩展了 [`import`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import) 的概念，使其不仅限于 JavaScript。
 
 ### 从 `node_modules` 导入样式
 
 自 Next.js **9.5.4** 起，允许从 `node_modules` 导入 CSS 文件到应用中的任何位置。
 
-对于全局样式表，如 `bootstrap` 或 `nprogress`，你应该在 `pages/_app.js` 中导入文件。例如：
+对于全局样式表，如 `bootstrap` 或 `nprogress`，您应该在 `pages/_app.js` 中导入文件。例如：
 
 ```jsx filename="pages/_app.js"
 import 'bootstrap/dist/css/bootstrap.css'
@@ -204,7 +204,7 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-对于第三方组件所需的 CSS，你可以在组件中导入。例如：
+对于第三方组件所需的 CSS，您可以在组件中导入。例如：
 
 ```jsx filename="components/example-dialog.js"
 import { useState } from 'react'
@@ -219,13 +219,13 @@ function ExampleDialog(props) {
 
   return (
     <div>
-      <button onClick={open}>Open Dialog</button>
+      <button onClick={open}>打开对话框</button>
       <Dialog isOpen={showDialog} onDismiss={close}>
         <button className="close-button" onClick={close}>
-          <VisuallyHidden>Close</VisuallyHidden>
+          <VisuallyHidden>关闭</VisuallyHidden>
           <span aria-hidden>×</span>
         </button>
-        <p>Hello there. I am a dialog</p>
+        <p>你好，我是一个对话框</p>
       </Dialog>
     </div>
   )
@@ -236,7 +236,7 @@ function ExampleDialog(props) {
 
 ## 排序与合并 (Ordering and Merging)
 
-Next.js 在生产构建时会通过自动分块（合并）样式表来优化 CSS。**CSS 的顺序**取决于**你在代码中导入样式的顺序**。
+Next.js 在生产构建时会通过自动分块（合并）样式表来优化 CSS。**CSS 的顺序**取决于**您在代码中导入样式的顺序**。
 
 例如，`base-button.module.css` 会排在 `page.module.css` 之前，因为 `<BaseButton>` 在 `page.module.css` 之前导入：
 
@@ -280,15 +280,15 @@ export function BaseButton() {
 
 - 尽量将 CSS 导入限制在单个 JavaScript 或 TypeScript 入口文件中
 - 在应用的根目录中导入全局样式和 Tailwind 样式表
-- 对于嵌套组件，使用 CSS 模块 (CSS Modules) 而非全局样式
-- 为 CSS 模块使用一致的命名约定，例如使用 `<name>.module.css` 而非 `<name>.tsx`
+- 对于嵌套组件，使用 CSS 模块而非全局样式
+- 为 CSS 模块使用一致的命名约定。例如，使用 `<name>.module.css` 而非 `<name>.tsx`
 - 将共享样式提取到共享组件中以避免重复导入
 - 关闭自动排序导入的 linter 或格式化工具，如 ESLint 的 [`sort-imports`](https://eslint.org/docs/latest/rules/sort-imports)
-- 你可以在 `next.config.js` 中使用 [`cssChunking`](/docs/app/api-reference/config/next-config-js/cssChunking) 选项来控制 CSS 的分块方式
+- 您可以在 `next.config.js` 中使用 [`cssChunking`](/docs/app/api-reference/config/next-config-js/cssChunking) 选项来控制 CSS 的分块方式
 
 ## 开发与生产环境 (Development vs Production)
 
 - 在开发环境 (`next dev`) 中，CSS 更新会通过 [快速刷新 (Fast Refresh)](/docs/architecture/fast-refresh) 即时应用
 - 在生产环境 (`next build`) 中，所有 CSS 文件会自动合并为**多个经过压缩和代码拆分**的 `.css` 文件，确保为路由加载最少数量的 CSS
-- 在生产环境中，即使禁用 JavaScript，CSS 仍会加载，但在开发环境中需要 JavaScript 以实现快速刷新 (Fast Refresh)
+- 在生产环境中，即使禁用 JavaScript，CSS 仍会加载，但在开发环境中需要 JavaScript 来实现快速刷新
 - CSS 顺序在开发环境中可能表现不同，请务必检查构建 (`next build`) 以验证最终的 CSS 顺序