AI 原生 Web 开发的技术栈
像 Claude Code 这样的 AI Agent 正在改变软件构建方式。你可以比以往任何时候都更快。但速度过快可能导致代码混乱。为了实现增长，你必须保持项目的简洁和可维护性。
以下是我们用于快速构建并轻松扩展的技术栈。
AI Agent 策略 不要过度设计。AI 会让你很容易地添加数千行无用的代码。
- 保持你的 AGENTS.md 或 CLAUDE.md 文件精简。
- 只包含 Agent 经常出错的项目规则。
- 仅在需要时安装特定的技能。
- 在对话结束时移除技能，以保持上下文整洁。
前端与 UI
- Next.js：使用 App Router。它处理服务端渲染，以获得更好的 SEO 和速度。
- React：快速添加功能的最佳生态系统。
- MUI (Material UI)：我们使用它来避免在 Figma 中从头开始设计一切。这可以节省数月的工作量。
- Zod 和 React Hook Form：处理复杂表单和校验的最佳组合。
后端与数据
- Firebase：我们将其用于身份验证、存储和数据库 (Firestore)。
- Firestore Rules：它在一个文件中处理所有权限，从而消除了编写重复安全代码的需求。
- Firebase Functions：将它们用于复杂逻辑。保持前端简单，让后端更智能。
- Vercel AI SDK：将不同的 AI 模型集成到应用中最简单的方法。
测试与部署
- 集成测试：我们使用 Jest 来测试后端服务层。我们关注各部分如何协同工作，而不是微小的单元测试。
- TypeScript：这对于安全的重构至关重要。
- Vercel：它连接到 GitHub，提供即时的生产环境和预览部署。
- PostHog：用于分析、会话重放和错误日志。
- Resend 和 react-email：这允许你像编写 React 组件一样编写电子邮件。
GitHub 上有一个采用此结构的模板项目。
来源：https://dev.to/martinxpn/the-teach-stack-for-building-web-platforms-in-the-ai-native-era-45ka
可选的学习社区：https://github.com/MartinXPN/nextjs-firebase-mui-starter