1
// 2026 年的标准 TypeScript 写法
2
import { z } from 'zod';
3
import { t } from '@trpc/server';
4

5
// 类型定义即 API 契约
6
const UserSchema = z.object({
7
  id: z.string().uuid(),
8
  email: z.string().email(),
9
  role: z.enum(['admin', 'user', 'viewer']),
10
  createdAt: z.date().default(() => new Date()),
11
});
12

13
// 端到端类型安全
14
const userRouter = t.router({
15
  getById: t.procedure
16
    .input(z.string())
17
    .output(UserSchema)
18
    .query(async ({ input }) => {
19
      const user = await db.user.findUnique({ where: { id: input } });
20
      return UserSchema.parse(user);
21
    }),
22
});
23

24
// 前端直接消费——类型自动推断
25
// 不用手动写任何接口类型！
26
const user = await trpc.user.getById.query('123');
27
// user 的类型自动推断为 UserSchema 类型

1
// 以前：手写 CRUD
2
// 现在：描述需求，AI 生成
3

4
// 在 AI 助手里输入：
5
// "创建一个 React 组件，显示用户列表，支持搜索和分页，
6
//  使用 TanStack Query 做数据获取，shadcn/ui 做 UI"
7

8
// AI 生成的结果：
9
import { useState } from 'react';
10
import { useQuery } from '@tanstack/react-query';
11
import { DataTable } from '@/components/ui/data-table';
12
import { Input } from '@/components/ui/input';
13
import { Pagination } from '@/components/ui/pagination';
14

15
interface UserListProps {
16
  initialPage?: number;
17
}
18

19
export function UserList({ initialPage = 1 }: UserListProps) {
20
  const [search, setSearch] = useState('');
21
  const [page, setPage] = useState(initialPage);
22

23
  const { data, isLoading } = useQuery({
24
    queryKey: ['users', search, page],
25
    queryFn: () => fetch(`/api/users?q=${search}&page=${page}`).then(r => r.json()),
26
  });
27

28
  return (
29
    <div className="space-y-4">
30
      <Input
31
        placeholder="搜索用户..."
32
        value={search}
33
        onChange={(e) => { setSearch(e.target.value); setPage(1); }}
34
      />
35
      <DataTable data={data?.items ?? []} />
36
      <Pagination
37
        current={page}
38
        total={data?.totalPages ?? 1}
39
        onChange={setPage}
40
      />
41
    </div>
42
  );
43
}

1
// 2026 年的标准 React 组件写法
2
// 这个组件跑在服务器上，不会发任何 JS 到客户端
3
import { getServerSession } from '@/lib/auth';
4
import { prisma } from '@/lib/db';
5
import { UserProfile } from '@/components/user-profile';
6

7
// 服务端组件：直接访问数据库、文件系统、API
8
export default async function DashboardPage() {
9
  const session = await getServerSession();
10

11
  // 直接在组件里查数据库！
12
  const stats = await prisma.dashboard.findUnique({
13
    where: { userId: session.userId },
14
  });
15

16
  return (
17
    <div className="container mx-auto py-8">
18
      <h1>欢迎回来，{session.user.name}</h1>
19
      <div className="grid grid-cols-3 gap-4 mt-6">
20
        <StatCard label="总用户" value={stats.totalUsers} />
21
        <StatCard label="活跃用户" value={stats.activeUsers} />
22
        <StatCard label="转化率" value={`${stats.conversionRate}%`} />
23
      </div>
24
      {/* "use client" 的交互组件 */}
25
      <UserProfile userId={session.userId} />
26
    </div>
27
  );
28
}

1
// 部署在边缘的函数——全球任意位置 <50ms 响应
2
import { geolocation, ip } from '@vercel/edge';
3

4
export const config = {
5
  runtime: 'edge',
6
  regions: ['hkg1', 'nrt1', 'sjc1', 'lhr1'],  // 部署到全球 4 个区域
7
};
8

9
export default async function handler(request: Request) {
10
  const geo = geolocation(request);
11
  const clientIp = ip(request);
12

13
  // 根据用户地理位置提供个性内容
14
  const content = geo.country === 'CN'
15
    ? await fetchLocalContent()
16
    : await fetchGlobalContent();
17

18
  return new Response(
19
    JSON.stringify({
20
      content,
21
      servedFrom: geo.city,
22
      latency: '~10ms',
23
    }),
24
    {
25
      headers: {
26
        'Content-Type': 'application/json',
27
        'X-Edge-Region': geo.country,
28
      },
29
    }
30
  );
31
}

1
// 框架无关的 Web Component 组件
2
class MyButton extends HTMLElement {
3
  static get observedAttributes() {
4
    return ['variant', 'size', 'disabled'];
5
  }
6

7
  connectedCallback() {
8
    this.attachShadow({ mode: 'open' });
9
    this.render();
10
  }
11

12
  attributeChangedCallback() {
13
    this.render();
14
  }
15

16
  render() {
17
    const variant = this.getAttribute('variant') || 'primary';
18
    const size = this.getAttribute('size') || 'md';
19
    const disabled = this.hasAttribute('disabled');
20

21
    this.shadowRoot!.innerHTML = `
22
      <style>
23
        button {
24
          padding: ${size === 'sm' ? '4px 12px' : size === 'lg' ? '12px 24px' : '8px 16px'};
25
          background: ${variant === 'primary' ? '#0070f3' : '#e2e8f0'};
26
          color: ${variant === 'primary' ? 'white' : '#1a202c'};
27
          border: none;
28
          border-radius: 6px;
29
          cursor: ${disabled ? 'not-allowed' : 'pointer'};
30
          opacity: ${disabled ? 0.5 : 1};
31
        }
32
      </style>
33
      <button ${disabled ? 'disabled' : ''}>
34
        <slot></slot>
35
      </button>
36
    `;
37
  }
38
}
39

40
customElements.define('my-button', MyButton);

1
<!-- 任何框架里都能用 -->
2
<my-button variant="primary" size="lg" @click="handleClick">
3
  点我
4
</my-button>

1
// pnpm-workspace.yaml 配置
2
packages:
3
  - 'apps/*'          # Web 应用、管理后台、移动端
4
  - 'packages/*'      # 共享 UI 组件、工具库
5
  - 'packages/config/*'  # ESLint、TypeScript、Prettier 配置
6

7
// 共享配置让所有项目保持一致的代码风格
8
// 修改共享类型后，所有使用方自动感知

1
// next.config.ts 中的性能预算配置
2
const nextConfig = {
3
  experimental: {
4
    performance: {
5
      budget: {
6
        // JavaScript 总大小限制
7
        totalJS: '200 KB',
8
        // 首屏 JS 大小
9
        firstLoadJS: '100 KB',
10
        // 最大图片大小
11
        maxImageSize: '500 KB',
12
        // LCP 阈值
13
        largestContentfulPaint: '2.5s',
14
        // 首次输入延迟
15
        firstInputDelay: '100ms',
16
      },
17
      // 超出预算时的行为
18
      onBudgetExceed: 'error', // 'warn' | 'error' | 'block-deploy'
19
    },
20
  },
21
};
22

23
module.exports = nextConfig;