docs: update documentation translations (#12)

Co-authored-by: xiaoyu2er <xiaoyu2er@users.noreply.github.com>

Author: github-actions[bot]

apps/docs/content/zh-hans/docs/01-app/02-guides/migrating/app-router-migration.mdx

@@ -0,0 +1,6 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-05-20T22:54:07.778Z
+title: 迁移指南
+description: 学习如何从主流框架迁移至 Next.js
+---

apps/docs/content/zh-hans/docs/01-app/02-guides/migrating/from-create-react-app.mdx

@@ -0,0 +1,289 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-05-20T22:55:18.019Z
+title: 如何在 Next.js 中配置 Cypress
+nav_title: Cypress
+description: 学习如何在 Next.js 中配置 Cypress 以进行端到端 (E2E) 测试和组件测试。
+---
+
+[Cypress](https://www.cypress.io/) 是一个用于 **端到端测试 (E2E)** 和 **组件测试** 的测试运行器。本文将展示如何在 Next.js 中配置 Cypress 并编写第一个测试。
+
+> **警告：**
+>
+> - Cypress 13.6.3 以下版本不支持 [TypeScript 5](https://github.com/cypress-io/cypress/issues/27731) 的 `moduleResolution:"bundler"` 配置。该问题已在 Cypress 13.6.3 及更高版本中修复。[cypress v13.6.3](https://docs.cypress.io/guides/references/changelog#13-6-3)
+
+<AppOnly>
+
+## 快速开始
+
+您可以使用 `create-next-app` 配合 [with-cypress 示例](https://github.com/vercel/next.js/tree/canary/examples/with-cypress) 快速开始：
+
+```bash filename="终端"
+npx create-next-app@latest --example with-cypress with-cypress-app
+```
+
+</AppOnly>
+
+## 手动配置
+
+要手动配置 Cypress，请安装 `cypress` 作为开发依赖：
+
+```bash filename="终端"
+npm install -D cypress
+# 或
+yarn add -D cypress
+# 或
+pnpm install -D cypress
+```
+
+将 Cypress 的 `open` 命令添加到 `package.json` 的 scripts 字段中：
+
+```json filename="package.json"
+{
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "cypress:open": "cypress open"
+  }
+}
+```
+
+首次运行 Cypress 以打开测试套件：
+
+```bash filename="终端"
+npm run cypress:open
+```
+
+您可以选择配置 **E2E 测试** 和/或 **组件测试**。选择任一选项将自动在项目中创建 `cypress.config.js` 文件和 `cypress` 文件夹。
+
+## 创建第一个 Cypress E2E 测试
+
+确保 `cypress.config` 文件包含以下配置：
+
+```ts filename="cypress.config.ts" switcher
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+})
+```
+
+```js filename="cypress.config.js" switcher
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {},
+  },
+})
+```
+
+然后创建两个新的 Next.js 文件：
+
+<AppOnly>
+
+```jsx filename="app/page.js"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>首页</h1>
+      <Link href="/about">关于</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="app/about/page.js"
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <h1>关于</h1>
+      <Link href="/">首页</Link>
+    </div>
+  )
+}
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="pages/index.js"
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>首页</h1>
+      <Link href="/about">关于</Link>
+    </div>
+  )
+}
+```
+
+```jsx filename="pages/about.js"
+import Link from 'next/link'
+
+export default function About() {
+  return (
+    <div>
+      <h1>关于</h1>
+      <Link href="/">首页</Link>
+    </div>
+  )
+}
+```
+
+</PagesOnly>
+
+添加测试以验证导航功能：
+
+```js filename="cypress/e2e/app.cy.js"
+describe('导航测试', () => {
+  it('应能跳转到关于页面', () => {
+    // 从首页开始
+    cy.visit('http://localhost:3000/')
+
+    // 找到包含 "about" 的链接并点击
+    cy.get('a[href*="about"]').click()
+
+    // 新 URL 应包含 "/about"
+    cy.url().should('include', '/about')
+
+    // 新页面应包含 "About" 标题
+    cy.get('h1').contains('About')
+  })
+})
+```
+
+### 运行 E2E 测试
+
+Cypress 会模拟用户操作，因此需要 Next.js 服务器处于运行状态。建议针对生产环境代码运行测试以更接近真实场景。
+
+先运行 `npm run build && npm run start` 构建 Next.js 应用，然后在另一个终端窗口运行 `npm run cypress:open` 启动 Cypress 并执行 E2E 测试套件。
+
+> **须知：**
+>
+> - 可以通过在 `cypress.config.js` 中添加 `baseUrl: 'http://localhost:3000'` 配置，使用 `cy.visit("/")` 替代完整 URL
+> - 或者安装 [`start-server-and-test`](https://www.npmjs.com/package/start-server-and-test) 包来同时运行 Next.js 生产服务器和 Cypress。安装后，在 `package.json` 的 scripts 字段添加 `"test": "start-server-and-test start http://localhost:3000 cypress"`。注意修改代码后需要重新构建应用
+
+## 创建第一个 Cypress 组件测试
+
+组件测试可以单独构建和挂载特定组件，无需启动完整应用或服务器。
+
+在 Cypress 应用中选择 **组件测试**，然后选择 **Next.js** 作为前端框架。这将在项目中创建 `cypress/component` 文件夹并更新 `cypress.config.js` 文件以启用组件测试。
+
+确保 `cypress.config` 文件包含以下配置：
+
+```ts filename="cypress.config.ts" switcher
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})
+```
+
+```js filename="cypress.config.js" switcher
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})
+```
+
+假设使用前一节的组件，添加测试验证组件渲染：
+
+<AppOnly>
+
+```tsx filename="cypress/component/about.cy.tsx"
+import Page from '../../app/page'
+
+describe('<Page />', () => {
+  it('应正确渲染并显示预期内容', () => {
+    // 挂载首页组件
+    cy.mount(<Page />)
+
+    // 页面应包含 "Home" 标题
+    cy.get('h1').contains('Home')
+
+    // 验证包含预期 URL 的链接可见
+    // 实际跳转测试更适合 E2E 测试
+    cy.get('a[href="/about"]').should('be.visible')
+  })
+})
+```
+
+</AppOnly>
+
+<PagesOnly>
+
+```jsx filename="cypress/component/about.cy.js"
+import AboutPage from '../../pages/about'
+
+describe('<AboutPage />', () => {
+  it('应正确渲染并显示预期内容', () => {
+    // 挂载关于页面组件
+    cy.mount(<AboutPage />)
+
+    // 页面应包含 "About" 标题
+    cy.get('h1').contains('About')
+
+    // 验证包含预期 URL 的链接可见
+    // 实际跳转测试更适合 E2E 测试
+    cy.get('a[href="/"]').should('be.visible')
+  })
+})
+```
+
+</PagesOnly>
+
+> **须知：**
+>
+> - Cypress 目前不支持对 `async` 服务端组件的组件测试，建议使用 E2E 测试
+> - 由于组件测试不需要 Next.js 服务器，依赖服务器的功能（如 `<Image />` 组件）可能无法直接使用
+
+### 运行组件测试
+
+在终端运行 `npm run cypress:open` 启动 Cypress 并执行组件测试套件。
+
+## 持续集成 (CI)
+
+除了交互式测试，还可以使用 `cypress run` 命令在 CI 环境中运行无头测试：
+
+```json filename="package.json"
+{
+  "scripts": {
+    //...
+    "e2e": "start-server-and-test dev http://localhost:3000 \"cypress open --e2e\"",
+    "e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\"",
+    "component": "cypress open --component",
+    "component:headless": "cypress run --component"
+  }
+}
+```
+
+更多 Cypress 持续集成资源：
+
+- [Next.js 与 Cypress 示例](https://github.com/vercel/next.js/tree/canary/examples/with-cypress)
+- [Cypress 持续集成文档](https://docs.cypress.io/guides/continuous-integration/introduction)
+- [Cypress GitHub Actions 指南](https://on.cypress.io/github-actions)
+- [官方 Cypress GitHub Action](https://github.com/cypress-io/github-action)
+- [Cypress Discord 社区](https://discord.com/invite/cypress)

apps/docs/content/zh-hans/docs/01-app/02-guides/migrating/from-vite.mdx

@@ -0,0 +1,28 @@
+---
+source-updated-at: 2025-05-16T04:52:11.000Z
+translation-updated-at: 2025-05-20T22:54:15.887Z
+title: 测试
+description: 了解如何将 Next.js 与四种常用测试工具 —— Cypress、Playwright、Vitest 和 Jest 进行集成配置。
+---
+
+在 React 和 Next.js 中，您可以编写几种不同类型的测试，每种测试都有其特定的目的和用例。本页概述了可用于测试应用程序的类型及常用工具。
+
+## 测试类型
+
+- **单元测试 (Unit Testing)**：隔离测试独立单元（或代码块）。在 React 中，一个单元可以是一个函数、钩子或组件。
+  - **组件测试 (Component Testing)**：是单元测试的更聚焦形式，主要测试对象是 React 组件。包括测试组件的渲染方式、与 props 的交互以及对用户事件的响应行为。
+  - **集成测试 (Integration Testing)**：测试多个单元协同工作的情况。可以是组件、钩子和函数的组合。
+- **端到端测试 (End-to-End Testing / E2E Testing)**：在模拟真实用户场景（如浏览器环境）中测试用户流程。这意味着需要在类生产环境中测试特定任务（例如注册流程）。
+- **快照测试 (Snapshot Testing)**：捕获组件的渲染输出并保存为快照文件。测试运行时，会将组件当前渲染输出与保存的快照进行比对。快照变化用于标识意外行为变更。
+
+<AppOnly>
+
+## 异步服务端组件 (Async Server Components)
+
+由于 `async` 服务端组件是 React 生态的新特性，部分工具尚未完全支持。目前我们建议对 `async` 组件采用**端到端测试 (End-to-End Testing)** 而非**单元测试 (Unit Testing)**。
+
+</AppOnly>
+
+## 指南
+
+查看以下指南，了解如何将 Next.js 与这些常用测试工具进行配置：