software-frontend
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseFrontend Engineering
前端工程实践
Production-ready patterns for modern web applications.
Modern Best Practices (January 2026): Next.js 16 + Turbopack, React 19.x + Server Components, TypeScript 5.9+ (strict), Tailwind CSS v4, TanStack Query, Zustand, Vitest (browser mode).
Breaking Changes: Next.js 16 Upgrade Guide
Shared release gates:
../software-clean-code-standard/assets/checklists/frontend-performance-a11y-checklist.mdIf you use React Server Components (RSC), treat security advisories as blocking: see (React RSC advisories).
data/sources.json适用于现代Web应用的生产就绪型实践方案。
2026年1月现代最佳实践：Next.js 16 + Turbopack、React 19.x + Server Components、TypeScript 5.9+（严格模式）、Tailwind CSS v4、TanStack Query、Zustand、Vitest（浏览器模式）。
重大变更：Next.js 16 升级指南
通用发布检查项：
../software-clean-code-standard/assets/checklists/frontend-performance-a11y-checklist.md如果使用React Server Components (RSC)，请将安全公告视为阻塞项：详见（React RSC安全公告）。
data/sources.jsonQuick Reference
快速参考
| Task | Tool | Command |
|---|---|---|
| Next.js App | Next.js 16 + Turbopack | |
| Vue App | Nuxt 4 | |
| Angular App | Angular 21 | |
| Svelte App | SvelteKit 2.49+ | |
| React SPA | Vite + React | |
| UI Components | shadcn/ui | |
| 任务 | 工具 | 命令 |
|---|---|---|
| Next.js 应用 | Next.js 16 + Turbopack | |
| Vue 应用 | Nuxt 4 | |
| Angular 应用 | Angular 21 | |
| Svelte 应用 | SvelteKit 2.49+ | |
| React 单页应用 | Vite + React | |
| UI 组件 | shadcn/ui | |
Workflow
工作流程
- Pick a framework using the decision tree.
- Start from a matching template in .
assets/ - Implement feature-specific patterns from .
references/ - Treat accessibility and performance as release gates (shared checklist above).
- 使用决策树选择框架。
- 从目录中选择匹配的模板开始开发。
assets/ - 从目录中实现特定功能的实践模式。
references/ - 将无障碍适配和性能优化作为发布的必要检查项（见上方通用检查清单）。
Framework Decision Tree
框架决策树
text
Project needs:
|-- React ecosystem?
| |-- Full-stack + SEO -> Next.js 16
| |-- Progressive enhancement -> Remix
| `-- Client-side SPA -> Vite + React
|
|-- Vue ecosystem?
| |-- Full-stack -> Nuxt 4
| `-- SPA -> Vite + Vue 3.5+
|
|-- State management?
| |-- Server data -> TanStack Query
| |-- Global client -> Zustand
| `-- WARNING: DECLINING: Redux
|
`-- Styling?
|-- Utility-first -> Tailwind CSS v4
`-- WARNING: DECLINING: CSS-in-JStext
项目需求:
|-- 是否采用React生态？
| |-- 全栈 + SEO -> Next.js 16
| |-- 渐进式增强 -> Remix
| `-- 客户端单页应用 -> Vite + React
|
|-- 是否采用Vue生态？
| |-- 全栈应用 -> Nuxt 4
| `-- 单页应用 -> Vite + Vue 3.5+
|
|-- 状态管理需求？
| |-- 服务端数据 -> TanStack Query
| |-- 全局客户端状态 -> Zustand
| `-- 注意：已逐步淘汰: Redux
|
`-- 样式方案？
|-- 优先工具类 -> Tailwind CSS v4
`-- 注意：已逐步淘汰: CSS-in-JSNext.js 16 Changes
Next.js 16 变更
middleware.ts -> proxy.ts
middleware.ts 重命名为 proxy.ts
bash
undefinedbash
undefinedRun codemod
运行代码转换工具
npx @next/codemod@canary upgrade latest
npx @next/codemod@canary upgrade latest
Or manually rename
或手动重命名
mv middleware.ts proxy.ts
```typescript
// After (Next.js 16)
export function proxy(request: Request) {
// ... logic
}mv middleware.ts proxy.ts
```typescript
// 升级后（Next.js 16）
export function proxy(request: Request) {
// ... 逻辑代码
}Cache Components ("use cache"
)
"use cache"缓存组件（"use cache"
）
"use cache"typescript
export default async function Page() {
"use cache";
const data = await fetchData();
return <ProductList data={data} />;
}typescript
export default async function Page() {
"use cache";
const data = await fetchData();
return <ProductList data={data} />;
}React Compiler
React 编译器
typescript
// next.config.ts
const nextConfig: NextConfig = {
experimental: {
reactCompiler: true,
},
};typescript
// next.config.ts
const nextConfig: NextConfig = {
experimental: {
reactCompiler: true,
},
};Performance Budgets
性能预算
| Metric | Target |
|---|---|
| LCP | <= 2.5s |
| INP | <= 200ms |
| CLS | <= 0.1 |
| TTFB | < 600ms |
| 指标 | 目标值 |
|---|---|
| LCP | <= 2.5s |
| INP | <= 200ms |
| CLS | <= 0.1 |
| TTFB | < 600ms |
Deployment Checklist
部署检查清单
Pre-Deployment
部署前检查
- - no errors
npm run build - - zero ESLint errors
npm run lint - - all tests passing
vitest run - Bundle size within budget
- Environment variables set
- - 无错误
npm run build - - ESLint 零错误
npm run lint - - 所有测试通过
vitest run - 包体积在预算范围内
- 环境变量已配置
Accessibility
无障碍适配
- axe DevTools - zero critical issues
- Keyboard navigation works
- Color contrast >= 4.5:1
- Screen reader tested
- axe DevTools - 无严重问题
- 键盘导航正常工作
- 颜色对比度 >= 4.5:1
- 屏幕阅读器测试通过
SEO
SEO 优化
- Metadata configured
- sitemap.xml generated
- robots.txt configured
- 元数据已配置
- sitemap.xml 已生成
- robots.txt 已配置
Resources
资源
| Resource | Purpose |
|---|---|
| references/fullstack-patterns.md | Server/client components, data fetching |
| references/vue-nuxt-patterns.md | Vue 3, Nuxt, Pinia |
| references/angular-patterns.md | Angular 21, signals |
| references/svelte-sveltekit-patterns.md | Svelte 5, SvelteKit |
| references/remix-react-patterns.md | Remix loaders, actions |
| references/operational-playbook.md | Architecture, security |
| 资源 | 用途 |
|---|---|
| references/fullstack-patterns.md | 服务端/客户端组件、数据获取 |
| references/vue-nuxt-patterns.md | Vue 3、Nuxt、Pinia |
| references/angular-patterns.md | Angular 21、信号系统 |
| references/svelte-sveltekit-patterns.md | Svelte 5、SvelteKit |
| references/remix-react-patterns.md | Remix 加载器、动作 |
| references/operational-playbook.md | 架构设计、安全 |
Templates
模板
| Framework | Template |
|---|---|
| Next.js | assets/nextjs/template-nextjs-tailwind-shadcn.md |
| Vue/Nuxt | assets/vue-nuxt/template-nuxt4-tailwind.md |
| Angular | assets/angular/template-angular21-standalone.md |
| Svelte | assets/svelte/template-sveltekit-runes.md |
| 框架 | 模板 |
|---|---|
| Next.js | assets/nextjs/template-nextjs-tailwind-shadcn.md |
| Vue/Nuxt | assets/vue-nuxt/template-nuxt4-tailwind.md |
| Angular | assets/angular/template-angular21-standalone.md |
| Svelte | assets/svelte/template-sveltekit-runes.md |
Related Skills
相关技能
| Skill | Purpose |
|---|---|
| software-backend | Backend API |
| dev-api-design | REST/GraphQL |
| software-code-review | Code review |
| ops-devops-platform | CI/CD |
| 技能 | 用途 |
|---|---|
| software-backend | 后端API开发 |
| dev-api-design | REST/GraphQL设计 |
| software-code-review | 代码评审 |
| ops-devops-platform | CI/CD流程 |