Технологический стек для AI-native веб-разработки
AI-агенты, такие как Claude Code, меняют подход к разработке программного обеспечения. Вы можете двигаться быстрее, чем когда-либо. Но скорость может привести к беспорядочному коду. Чтобы расти, вы должны поддерживать проект простым и удобным для сопровождения.
Вот стек, который мы используем для быстрой разработки и легкого масштабирования.
Стратегия работы с AI-агентами Не усложняйте архитектуру без необходимости. AI позволяет легко добавлять тысячи строк бесполезного кода.
- Держите файлы AGENTS.md или CLAUDE.md небольшими.
- Включайте только те правила проекта, в которых агенты часто ошибаются.
- Устанавливайте специфические навыки (skills) только тогда, когда они действительно нужны.
- Удаляйте навыки по завершении диалога, чтобы контекст оставался чистым.
Frontend и UI
- Next.js: Используйте App Router. Он обеспечивает серверный рендеринг для лучшего SEO и скорости.
- React: Лучшая экосистема для быстрого добавления новых функций.
- MUI (Material UI): Мы используем его, чтобы не проектировать всё с нуля в Figma. Это экономит месяцы работы.
- Zod и React Hook Form: Лучшая комбинация для работы со сложными формами и валидацией.
Backend и данные
- Firebase: Мы используем его для аутентификации, хранения данных и базы данных (Firestore).
- Firestore Rules: Позволяет управлять всеми правами доступа в одном файле. Это избавляет от необходимости писать повторяющийся код безопасности.
- Firebase Functions: Используйте их для сложной логики. Держите frontend простым, а backend — интеллектуальным.
- Vercel AI SDK: Самый простой способ интегрировать различные AI-модели в ваше приложение.
Тестирование и развертывание
- Интеграционные тесты: Мы используем Jest для тестирования сервисного слоя бэкенда. Мы фокусируемся на том, как части системы работают вместе, а не на мелких юнит-тестах.
- TypeScript: Необходим для безопасного рефакторинга.
- Vercel: Подключается к GitHub для мгновенного развертывания в production и создания preview-версий.
- 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