@umacloud/knowledge 1.0.1

package/frontend/01-standards/frontend-architecture-and-layering.md

@@ -0,0 +1,119 @@
+---
+id: frontend-architecture-and-layering
+title: 前端架构与分层标准（商业级前端必读）
+domain: frontend
+category: 01-standards
+difficulty: intermediate
+tags: [前端架构, 分层, 分包, feature-based, feature-sliced, api层, 状态管理, 业务逻辑, container-presentational, react, vue, 商业级]
+quality_score: 95
+last_updated: 2026-06-19
+---
+
+# 前端架构与分层标准（商业级前端必读）
+
+> 框架无关（React / Vue / Svelte 通用）的硬性结构标准。商业级前端不是"把组件堆出来能跑"，而是**按功能分包、关注点分层、业务逻辑不写在 JSX/模板里、数据访问统一隔离**。写页面前先定骨架，再填实现。组件里裸 `fetch`、业务逻辑塞进 JSX、把所有东西丢进 `utils/`，都是不合格的。
+
+## 0. 一句话原则
+
+**按 feature 组织代码（features not folders），关注点分层，依赖向内：UI 依赖逻辑、逻辑不依赖 UI；网络/存储是可替换外设。**
+
+## 1. 分层模型与职责
+
+```
+路由/页面 Page ─▶ 容器组件 Container ─▶ 展示组件 Presentational(dumb, 纯 props→UI)
+                       │
+                       ├─▶ 状态层 State (server-cache / app-state / ui-state)
+                       ├─▶ 领域逻辑层 Domain (纯函数/hooks，计算、校验、派生)
+                       └─▶ 数据访问层 API (typed client，唯一出口)──▶ 后端
+```
+
+- **展示组件（Presentational / dumb）**：只接收 props、渲染、向上抛事件；无副作用、不取数、可复用、好测。
+- **容器/特性组件（Container）**：组合展示组件，连接状态与数据访问，编排交互。
+- **状态层**：见 §2 三类状态分治。
+- **领域逻辑层**：纯函数 + 自定义 hook，承载计算/校验/派生/格式化——**不要写在 JSX 里**。
+- **数据访问层（API）**：与后端通信的**唯一**出口；组件/状态层通过它取数，绝不在组件里裸 `fetch`/`axios`。
+
+## 2. 状态分三类，别混（关键）
+
+商业前端 80% 的混乱来自把三种状态混在一起。明确分治：
+
+| 状态类型 | 是什么 | 用什么 |
+|---|---|---|
+| **服务端缓存状态** | 来自后端、需要缓存/失效/重取的数据 | React Query / SWR / TanStack Query（Vue 用 `@tanstack/vue-query`、Pinia colada） |
+| **应用全局状态** | 跨页面的客户端状态（登录态、主题、购物车草稿） | Zustand / Redux Toolkit（Vue 用 Pinia）|
+| **UI 局部状态** | 仅本组件的开关/输入/hover | `useState` / `ref` / signals |
+
+- **不要**把服务端数据塞进 Redux/Zustand 手动维护——用 React Query 管缓存/loading/error/重试。
+- **不要**把只属于一个组件的开关提升到全局 store。
+- 全局 store 只放"真正跨组件共享且非服务端"的状态。
+
+## 3. 数据访问层（API 层）隔离
+
+- 组件/页面**禁止**出现裸 `fetch` / `axios`；所有请求经过 **typed API client**。
+- 每个 feature 有自己的 `api/` 模块，导出类型化的请求函数（`getOrders(): Promise<OrderDTO[]>`）。
+- 前后端契约对齐：请求/响应类型与后端 DTO/OpenAPI 一致；路径集中为常量，不散落字符串。
+- 每个数据请求处理 **loading / error / empty** 三态；错误统一拦截（401 跳登录、5xx 提示、网络错误重试）。
+- 鉴权 header、baseURL、超时、重试在 client 层统一配置一次。
+
+## 4. 业务逻辑放哪
+
+- 计算/派生/校验/格式化 → **纯函数或自定义 hook**（`useCart()`、`formatMoney()`），可独立单测。
+- JSX/模板里只放"声明式渲染 + 简单条件"，不写复杂分支与副作用。
+- 副作用（订阅、定时器、取数）放进 hook 并做好清理（cleanup）。
+
+## 5. 分包：feature-based（按功能，不按类型）
+
+**默认按功能分包。** 不要建 `components/`、`hooks/`、`services/` 三个大筐把全项目同类堆一起（改一个需求要翻三处）。`utils/` 不是垃圾场——和计费相关的 helper 就放进 `billing/`。清晰的文件名本身就是架构。
+
+```
+src/
+├─ app/                      # 应用装配：路由、providers、全局布局、入口
+├─ features/                 # 按功能（业务域）分包 ← 推荐
+│  ├─ orders/
+│  │  ├─ api/               # orders.api.ts（typed 请求，唯一出口）
+│  │  ├─ components/        # 该 feature 的展示/容器组件
+│  │  ├─ hooks/             # useOrders, useCancelOrder（业务逻辑）
+│  │  ├─ stores/           # 该 feature 的局部全局状态（如需）
+│  │  ├─ types.ts          # DTO/视图模型类型
+│  │  └─ index.ts          # 该 feature 对外的公开 API（barrel）
+│  ├─ checkout/
+│  └─ auth/
+├─ shared/                   # 跨 feature 复用：ui-kit(Button/Input)、lib、hooks、api-client
+└─ pages|routes/             # 路由到 feature 的薄装配层（Next.js 用 app/）
+```
+
+- 跨 feature 只通过对方 `index.ts` 暴露的公开 API 引用，**禁止深层 import** 对方内部文件。
+- `shared/ui-kit` 放无业务的纯展示组件（设计系统落地）；有业务的组件留在各 feature。
+- 中型项目（5–20 人）可用 feature + 类型的混合，但 feature 边界优先。
+
+## 6. 组件与可访问性规范
+
+- 容器/展示分离：取数与状态在容器，纯渲染在展示组件。
+- props 全部 TypeScript 类型化，不用 `any`；表单受控、有校验与错误提示。
+- 可访问性（a11y）：语义化标签、`aria-*`、键盘可达、焦点管理、对比度达标。
+- 列表渲染稳定 `key`；`useEffect` 依赖正确并清理；不在渲染期做副作用或改 state。
+- 图标来自声明的图标库（Lucide/Heroicons/Tabler），**不用 emoji 当功能图标**；颜色走设计 token，不硬编码 hex。
+
+## 7. 常见反模式（出现即不合格）
+
+- 组件里裸 `fetch`/`axios`，没有 API 层。
+- 用 Redux/Zustand 手动管服务端数据（该用 React Query）。
+- 业务逻辑、复杂分支、副作用写在 JSX/模板里。
+- 按类型分包（components/services/hooks 三大筐），feature 散落各处。
+- `utils/` 变成什么都往里塞的垃圾场。
+- 跨 feature 深层 import 对方内部文件，耦合成一团。
+- 巨型组件（几百行、又取数又渲染又算逻辑）。
+- 不处理 loading/error/empty 三态，只画 happy path。
+
+## 8. 最低交付标准（写完后自检 checklist）
+
+- [ ] 按 feature 分包，每个 feature 自带 api/components/hooks/types，对外只经 index 暴露。
+- [ ] 所有网络请求走 typed API 层，组件内无裸 fetch；路径集中常量、与后端契约一致。
+- [ ] 三类状态分治：服务端数据用 React Query/SWR，全局态用 store，UI 态用本地。
+- [ ] 业务逻辑在纯函数/hook，JSX 只做声明式渲染。
+- [ ] 每个数据视图处理 loading/error/empty 三态；错误统一拦截。
+- [ ] 容器/展示分离；props 类型化；a11y 与设计 token 达标；无 emoji 图标、无硬编码颜色。
+- [ ] 跨 feature 不深层 import；shared 只放无业务的复用件。
+
+---
+**参考（commercial-grade 前端共识）**：Feature-Sliced Design、Bulletproof React（feature-based）、Clean Architecture（依赖向内、业务逻辑居核心）、TanStack Query（服务端缓存分治）。

package/frontend/01-standards/i18n-and-localization.md

@@ -0,0 +1,65 @@
+---
+id: i18n-and-localization
+title: 国际化与本地化标准（i18n/l10n · 商业级）
+domain: frontend
+category: 01-standards
+difficulty: intermediate
+tags: [国际化, i18n, 本地化, l10n, 多语言, 翻译, locale, 时区, 货币, rtl, 复数, 商业级]
+quality_score: 92
+last_updated: 2026-06-19
+---
+
+# 国际化与本地化标准（i18n/l10n · 商业级）
+
+> 面向多地区/多语言的商业产品必须从一开始就做 i18n——事后补改代价极大（文案散落代码、硬编码格式）。即使先只做一种语言，也要用 i18n 框架预留。
+
+## 1. 文案外置（绝不硬编码）
+
+- **所有用户可见文案走翻译 key**（`t('order.placed')`），绝不在 JSX/模板里写死字符串。
+- 用成熟 i18n 库（react-i18next / vue-i18n / FormatJS / next-intl）；翻译资源按 locale 分文件管理。
+- key 命名有层级语义（`auth.login.title`），便于维护与翻译协作。
+- 翻译缺失有 fallback（回退默认语言）+ 可检测缺失 key。
+
+## 2. 复数、性别、插值
+
+- **复数**用框架的 plural 规则（`{{count}} item / items`），不要自己 `if count===1`——各语言复数规则不同。
+- 变量插值用框架机制（`t('greeting', {{name}})`），不要字符串拼接（语序各语言不同）。
+- 避免把句子拆成多段拼接（不同语言语序不同会拼错）。
+
+## 3. 格式本地化（按 locale，不硬编码）
+
+- **日期/时间**：用 `Intl.DateTimeFormat` 按 locale + 用户时区格式化；存储用 UTC，展示转本地时区。
+- **数字/货币**：用 `Intl.NumberFormat`，货币带币种符号与正确分隔符；金额仍用最小单位整数存。
+- **相对时间**（"3 小时前"）用 `Intl.RelativeTimeFormat`。
+- 不要硬编码 `MM/DD/YYYY` 或 `$` 这类地区相关格式。
+
+## 4. RTL 与布局
+
+- 支持从右到左语言（阿拉伯/希伯来）时，用逻辑属性（`margin-inline-start` 而非 `margin-left`）、`dir` 属性，避免布局镜像出错。
+- 文案长度因语言差异大（德语长、中文短），布局要弹性，别按某语言写死宽度。
+
+## 5. 后端与内容
+
+- 后端错误信息/邮件/通知也要可本地化（按用户 locale 选模板）。
+- API 返回可本地化字段时，按 `Accept-Language`/用户偏好返回，或返回 key 让前端译。
+- locale 检测：用户偏好 > URL/子域 > `Accept-Language` > 默认；用户可手动切换并持久化。
+- SEO：多语言用 `hreflang`、独立 URL（路径或子域）。
+
+## 6. 反模式（出现即不合格）
+
+- 文案硬编码在代码里；事后才想做多语言。
+- 自己写复数/性别逻辑；字符串拼接造句。
+- 硬编码日期/货币/数字格式；展示用服务器时区而非用户时区。
+- RTL 用物理方向属性导致镜像错乱；布局按单一语言长度写死。
+- 后端邮件/错误不可本地化。
+
+## 7. 最低交付 checklist
+
+- [ ] 所有文案走 i18n key，用成熟库，资源按 locale 管理，缺失有 fallback。
+- [ ] 复数/插值用框架机制，不拼接造句。
+- [ ] 日期/数字/货币用 Intl 按 locale + 用户时区；存 UTC/最小单位。
+- [ ] 需要时支持 RTL（逻辑属性）+ 弹性布局容纳文案长度差异。
+- [ ] locale 检测+切换持久化；后端邮件/通知可本地化；多语言 SEO(hreflang)。
+
+---
+**参考**：ICU MessageFormat、`Intl` API、react-i18next/vue-i18n、CLDR 复数规则、RTL 逻辑属性、hreflang。

package/frontend/01-standards/nextjs-complete.md

@@ -0,0 +1,451 @@
+---
+id: nextjs-complete
+title: Next.js 完整指南
+domain: frontend
+category: 01-standards
+difficulty: intermediate
+tags: [complete, components, frontend, middleware, nextjs, react, router, server]
+quality_score: 70
+last_updated: 2026-06-15
+---
+# Next.js 完整指南
+
+## 概述
+
+Next.js 是基于 React 的全栈框架，由 Vercel 开发维护。提供文件系统路由、服务端渲染 (SSR)、静态站点生成 (SSG)、增量静态再生成 (ISR)、API Routes、中间件等能力。Next.js 14+ 引入 App Router 和 React Server Components (RSC)，从根本上改变了数据获取和组件渲染模型。
+
+### 核心特性
+
+- **App Router**: 基于文件系统的嵌套路由，支持 Layout / Loading / Error 等约定文件
+- **React Server Components**: 默认服务端组件，减少客户端 JS 体积
+- **多种渲染策略**: SSR / SSG / ISR / CSR 按页面粒度灵活选择
+- **内置优化**: Image / Font / Script / Metadata 自动优化
+- **Middleware**: 在 Edge Runtime 运行的请求拦截层
+- **Route Handlers**: 替代 API Routes 的服务端端点
+- **Streaming & Suspense**: 流式渲染与渐进式页面加载
+
+---
+
+## App Router 架构
+
+### 目录结构约定
+
+```
+app/
+├── layout.tsx          # 根布局（必须）
+├── page.tsx            # 首页
+├── loading.tsx         # 全局 Loading UI
+├── error.tsx           # 全局 Error UI
+├── not-found.tsx       # 404 页面
+├── globals.css
+├── dashboard/
+│   ├── layout.tsx      # 嵌套布局
+│   ├── page.tsx        # /dashboard
+│   ├── loading.tsx     # Dashboard Loading
+│   └── [id]/
+│       └── page.tsx    # /dashboard/:id
+├── api/
+│   └── users/
+│       └── route.ts    # API Route Handler
+└── (marketing)/        # Route Group（不影响 URL）
+    ├── about/
+    │   └── page.tsx
+    └── blog/
+        └── page.tsx
+```
+
+### 路由约定文件
+
+| 文件 | 作用 | 渲染时机 |
+|------|------|----------|
+| `layout.tsx` | 共享布局，嵌套不重新渲染 | 导航时保持 |
+| `page.tsx` | 页面 UI，使路由可访问 | 每次导航 |
+| `loading.tsx` | Suspense Loading UI | 页面加载时 |
+| `error.tsx` | Error Boundary UI | 出错时 |
+| `not-found.tsx` | 404 UI | 未找到时 |
+| `route.ts` | API 端点 | 请求时 |
+| `template.tsx` | 类似 layout 但每次重新渲染 | 每次导航 |
+
+---
+
+## React Server Components (RSC)
+
+### 服务端组件 vs 客户端组件
+
+```tsx
+// 服务端组件（默认）- 不需要标记
+// 可以直接访问数据库、文件系统、环境变量
+async function ProductList() {
+  const products = await db.product.findMany();
+  return (
+    <ul>
+      {products.map(p => (
+        <li key={p.id}>{p.name} - ¥{p.price}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+```tsx
+// 客户端组件 - 需要 "use client" 标记
+"use client";
+
+import { useState } from "react";
+
+export function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(c => c + 1)}>
+      Count: {count}
+    </button>
+  );
+}
+```
+
+### 何时用服务端 vs 客户端
+
+| 场景 | 服务端组件 | 客户端组件 |
+|------|-----------|-----------|
+| 数据获取 | 直接 async/await | useEffect / SWR / React Query |
+| 敏感逻辑（API Key 等） | 安全 | 不安全 |
+| 事件处理（onClick 等） | 不支持 | 支持 |
+| State / Effects | 不支持 | 支持 |
+| 浏览器 API | 不可用 | 可用 |
+| 体积影响 | 零 JS 发送到客户端 | 打包到 bundle |
+
+### 组合模式
+
+```tsx
+// 服务端组件可以嵌套客户端组件
+// app/dashboard/page.tsx (Server)
+import { DashboardChart } from "./DashboardChart"; // Client
+import { getStats } from "@/lib/data";
+
+export default async function DashboardPage() {
+  const stats = await getStats();
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <p>Total: {stats.total}</p>
+      {/* 将服务端数据作为 props 传给客户端组件 */}
+      <DashboardChart data={stats.chartData} />
+    </div>
+  );
+}
+```
+
+---
+
+## 数据获取
+
+### 服务端数据获取
+
+```tsx
+// 直接在组件中 fetch（自动去重和缓存）
+async function UserProfile({ userId }: { userId: string }) {
+  const user = await fetch(`https://api.example.com/users/${userId}`, {
+    next: { revalidate: 3600 }, // ISR: 每小时重新验证
+  }).then(res => res.json());
+
+  return <div>{user.name}</div>;
+}
+```
+
+### 缓存策略
+
+```tsx
+// 静态数据（构建时获取，等同 SSG）
+fetch("https://api.example.com/data", { cache: "force-cache" });
+
+// 动态数据（每次请求重新获取，等同 SSR）
+fetch("https://api.example.com/data", { cache: "no-store" });
+
+// ISR: 每 60 秒重新验证
+fetch("https://api.example.com/data", { next: { revalidate: 60 } });
+```
+
+### generateStaticParams
+
+```tsx
+// app/blog/[slug]/page.tsx
+export async function generateStaticParams() {
+  const posts = await getAllPosts();
+  return posts.map(post => ({ slug: post.slug }));
+}
+
+export default async function BlogPost({ params }: { params: { slug: string } }) {
+  const post = await getPost(params.slug);
+  return <article>{post.content}</article>;
+}
+```
+
+---
+
+## 中间件 (Middleware)
+
+```typescript
+// middleware.ts（项目根目录）
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  // 认证检查
+  const token = request.cookies.get("auth-token");
+  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
+    return NextResponse.redirect(new URL("/login", request.url));
+  }
+
+  // 国际化重定向
+  const locale = request.headers.get("accept-language")?.split(",")[0] || "en";
+  if (request.nextUrl.pathname === "/") {
+    return NextResponse.redirect(new URL(`/${locale}`, request.url));
+  }
+
+  // 添加自定义 Header
+  const response = NextResponse.next();
+  response.headers.set("x-request-id", crypto.randomUUID());
+  return response;
+}
+
+export const config = {
+  matcher: [
+    "/((?!api|_next/static|_next/image|favicon.ico).*)",
+  ],
+};
+```
+
+---
+
+## Server Actions
+
+```tsx
+// app/actions.ts
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+
+export async function createPost(formData: FormData) {
+  const title = formData.get("title") as string;
+  const content = formData.get("content") as string;
+
+  // 服务端验证
+  if (!title || title.length < 3) {
+    return { error: "标题至少 3 个字符" };
+  }
+
+  await db.post.create({ data: { title, content } });
+  revalidatePath("/blog");
+  redirect("/blog");
+}
+```
+
+```tsx
+// app/blog/new/page.tsx
+import { createPost } from "../actions";
+
+export default function NewPost() {
+  return (
+    <form action={createPost}>
+      <input name="title" placeholder="标题" required />
+      <textarea name="content" placeholder="内容" required />
+      <button type="submit">发布</button>
+    </form>
+  );
+}
+```
+
+---
+
+## Route Handlers (API)
+
+```typescript
+// app/api/users/route.ts
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const page = parseInt(searchParams.get("page") || "1");
+  const users = await db.user.findMany({
+    skip: (page - 1) * 20,
+    take: 20,
+  });
+  return NextResponse.json({ users, page });
+}
+
+export async function POST(request: NextRequest) {
+  const body = await request.json();
+  const user = await db.user.create({ data: body });
+  return NextResponse.json(user, { status: 201 });
+}
+```
+
+---
+
+## 性能优化
+
+### Image 组件
+
+```tsx
+import Image from "next/image";
+
+export function Hero() {
+  return (
+    <Image
+      src="/hero.jpg"
+      alt="Hero image"
+      width={1200}
+      height={600}
+      priority          // LCP 图片预加载
+      placeholder="blur" // 模糊占位
+      blurDataURL="..."
+    />
+  );
+}
+```
+
+### Font 优化
+
+```tsx
+// app/layout.tsx
+import { Inter, Noto_Sans_SC } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const notoSansSC = Noto_Sans_SC({
+  subsets: ["latin"],
+  weight: ["400", "500", "700"],
+  variable: "--font-noto",
+});
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html className={`${inter.variable} ${notoSansSC.variable}`}>
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+### Streaming 与 Suspense
+
+```tsx
+import { Suspense } from "react";
+
+export default function Dashboard() {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Suspense fallback={<ChartSkeleton />}>
+        <RevenueChart />
+      </Suspense>
+      <Suspense fallback={<TableSkeleton />}>
+        <RecentOrders />
+      </Suspense>
+    </div>
+  );
+}
+```
+
+---
+
+## 部署
+
+### Vercel (推荐)
+
+```bash
+# 自动检测 Next.js 并优化部署
+vercel deploy
+```
+
+### Docker 自托管
+
+```dockerfile
+FROM node:20-alpine AS base
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN corepack enable pnpm && pnpm install --frozen-lockfile
+
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED=1
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+CMD ["node", "server.js"]
+```
+
+### next.config.js 生产配置
+
+```javascript
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: "standalone",     // Docker 部署需要
+  poweredByHeader: false,   // 移除 X-Powered-By
+  compress: true,
+  images: {
+    remotePatterns: [
+      { protocol: "https", hostname: "cdn.example.com" },
+    ],
+  },
+  headers: async () => [
+    {
+      source: "/(.*)",
+      headers: [
+        { key: "X-Frame-Options", value: "DENY" },
+        { key: "X-Content-Type-Options", value: "nosniff" },
+        { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
+      ],
+    },
+  ],
+};
+
+module.exports = nextConfig;
+```
+
+---
+
+## 常见反模式
+
+| 反模式 | 问题 | 正确做法 |
+|--------|------|----------|
+| 在服务端组件用 useState | 编译错误 | 拆分为客户端组件 |
+| 在客户端组件直接查数据库 | 安全漏洞 | 通过 API/Server Action |
+| 所有组件标 "use client" | 失去 RSC 优势 | 仅交互组件标记 |
+| 不设 revalidate | 数据永不更新 | 按业务设置过期时间 |
+| 在 Middleware 做重计算 | Edge 超时 | Middleware 只做路由/鉴权 |
+| 不用 Image 组件 | 无自动优化 | 始终用 next/image |
+
+---
+
+## Agent Checklist
+
+在 AI 编码流水线中使用 Next.js 时，必须逐项检查：
+
+- [ ] App Router 目录结构遵循约定（layout / page / loading / error）
+- [ ] 组件默认为服务端组件，仅在需要交互/状态时标记 "use client"
+- [ ] 数据获取使用合适的缓存策略（force-cache / no-store / revalidate）
+- [ ] LCP 图片使用 `<Image priority />` 并提供 width/height
+- [ ] 字体使用 next/font 避免布局偏移
+- [ ] Middleware 仅处理路由/鉴权/重定向，不做重计算
+- [ ] Server Actions 包含服务端验证，不信任客户端输入
+- [ ] 使用 Suspense 包裹异步组件实现流式加载
+- [ ] 生产环境配置 output: "standalone"（Docker）或 Vercel 部署
+- [ ] 安全 Header 在 next.config.js 或 Middleware 中统一配置
+- [ ] generateStaticParams 用于高访问量的动态路由
+- [ ] 敏感环境变量不带 NEXT_PUBLIC_ 前缀
+- [ ] 错误边界（error.tsx）覆盖所有关键路由段
+- [ ] metadata 或 generateMetadata 为每个页面提供 SEO 信息