React, Next.js и фантомные боли: Или почему ваш сайт превратился в черный ящик, который нельзя починить
Приветствуем вас, уважаемый владелец сайта! Помните те светлые времена, когда чтобы поменять цвет кнопки на сайте, нужно было просто открыть файл style.css и поменять одно значение? Когда контент лежал в понятных HTML-файлах, а не в JSON-конфигах? Когда слово "билд" ассоциировалось со стройкой, а не с панической атакой?
А теперь вы — счастливый обладатель современного, прогрессивного сайта на React/Next.js. И когда вы просите своего нового разработчика: "Можно просто поменять тут текст в футере?" — в ответ слышите: "Конечно! Нужно обновить компонент Footer в ветке feature/footer-update, запустить билд, протестировать на staging, сделать PR, слинтерить, прогнать юнит-тесты, и если всё окей — замержить в main, тогда запушится в Vercel и через 5 минут обновится в продакшене".
Вы моргаете. "А нельзя просто в админке?"
Разбираемся, как мы дошли до жизни такой.
Раньше (в мире PHP/CMS):
У вас есть файл footer.php или админка DLE/WordPress. Открыли → нашли "Все права защищены" → поменяли на "Любые права можно обсудить" → сохранили. Всё.
Сейчас (в мире React):
Текст футера — это строка в файле Footer.tsx:
Проблема: Чтобы поменять эту надпись, нужно:
Риск: Ваш сайт — теперь как автомобиль Tesla: чтобы поменять лампочку, нужно ехать в авторизованный сервис, потому что у вас нет доступа к капоту.
Раньше (с Bootstrap):
Хочешь другой цвет? Лезешь в
Сейчас (с Tailwind):
А теперь попробуйте понять, какой это цвет синего. bg-blue-500 — это что? #3b82f6? Или #1d4ed8? А где это определено?
Ответ: В конфиге Tailwind. Который тоже в коде. Который компилируется. И чтобы поменять палитру бренда, нужно:
Но самое веселое: Когда вы получаете готовый сайт, в папке build/ или out/ лежит ОДИН большой CSS-файл с кучей минифицированных классов вроде .a1b2c3d. И понять, где там ваша кнопка — это как искать иголку в стоге сена, который потом сожгли.
Классический сайт:
React/Next.js сайт:
И вот вы уже час ищете:
Когда вам сдают сайт на React/Next.js, вы получаете:
А вот что НЕ входит в комплект:
Реальный риск №1: Разработчик исчезает, а с ним и знания о том:
Реальный риск №2: Вы хотите поменять подрядчика. Новые разработчики смотрят на код и говорят:
- "Здесь нет Storybook"
- "Здесь кривая структура компонентов"
Запрос клиента: "В футере старый номер, поменяйте на новый".
Что происходит на самом деле:
Итог: 8 дней на изменение одной строки. Стоимость: 15 000 рублей. Клиент в шоке.
Если вам предлагают сайт на React/Next.js, задайте простые вопросы:
Запросите демо: как поменять текст на главной. Если процесс включает git pull, npm install, npm run build — это красный флаг для несложного сайта.
Попросите:
Для сайта-визитки, лендинга, каталога из 10 товаров — React/Next.js это как управлять квадрокоптером с пульта от спутника. Слишком сложно, слишком дорого в поддержке.
React/Next.js/Tailwind — это микроскоп. Инструмент невероятной точности для сложных, динамических, интерактивных веб-приложений (как интерфейс банка, админ-панель SaaS, сложный конструктор).
Но если вам нужно повесить картину на стену (сайт-визитка, блог, каталог) — вам нужен молоток (HTML/CSS, простая CMS).
Трагедия происходит, когда: Вам продают микроскоп для забивания гвоздей. И каждый раз, когда нужно перевесить картину, приходится вызывать инженера-оптика, калибровать линзы и проводить юстировку.
Мораль: Самый "модный" стек — не всегда лучший для вашей задачи. Прежде чем соглашаться на React/Next.js, спросите себя: "А действительно ли мне нужна вся эта сложность? Или я просто хочу, чтобы контент можно было легко обновлять?"
Иногда лучшее решение — то, которое не требует ежедневного присутствия шамана-разработчика для поддержания магии. Волшебство должно работать само, а не только когда колдун не в отпуске.
А теперь вы — счастливый обладатель современного, прогрессивного сайта на React/Next.js. И когда вы просите своего нового разработчика: "Можно просто поменять тут текст в футере?" — в ответ слышите: "Конечно! Нужно обновить компонент Footer в ветке feature/footer-update, запустить билд, протестировать на staging, сделать PR, слинтерить, прогнать юнит-тесты, и если всё окей — замержить в main, тогда запушится в Vercel и через 5 минут обновится в продакшене".
Вы моргаете. "А нельзя просто в админке?"
Разбираемся, как мы дошли до жизни такой.
🎭 Акты трагедии в трех частях
Акт 1: Контент, замурованный в компонентах
Раньше (в мире PHP/CMS):
У вас есть файл footer.php или админка DLE/WordPress. Открыли → нашли "Все права защищены" → поменяли на "Любые права можно обсудить" → сохранили. Всё.
Сейчас (в мире React):
Текст футера — это строка в файле Footer.tsx:
tsx
// Где-то в дебрях вашего проекта...
const Footer = () => {
return (
<footer className="bg-gray-900 text-white p-4">
<p>© 2024 My Startup. All rights reserved.</p>
// ^^^^ Вот этот текст ^^^^
// Он живет здесь. В коде. В TypeScript файле.
// Он скомпилирован в JavaScript, который скомпилирован в бандл...
</p>
);
};
Проблема: Чтобы поменять эту надпись, нужно:
- Найти разработчика (который уволился полгода назад)
- Получить доступ к репозиторию (пароль от которого тоже у него)
- Установить Node.js, npm, все зависимости (которых 1.2 ГБ)
- Найти ЭТОТ конкретный файл среди 300 таких же
- Не сломать при этом синтаксис TypeScript
- Запустить
(и молиться, чтобы он прошел)npm run build - Задеплоить куда-то (а как? ах да, через Vercel!)
Риск: Ваш сайт — теперь как автомобиль Tesla: чтобы поменять лампочку, нужно ехать в авторизованный сервис, потому что у вас нет доступа к капоту.
Акт 2: CSS, который превратился в мистические классы
Раньше (с Bootstrap):
html
<button class="btn btn-primary">Купить</button>
Хочешь другой цвет? Лезешь в
custom.css
css
.btn-primary {
background-color: #ff6b6b !important;
}
Сейчас (с Tailwind):
tsx
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Купить
</button>
А теперь попробуйте понять, какой это цвет синего. bg-blue-500 — это что? #3b82f6? Или #1d4ed8? А где это определено?
Ответ: В конфиге Tailwind. Который тоже в коде. Который компилируется. И чтобы поменять палитру бренда, нужно:
- Найти
tailwind.config.js - Понять его синтаксис
- Не сломать при этом все остальные
классыblue-* - Пересобрать весь CSS
Но самое веселое: Когда вы получаете готовый сайт, в папке build/ или out/ лежит ОДИН большой CSS-файл с кучей минифицированных классов вроде .a1b2c3d. И понять, где там ваша кнопка — это как искать иголку в стоге сена, который потом сожгли.
Акт 3: "Сборка" — магический ритуал вместо простого сохранения файла
Классический сайт:
- Изменил HTML/CSS файл
- Загрузил на хостинг по FTP
- Всё работает
React/Next.js сайт:
bash
$ npm run build
> next build
info - Creating an optimized production build...
⚠️ Warning: React version mismatch
❌ Error: Component Something is missing required prop
🔧 Building JavaScript bundles (3/5)
💥 Failed to compile: Module not found: ./SomeComponent
И вот вы уже час ищете:
- Почему "React version mismatch", если ничего не обновляли?
- Что такое "tree-shaking" и почему оно "упало"?
- Почему билд на вашем ноутбуке отличается от билда на сервере?
- Что за таинственный "Webpack" и почему он плачет?
📦 Черный ящик: Что вы на самом деле покупаете
Когда вам сдают сайт на React/Next.js, вы получаете:
- Исходники (папка с тысячами .tsx, .js, .json файлов) — это как чертежи машины.
- Скрипты сборки (package.json, webpack.config.js) — это как станки для производства.
- И... всё.
А вот что НЕ входит в комплект:
- Знание, как этим всем пользоваться
- Документация, как обновлять контент
- Админка для редактирования текстов
- Понятный интерфейс для смены картинок
Реальный риск №1: Разработчик исчезает, а с ним и знания о том:
- Как запустить проект локально (у вас Windows, а проект заточен под Mac?)
- Какая версия Node.js нужна? (14? 16? 18? LTS? Current?)
- Почему npm install падает с ошибкой на 20-й минуте?
- Что означают все эти скрипты в package.json?
Реальный риск №2: Вы хотите поменять подрядчика. Новые разработчики смотрят на код и говорят:
- "Здесь нет Storybook"
- "Здесь кривая структура компонентов"
- "Здесь нет Storybook"
- "Здесь кривая структура компонентов"
- "Здесь устаревшая версия Next.js"
- "Здесь кастомный Webpack, который никто не понимает"
- "Давайте перепишем с нуля на Vue/Nuxt" (спойлер: будет то же самое)
🏥 Пример из практики: "Просто обновите номер телефона!"
Запрос клиента: "В футере старый номер, поменяйте на новый".
Что происходит на самом деле:
- День 1: Разработчик ушел в отпуск. Ждем.
- День 5: Нашел файл
src/components/Layout/Footer/FooterContacts.tsx - Обновил номер в коде:
tsx
const phoneNumber = '+7 (999) 123-45-67'; // Было +7 (999) 000-00-00
- Запустил
→ ОШИБКА!npm run build - Оказывается, этот номер еще используется в src/hooks/useContactForm.ts
- И в src/utils/constants.ts
- И захардкожен в трех местах в тестах
- День 7: После 2 дней правок, билд наконец проходит!
- Но на staging'е номер не обновляется — нужно очистить кэш Vercel
- День 8: В продакшене появился новый номер!
Итог: 8 дней на изменение одной строки. Стоимость: 15 000 рублей. Клиент в шоке.
🛡️ Как защититься? Или "Что спросить у разработчика ДО начала"
Если вам предлагают сайт на React/Next.js, задайте простые вопросы:
1. "Как Я буду менять контент?"
- Плохой ответ: "Будете писать нам, мы внесем изменения"
- Хороший ответ: "Мы подключим CMS (Strapi/Contentful) / Сделаем админку / Настроим конфиги в JSON, которые вы сможете редактировать"
2. "Можно посмотреть процесс обновления текста?"
Запросите демо: как поменять текст на главной. Если процесс включает git pull, npm install, npm run build — это красный флаг для несложного сайта.
3. "Что произойдет, если вы исчезнете?"
Попросите:
- Полную документацию по запуску проекта
- Docker-контейнер для гарантированной сборки
- Инструкцию "как передать проект другому разработчику"
4. "Есть ли здесь over-engineering?"
Для сайта-визитки, лендинга, каталога из 10 товаров — React/Next.js это как управлять квадрокоптером с пульта от спутника. Слишком сложно, слишком дорого в поддержке.
⚖️ Вывод: Молоток и микроскоп
React/Next.js/Tailwind — это микроскоп. Инструмент невероятной точности для сложных, динамических, интерактивных веб-приложений (как интерфейс банка, админ-панель SaaS, сложный конструктор).
Но если вам нужно повесить картину на стену (сайт-визитка, блог, каталог) — вам нужен молоток (HTML/CSS, простая CMS).
Трагедия происходит, когда: Вам продают микроскоп для забивания гвоздей. И каждый раз, когда нужно перевесить картину, приходится вызывать инженера-оптика, калибровать линзы и проводить юстировку.
Мораль: Самый "модный" стек — не всегда лучший для вашей задачи. Прежде чем соглашаться на React/Next.js, спросите себя: "А действительно ли мне нужна вся эта сложность? Или я просто хочу, чтобы контент можно было легко обновлять?"
Иногда лучшее решение — то, которое не требует ежедневного присутствия шамана-разработчика для поддержания магии. Волшебство должно работать само, а не только когда колдун не в отпуске.