Веб-стек для стартапов в эпоху ИИ-агентов: Next.js, MUI и Firebase
Стек веб-технологий для стартапов в эпоху кодирующих агентов: Next.js, MUI, Firebase, Vercel и PostHog, с минимальной настройкой агента и обоснованием каждого выбора.
Источники: The Teach Stack for Building Full-Stack Apps in the AI-Agentic Era (2026 Edition)
Выбор технологической стеки, когда код наполовину написан автоматически
Инструменты для программирования, такие как Claude Code и Codex, изменили процесс создания программного обеспечения. Итерации стали гораздо быстрее, что полезно лишь в том случае, если код остается достаточно удобным для обслуживания и масштабируемым, чтобы проект мог продолжать развиваться.
Стартапы на ранней стадии существуют благодаря скорости итераций. Требования быстро меняются, функции добавляются ежедневно, а код постоянно переписывается. В таких условиях выбранные технологии должны обеспечивать возможность быстрых изменений без ухудшения пользовательского опыта.
Приведённый ниже технологический стек — результат примерно четырёх лет экспериментов с современными инструментами на реальной платформе для обучения. Он охватывает аутентификацию, интерфейс, бэкенд, хостинг, тестирование и многое другое; главная цель — быстрое создание нового функционала на основе кодовой базы, которую всё ещё могут обслуживать люди, при этом инфраструктура должна быть масштабируемой.
Простота агентов и кода
Агенты облегчают быстрое улучшение: исправления ошибок, новые функции и оптимизация производительности появляются быстро. Они также способствуют чрезмерной сложности реализации, поскольку добавление тысяч строк кода становится тривиальным заданием. Необходимо соблюдать дисциплину, избегая решения проблем, которых ещё нет, и сохраняя простоту кода, инфраструктуры и пользовательского опыта.
Даже в эпоху разработки с использованием агентов помогает простая, минималистичная настройка. Агенты лучше координируют свои действия, функции выпускаются быстрее, ошибки легче исправлять, а люди могут продолжать обслуживать существующее решение.
Подход к использованию агентов в производственном коде сбалансирован, а настройка остаётся скромной:
- Сохраняйте файлы
AGENTS.mdилиCLAUDE.mdкак можно короче. В них следует указывать только то, что повторяется в каждом диалоге, а также детали проекта, в которых агенты постоянно ошибаются. - Чрезмерно большие файлы с инструкциями могут снизить производительность модели и сделать её менее полезной.
На серверах MCP сервис PostHog обеспечивает легкий доступ к трассам ошибок и логам, что ускоряет отладку. Context7 предоставляет модели актуальную документацию к библиотекам, чтобы агенты могли ознакомиться с последними версиями документации к библиотекам и фреймворкам. В большинстве случаев агенты справляются с задачами без помощи сервера MCP, поэтому его включение редко бывает необходимым.
Как правило, каждый дополнительный инструмент, навык или сервер конкурируют за внимание модели. Всё, что не находит применения в текущей задаче, лучше исключить, а настройки можно пересмотреть каждый раз, когда возникает повторяющаяся ошибка, которую можно было бы исправить одной строкой инструкции.
Фронтенд: React и Next.js
React является предпочтительным выбором для ядра многих проектов полного стека. Vue и Svelte тоже являются вариантами, но большая экосистема библиотек React облегчает добавление функций и изменение направления разработки, и именно поэтому разработчики отдают ему предпочтение.
Слабым местом являются поисковые системы. Google и Bing используют ботов, которые читают HTML-код страницы, а страница на React обычно приходит с пустым телом от сервера. Чтобы сайт появился в результатах поиска, первый ответ от сервера должен содержать HTML с правильной информацией о странице.
Next.js справляется с этим. Это фреймворк React, предоставляющий возможности серверной отрисовки и статической генерации, поэтому страницы сначала отрисовываются на сервере, а затем HTML отправляется в браузер, что означает, что первоначальный контент уже содержит всё необходимое для ботов. После этого на клиент отправляется только необходимый JavaScript, что позволяет сократить размер пакета. Это улучшает как пользовательский опыт, так и возможности поисковых роботов.
Текущим стандартом в проектах Next.js является app router, который облегчает использование таких функций, как поэтапная статическая генерация и частичная предварительная отрисовка, что делает приложение более быстрым. Новые проекты следует начинать с его использования.
React движется в направлении серверной части, в некотором смысле приближаясь по духу к PHP, а app router обеспечивает хороший опыт разработки для компонентов, ориентированных на сервер. Кэширование, Turbopack и настройки, удобные для поисковых агентов, позволяют быстро создавать и улучшать приложения.
Интерфейс пользователя: библиотека компонентов вместо индивидуального дизайна
В традиционном веб-разработке сначала планируется проект, затем создается дизайн интерфейса и пользовательского опыта, после чего происходит реализация и множество обменов между дизайнерами и разработчиками. Стартапы не могут позволить себе длительные циклы разработки.
Самый эффективный подход — выбрать надежную рамку для работы с интерфейсом, в данном случае MUI, и следовать предустановленным шаблонам дизайна. Альтернатива заключается в том, чтобы дизайнер создавал всё в Figma, а затем разработчики пересоздавали это в React. Использование единого источника информации в кодовой базе позволяет сэкономить месяцы времени.
MUI предлагает обширный набор настраиваемых компонентов, покрывающих распространённые потребности. Всё можно изменить, но стандартные настройки настолько хороши, что большинство компонентов используются с их стандартным поведением и внешним видом. Кроме того, библиотека включает большой набор иконок, которые можно использовать в качестве компонентов React, поэтому их включение не представляет сложности.
Существуют и другие альтернативы:
- shadcn/ui — современный и популярный инструмент, хотя копирование кода библиотеки в собственную базу кода с помощью CLI считается некоторыми спорным подходом.
- Ant Design — отличный вариант.
- Chakra UI также может служить фреймворком интерфейса.
- HeroUI, ранее известный как NextUI, тоже хорош.
Некоторые предпочитают styled-components или Tailwind CSS. При использовании этих инструментов всё равно приходится писать много кода на CSS, что хуже с точки зрения опыта разработчика по сравнению с фреймворками интерфейса, особенно если цель — избежать полной переработки каждой страницы с нуля.
Для вдохновения могут помочь хранилища шаблонов. В собственном хранилище MUI есть множество привлекательных шаблонов интерфейса, а на Dribbble также доступны шаблоны для React. Ещё один вариант — попросить агента создать несколько прототипов и выбрать лучший; наличие навыков UI/UX улучшает качество получаемых результатов.
Формы
Формы занимают значительную долю в работе с полноценными веб-приложениями. Zod и React Hook Form хорошо сочетаются друг с другом и покрывают практически все сценарии использования. Zod отвечает за проверку схемы — типы данных, диапазоны значений, длину и перечни — в то время как React Hook Form предоставляет гибкий API для взаимодействия с формой. Вместе они позволяют использовать вложенные компоненты, которые делят одну форму, реализовывать сложные правила проверки и обеспечивать реальное обновление данных. Использование форм становится почти слишком простым.
Поскольку схема проверки представляет собой обычный объект, совместимый с TypeScript, одни и те же правила могут описывать, что принимает форма, и что ожидает функция на сервере. Это исключает возможность несоответствий между тем, что разрешает пользовательский интерфейс, и тем, что отклоняет сервер, а агенты могут читать схему гораздо надежнее, чем логику проверки, разбросанную по различным обработчикам.
Бэкенд, аутентификация и база данных
Firebase и Supabase предлагают сервисы бэкенда как услугу, способные масштабироваться до миллионов пользователей без необходимости обслуживания собственной инфраструктуры. В данном решении используется Firebase для аутентификации, хранения данных, базы данных Firestore и безсерверных функций, в которых реализуется пользовательская логика бэкенда.
Аутентификация
Clerk — мощный инструмент для аутентификации, но стандартная система Firebase также вполне подходит для этой цели. Firebase поставляет пакет под названием firebaseui-web, который позволяет настроить процесс аутентификации без необходимости писать код интерфейса. Для беспроблемной работы приложение Next.js также развертывается на специальном поддомене для аутентификации, чтобы Firebase мог без проблем обрабатывать процедуру входа.
База данных
В традиционной архитектуре, при наличии отдельного фронтенда и бэкенда с базой данных, фронтенд инициирует множество запросов к API, которые изменяют записи в базе данных. Во многих проектах около 80% этих запросов представляют собой простые операции CRUD, а оставшиеся 20% — более сложные, такие как обновление нескольких записей или агрегация данных из нескольких источников. Firebase оптимизирован для решения задач, связанных с этими 80%, что позволяет легко манипулировать данными с фронтенда без избыточных конечных точек.
Для этого используются два компонента.
- Правила Firestore. Контроль доступа и разрешения хранятся в одном файле —
firestore.rules. Конечным точкам API не нужно проверять разрешения в каждой функции, поскольку Firebase автоматически определяет, может ли пользователь прочитать данные или создать, обновить или удалить их. Такое разделение устраняет множество шаблонного кода. - Клиентское SDK Firestore. Создание, чтение, обновление и удаление данных осуществляются через Firebase SDK, который также поддерживает реальное время слушателей, увеличение счётчиков и пакетные обновления; всё это автоматически проверяется по правилам
firestore.rules.
Есть один недостаток — подход к хранению данных. Firestore оптимизирован для чтения, которое обычно составляет основную нагрузку, поэтому он способствует использованию денормализованных данных. Для специалистов с опытом работы с SQL это может показаться непривычным, и стоит посмотреть хорошую презентацию о моделировании данных в Firestore.
В целом Firestore обеспечивает отличный пользовательский опыт, особенно благодаря возможности отслеживания изменений в реальном времени, а также хороший опыт разработки, позволяющий приложению быстро адаптироваться к меняющимся требованиям.
Лучше всего начинать новые проекты с использованием корпоративной версии Firestore в режиме Native. Она поддерживает функции, отсутствующие в более старом стандартном тарифе, такие как запросы типа pipeline и встроенный поиск полнотекстового содержимого, что обеспечивает гибкость, характерную для баз данных вроде MongoDB, наряду с простотой использования Firestore.
Функции без сервера
Код клиента сохраняется намеренно простым, причем важные части изолируются в коде серверной части внутри функций без сервера. Подход, при котором фронтенд остается простым, а серверная часть — сложной, оказался эффективным. Firebase Functions могут содержать любой код серверной части, и их можно запускать по обычному HTTP-запросу, при создании или обновлении записи в Firestore или по расписанию с помощью Pub/Sub в качестве задачи cron. Все функции серверной части могут находиться в отдельных, самодостаточных функциях.
Инструменты типа BaaS, такие как Firebase, экономят много времени и в основном просто работают. Ошибки, связанные с нарушениями в базе данных или неудачными миграциями, встречаются крайне редко.
Функции ИИ
ИИ является важной частью современных веб-приложений, и многие продукты включают в себя чат-ботов и агентов. SDK ИИ от Vercel обеспечивает интеграцию с различными поставщиками моделей и возможность создания собственных агентов. Его сильная сторона — простота подключения разных моделей и их переключения, а также более удобный опыт разработки по сравнению с любым SDK, ориентированным на конкретную модель.
Тестирование
Тестирование, вероятно, является самой спорной темой, особенно для стартапов с постоянно меняющимися требованиями. В начальный период тестов не существовало. По мере развития продукта изменение существующего кода с уверенностью в том, что сервис будет продолжать работать, стало практически невозможным, поэтому были введены тесты для бэкенда, а именно для слоя сервисов Firebase Functions. Фронтенд не тестируется, поскольку он оставляется простым, в то время как сложный бэкенд тестируется на крайние случаи.
Для тестирования бэкенда используется Jest, а для генерации фиктивных данных внутри тестов — faker.js. Они выполняются в отдельном проекте Firebase, чтобы производственная среда оставалась нетронутой, что также позволяет быстро вносить изменения без опасений повлиять на пользователей. После прохождения тестов новая версия Functions запускается в производство.
Причина тестирования только бэкенда заключается в затратах. Фронтенд, который лишь отображает данные и вызывает функции, содержит мало логики, достойной проверки, а тесты интерфейса часто ломаются при изменении дизайна, что в молодом продукте происходит постоянно. Именно в логике бэкенда тихая регрессия может повредить данные или неправильно начислить сумму пользователю, поэтому усилия сосредотачиваются именно там.
Рефакторинг
По мере роста проекта функции меняются, требования изменяются, а компоненты стареют, поэтому рефакторинг становится неизбежным. Два фактора в наибольшей степени способствуют уверенной модификации кода: TypeScript и надежные тесты интеграции. TypeScript обеспечивает сохранение типов после изменений, а тесты интеграции подтверждают, что логика по-прежнему работает корректно.
Рефакторинг возникает чаще, чем ожидается. Не было ни одного периода в шесть месяцев без какого-либо крупного рефакторинга, поскольку платформа постоянно меняется, и внедрение новых технологий требует значительных изменений в коде. Двумя самыми важными этапами стали переход с обычного React на Next.js, а затем — с маршрутизатора pages в Next.js на маршрутизатор app.
Хостинг
Поскольку бэкенд полностью находится на Firebase (Google Cloud), фронтенд развертывается на Vercel, который предоставляет наиболее удобную инфраструктуру для работы с Next.js. Его интеграция с GitHub хорошо справляется с ветками и не требует ручной настройки:
- Публикация кода в ветку
mainавтоматически приводит к его развертыванию в продакшене. - Публикация кода в любую другую ветку запускает развертывание в режиме превью с собственной ссылкой, что позволяет просматривать каждую ветку в реальном времени, ускоряя и упрощая процесс разработки.
Проверка изменений означает открытие ссылки, а не загрузку ветки и её запуск локально, что подходит для небольшой команды, в которой дизайнеры, специалисты по продукту и инженеры хотят видеть работу в процессе разработки без необходимости настраивать что-либо на собственных устройствах.
Аналитика и мониторинг
Знание того, кто являются пользователи и как они используют продукт, имеет большую ценность. Это может сократить время разработки на недели или месяцы, показывая, что следует отдать приоритет, а эффективный мониторинг улучшает пользовательский опыт за счёт выявления распространённых ошибок.
PostHog обеспечивает общую аналитику и мониторинг продукта, включая воспроизведение сессий, захват исключений, логи и карты источников в производственной среде. Google Analytics для Firebase — бесплатная альтернатива, требующая дополнительной настройки, а Sentry — более дорогой вариант. Все они помогают лучше понимать пользователей, но ничто не заменит прямого общения с ними.
Электронная почта
Электронная почта по-прежнему остается одним из самых надежных способов поддерживать связь с пользователями, отправлять обновления и удерживать их вовлеченность. Недавно стек технологий был изменен с Sendgrid на react-email вместе с Resend.
react-email позволяет создавать высокостепенно настраиваемые письма, преобразуя каждое из них в компонент React. Resend хорошо интегрируется с ним и имеет разумные цены. Поскольку письма представляют собой компоненты React, они контролируются с помощью системы версионного управления вместе с остальным кодом, поэтому каждое изменение отслеживается в одном месте.
Предварительный просмотр и тестирование шаблонов также происходит легко, поскольку тот же компонент отображается в браузере во время разработки и генерирует HTML, который попадает в почтовые ящики пользователей.
Связанные статьи
- Агент для QuickBooks Finance, работающий на локальной нейросети с помощью Ollama и LangChain — Агент типа ReAct на модели Qwen 3.5 9B и видеокарте RTX 4070 обрабатывает данные QuickBooks в реальном времени без каких-либо затрат на облачные сервисы. Просмотрите код, результаты работы и известные ограничения.
- Проектирование системы поиска работ для множества агентов: конвейер обработки, HyDE и возможности мониторинга — Девятиэтапный конвейер LangGraph для сопоставления резюме с вакансиями, включающий восемь вариантов настройки параметров HyDE, маршрутизации моделей, ограничений по частоте запросов и отслеживания процессов.