● Матрица стеков
Что такое «стек» простым языком
Стек — инструменты, которые собирают, хостят и поддерживают сайт. Неверный стек = дорогое обслуживание. Верный = дёшево и быстро.
По умолчанию 2026: простой сайт → Astro + Cloudflare Pages + Markdown. Приложения с входом → Next.js 15+ на Vercel. Магазин → Shopify. GSC обязателен для Google; TikTok опционален.
● Дефолты 2026
Философия стека — когда что выбирать
S-01
Простой сайт
Astro 5 + Cloudflare Pages + Markdown. Сантехник, юрист, кафе.
S-02
Приложение с входом
Next.js 15+ на Vercel. Билеты, SaaS, дашборды.
S-03
Магазин
Shopify в первую очередь. Своя корзина — когда выручка оправдывает разработку.
S-04
TikTok vs GSC
Сначала GSC — бесплатный трафик из Google. TikTok — когда можешь снимать реальную работу раз в неделю.
S-05
Яндекс
Метрика + Вебмастер, если клиенты RU/UA/BY. Пропусти для чистого Google PL.
● Как применять стеки
Готовые наборы и простые правила
Сначала выбери тип проекта, потом инструменты. Так страница перестаёт быть списком модных слов и становится рабочей схемой.
B-01Astro + Cloudflare Pages + Markdown + GSC + Google Business Profile
Сайт услуг
Ты продаёшь услуги, нужны контакты и быстрый SEO-старт без сложного приложения.
Первые шаги
- Сформулируй один оффер и одну кнопку действия.
- Собери 5–7 страниц: главная, услуги, о нас, контакты, FAQ.
- Подключи домен, форму, Search Console и карточку в картах.
- Добавь отзывы, часы работы и реальные фото.
Не делай
- Не начинай с Next.js.
- Не ставь CMS, если изменения редкие.
B-02Astro или Next.js + Markdown + GSC + GA4 или Plausible
Контент-сайт
Публикуешь статьи, гайды или базу знаний.
Первые шаги
- Сделай карту тем и страниц-столпов.
- Задай шаблон статьи и правила внутренних ссылок.
- Добавь sitemap, metadata и страницу автора.
- Раз в месяц обновляй слабые материалы.
Не делай
- Не публикуй AI-текст без ревью.
- Не делай много почти одинаковых статей.
B-03Shopify + GA4 + GSC + реклама позже
Магазин
Продаёшь товары и не хочешь сам поддерживать checkout.
Первые шаги
- Подготовь товары, цены, фото и доставку.
- Настрой тему, коллекции, налоги и юридические страницы.
- Сделай реальный тестовый заказ и проверь письма.
- Только потом подключай фиды или рекламу.
Не делай
- Не делай свою корзину на старте.
- Не запускай рекламу до рабочего checkout.
B-04Next.js + Vercel + Supabase + Stripe + email
События и билеты
Ты продаёшь места, билеты или доступ с лимитом.
Первые шаги
- Сначала определи типы билетов, лимит и возвраты.
- Собери checkout, webhook и хранение билетов.
- Отправляй билеты с QR и подтверждение по email.
- Добавь экран check-in для команды на входе.
Не делай
- Не используй Astro для платных билетов.
- Не опирайся на ручные переводы на старте.
B-05Next.js + Vercel + Supabase + Stripe + auth
SaaS
Нужны логин, роли, подписки и состояние пользователя.
Первые шаги
- Опиши один MVP workflow и одну модель цен.
- Определи роли, таблицы и доступ к данным.
- Подключи billing, portal клиента и sync webhook.
- Добавь onboarding, лимиты и контакт поддержки.
Не делай
- Не начинай с одного landing page.
- Не пропускай staging и тесты платежей.
B-06n8n + формы + CRM или email + логи
Автоматизация
Нужны повторяемые маршруты лидов, уведомления или sync.
Первые шаги
- Нарисуй один flow на бумаге: trigger, action, owner.
- Добавь retry, логи и alert при ошибке.
- Проверь дубли и лимиты API.
- Запиши короткий runbook передачи.
Не делай
- Не автоматизируй, пока форма не работает.
- Не запускай flow без логов.
● Как применять стеки
Правила, которые экономят время
Сначала выбери тип проекта, потом инструменты. Так страница перестаёт быть списком модных слов и становится рабочей схемой.
Правила, которые экономят время
- Если на сайте меньше 10 страниц и нет логина, начинай с Astro.
- Бери Next.js, когда нужны логин, дашборды, платежи или пользовательское состояние.
- Бери Shopify, когда главная задача — продавать товары, а не строить софт.
- Сначала подключи Google Search Console, потом уже рекламу.
- Сначала один analytics, второй только если понятно зачем.
- Инструменты Yandex добавляй только если аудитория реально ими пользуется.
- Если контент будет редактировать не технический человек каждый день, не заставляй его сразу жить в Git.
Когда нужен upgrade стека
- Astro → Next.js: появляются auth, dashboard, платежи или user state.
- Markdown → CMS: владельцу контента нужен visual editor и он публикует часто.
- Shopify → custom commerce: только когда бизнес-логика оправдывает dev cost.
- GA4 / Plausible → PostHog: нужны event funnels, product metrics или session replay.
- Без рекламы → реклама: только после того, как страница, форма и tracking уже работают.
Перед запуском
- Владелец может объяснить сайт одной фразой.
- Домен, SSL, форма и Search Console работают.
- Мобильная версия проверена на реальном телефоне.
- Есть 404, sitemap и robots.
- После посещения страницы есть понятный следующий шаг.
● Матрица стеков
Что такое «стек» простым языком
Стек — инструменты, которые собирают, хостят и поддерживают сайт. Неверный стек = дорогое обслуживание. Верный = дёшево и быстро.
| Инструмент | Категория | Простыми словами | Бери когда | AI | Уровень | Цена |
|---|---|---|---|---|---|---|
| Astro | Сборщик сайта (код) | Быстрые статичные страницы. Как брошюра, но код ваш. | Сантехник, юрист, кафе — простые сайты услуг | Отлично — простая структура, AI редко ломает сборку | Новичок | Бесплатно |
| Next.js | Сборщик сайта (код) | Полноценный фреймворк. Для сайтов, которые работают как программа. | Билеты, SaaS, дашборды, авторизация | Очень хорошо — огромная документация, но AI может переусложнить простой сайт | Средний | Низкий |
| Cloudflare Pages | Где сайт живёт в интернете | Бесплатный хостинг для Astro/статики. Быстро по всему миру. | По умолчанию для простых бизнес-сайтов | — | Новичок | Бесплатно |
| Vercel | Где сайт живёт в интернете | Хостинг под Next.js. Превью при каждом изменении. | Next.js приложения, SaaS, билеты | — | Средний | Низкий |
| Markdown files | Как править текст | Текстовые файлы правите в Cursor или GitHub. Без админки. | Маленькие сайты, один редактор, мало поддержки | — | Новичок | Бесплатно |
| Shopify | Платформа магазина | Готовый интернет-магазин. Товары, корзина, оплата из коробки. | Продажа товаров без программирования корзины | — | Новичок | Средний |
| Supabase | Хранение данных | Онлайн-база + вход. Как таблица Excel, но для приложений. | Билеты, бронирования, аккаунты | — | Средний | Низкий |
| Streamlit | Сборщик сайта (код) | Быстрые внутренние панели на Python. Не для публичных сайтов. | Внутренние отчёты, инструменты для команды | — | Средний | Низкий |
| Stripe | Приём оплаты | Оплата картой в своём приложении. Нужна настройка разработчиком. | SaaS-подписки, своя продажа билетов | — | Продвинутый | Низкий |
| n8n | Боты и скрипты | Связывает сервисы визуально. Почта → таблица → Telegram. | Форма → CRM → уведомления | — | Средний | Низкий |
| Google Analytics 4 | Кто заходит и что делает | Бесплатная статистика Google: визиты, страницы, откуда пришли. | Бесплатная аналитика по умолчанию, воронки и связка с Google Ads | — | Новичок | Бесплатно |
| Plausible | Кто заходит и что делает | Простая приватная статистика. Один скрипт, чистая панель. | Новичок, которому нужны цифры без сложности GA4 | — | Новичок | Низкий |
| Umami | Кто заходит и что делает | Open-source аналитика на своём сервере. Как Plausible, DIY. | Privacy-first сайты, если есть кто поднимет маленький сервер | — | Средний | Бесплатно |
| Yandex Metrica | Кто заходит и что делает | Аналитика Яндекса. Обязательна для аудитории RU/UA/BY. | Сайт на русском или клиенты из СНГ | — | Новичок | Бесплатно |
| Microsoft Clarity | Кто заходит и что делает | Бесплатные тепловые карты и записи сессий. Где люди злятся и кликают. | Отладка непонятных форм и вёрстки после запуска | — | Новичок | Бесплатно |
| PostHog | Кто заходит и что делает | Аналитика + feature flags + replay для продуктовых приложений. | SaaS и приложения с отслеживанием пути пользователя | — | Средний | Низкий |
| Google Ads | Платный трафик | Платишь Google за показ сайта, когда ищут твою услугу. | Локальный поиск с intent после сайта + GSC | — | Новичок | Средний |
| Meta Ads | Платный трафик | Реклама Facebook и Instagram. Хороша для визуальных услуг и ретаргета. | Салон, ремонт, еда — всё фотогеничное | — | Новичок | Средний |
| TikTok Ads | Платный трафик | Платный охват в TikTok. Только после того как органика показала отклик. | Молодая аудитория, визуальные профессии, вирусные офферы | — | Новичок | Средний |
| Yandex Direct | Платный трафик | Платный поиск Яндекса. Аналог Google Ads для RU/UA/BY. | Рынок СНГ с долей поиска Яндекса | — | Новичок | Средний |
| TikTok Business | Соцсети и локальное присутствие | Бизнес-аккаунт TikTok с аналитикой и ссылкой на сайт в bio. | Рабочие профессии, еда, beauty — показ реальной работы за 15–30 сек | — | Новичок | Бесплатно |
| Соцсети и локальное присутствие | Фото-портфолио + Stories + Reels. Переиспользуй ролики с TikTok. | Визуальные бренды, локальные услуги, кросс-пост из TikTok | — | Новичок | Бесплатно | |
| Google Business Profile | Соцсети и локальное присутствие | Точка на Google Maps с телефоном, часами, отзывами. Бесплатные лиды. | Любой локальный бизнес с адресом или зоной выезда | — | Новичок | Бесплатно |
| Google Search Console | Инструменты индексации | Бесплатный инструмент Google: проиндексирован ли сайт, какие запросы дают клики. | Каждый публичный сайт, который должен быть в Google | — | Новичок | Бесплатно |
| Bing Webmaster | Инструменты индексации | То же что GSC, но для Bing. Импорт из GSC в один клик. | Дополнительная видимость в поиске за 10 минут | — | Новичок | Бесплатно |
| Yandex Webmaster | Инструменты индексации | Инструмент индексации Яндекса. Аналог GSC для поиска Яндекса. | Русскоязычные сайты и аудитория СНГ | — | Новичок | Бесплатно |
| Remix | Выбор фреймворка 2026 | Фреймворк под формы и быструю загрузку данных. Сайты-приложения. | Приложения с формами, дашборды с серверными данными | Хорошо — меньше сообщество чем Next.js, AI может выдумывать API | Средний | Низкий |
| SvelteKit | Выбор фреймворка 2026 | Быстрые лёгкие сайты и приложения. Меньше boilerplate чем React. | Приложения чувствительные к скорости, если команда знает Svelte | Умеренно — растёт поддержка AI, меньше ответов на SO | Средний | Низкий |
| Nuxt | Выбор фреймворка 2026 | Фреймворк на Vue. Силён для контент-сайтов и EU-агентств. | Команда на Vue, мультиязычный контент, маркетинговые сайты | Хорошо для Vue — AI знает Vue 3, Nuxt 4 меньше чем Next | Средний | Низкий |