● Матриця stack
Що таке «stack» простою мовою
Stack — інструменти, що збирають, хостять і підтримують сайт. Невірний stack = дороге обслуговування. Вірний = дешево і швидко.
За замовчуванням 2026: простий сайт → Astro + Cloudflare Pages + Markdown. Застосунки з входом → Next.js 15+ на Vercel. Магазин → Shopify. GSC обовʼязковий для Google; TikTok опційний.
● Дефолти 2026
Філософія stack — коли що обирати
S-01
Простий сайт
Astro 5 + Cloudflare Pages + Markdown. Сантехнік, юрист, кафе.
S-02
Застосунок з входом
Next.js 15+ на Vercel. Квитки, SaaS, дашборди.
S-03
Магазин
Shopify спочатку. Свій кошик — коли revenue виправдовує розробку.
S-04
TikTok vs GSC
Спочатку GSC — безкоштовний трафік з Google. TikTok — коли можеш знімати роботу щотижня.
S-05
Яндекс
Метрика + Вебмастер, якщо клієнти RU/UA/BY. Пропусти для чистого Google PL.
● Як застосовувати stack
Готові набори та прості правила
Спочатку обери тип проєкту, потім інструменти. Так page перестає бути списком слів і стає робочою схемою.
B-01Astro + Cloudflare Pages + Markdown + GSC + Google Business Profile
Сайт послуг
Ти продаєш послуги, потрібні контакти та швидкий SEO-старт без складного app.
Перші кроки
- Сформулюй один офер і одну кнопку дії.
- Збери 5–7 сторінок: головна, послуги, про нас, контакти, FAQ.
- Підключи домен, форму, Search Console і картку в мапах.
- Додай відгуки, години роботи та реальні фото.
Не роби
- Не починай з Next.js.
- Не став CMS, якщо зміни рідкі.
B-02Astro або Next.js + Markdown + GSC + GA4 або Plausible
Content site
Публікуєш статті, гайди або knowledge base.
Перші кроки
- Зроби карту тем і сторінок-стовпів.
- Задай шаблон статті та правила внутрішніх лінків.
- Додай sitemap, metadata і сторінку автора.
- Раз на місяць оновлюй слабкі матеріали.
Не роби
- Не публікуй AI-текст без review.
- Не роби багато майже однакових статей.
B-03Shopify + GA4 + GSC + реклама пізніше
Магазин
Продаєш товари і не хочеш підтримувати checkout сам.
Перші кроки
- Підготуй товари, ціни, фото і доставку.
- Налаштуй theme, колекції, податки та legal pages.
- Зроби реальне тестове замовлення і перевір листи.
- Лише потім підключай фіди або рекламу.
Не роби
- Не роби свій кошик на старті.
- Не запускай рекламу до робочого checkout.
B-04Next.js + Vercel + Supabase + Stripe + email
Події та квитки
Ти продаєш місця, квитки або доступ з лімітом.
Перші кроки
- Спочатку визнач типи квитків, ліміт і повернення.
- Збери checkout, webhook і збереження квитків.
- Надсилай квитки з QR та підтвердження email.
- Додай екран check-in для команди на вході.
Не роби
- Не використовуй Astro для paid ticketing.
- Не спирайся на ручні перекази на старті.
B-05Next.js + Vercel + Supabase + Stripe + auth
SaaS
Потрібні login, ролі, підписки і стан користувача.
Перші кроки
- Опиши один MVP workflow і одну модель цін.
- Визнач ролі, таблиці та доступ до даних.
- Підключи billing, portal клієнта і sync webhook.
- Додай onboarding, ліміти і контакт підтримки.
Не роби
- Не починай з одного landing page.
- Не пропускай staging і тести платежів.
B-06n8n + форми + CRM або email + логи
Автоматизація
Потрібні повторювані маршрути лідів, сповіщення або sync.
Перші кроки
- Намалюй один flow на папері: trigger, action, owner.
- Додай retry, логи та alert при помилці.
- Перевір дублікати й ліміти API.
- Запиши короткий runbook передачі.
Не роби
- Не автоматизуй, поки форма не працює.
- Не запускай flow без логів.
● Як застосовувати stack
Правила, що економлять час
Спочатку обери тип проєкту, потім інструменти. Так page перестає бути списком слів і стає робочою схемою.
Правила, що економлять час
- Якщо на сайті менше 10 сторінок і немає логіну, стартуй з Astro.
- Бери Next.js, коли потрібні login, dashboard, платежі або user state.
- Бери Shopify, коли головна задача — продавати товари, а не будувати software.
- Спочатку підключи Google Search Console, потім уже рекламу.
- Спершу один analytics, другий тільки якщо зрозуміло навіщо.
- Інструменти Yandex додавай лише якщо аудиторія реально ними користується.
- Якщо контент буде редагувати нетехнічна людина щодня, не змушуй її одразу жити в Git.
Коли потрібен upgrade stack
- Astro → Next.js: зʼявляються auth, dashboard, платежі або user state.
- Markdown → CMS: власнику контенту потрібен visual editor і він публікує часто.
- Shopify → custom commerce: лише коли business logic виправдовує dev cost.
- GA4 / Plausible → PostHog: потрібні event funnels, product metrics або session replay.
- Без реклами → реклама: тільки після того, як сторінка, форма і tracking уже працюють.
Перед запуском
- Власник може пояснити сайт одним реченням.
- Домен, SSL, форма і Search Console працюють.
- Мобільна версія перевірена на реальному телефоні.
- Є 404, sitemap і robots.
- Після відвідування сторінки є зрозумілий наступний крок.
● Матриця stack
Що таке «stack» простою мовою
Stack — інструменти, що збирають, хостять і підтримують сайт. Невірний stack = дороге обслуговування. Вірний = дешево і швидко.
| Інструмент | Категорія | Простими словами | Бери коли | AI | Рівень | Ціна |
|---|---|---|---|---|---|---|
| Astro | Збирач сайту (код) | Швидкі статичні сторінки. Як брошура, але код ваш. | Сантехнік, юрист, кафе — прості сайти послуг | Відмінно — проста структура, AI рідко ламає build | Новачок | Безкоштовно |
| Next.js | Збирач сайту (код) | Повноцінний фреймворк. Для сайтів, що працюють як програма. | Квитки, SaaS, дашборди, авторизація | Дуже добре — величезна документація, але AI може over-engineerити простий сайт | Середній | Низький |
| 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 | Хто заходить і що робить | Безкоштовні heatmap і записи сесій. Де люди зляться й клікають. | Відладка незрозумілих форм і вёрстки після запуску | — | Новачок | Безкоштовно |
| PostHog | Хто заходить і що робить | Аналітика + feature flags + replay для продуктових застосунків. | SaaS і застосунки з відстеженням user journey | — | Середній | Низький |
| 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 | Середній | Низький |