React, Next.js и фантомные боли: Или почему ваш сайт превратился в черный ящик, который нельзя починить

Приветствуем вас, уважаемый владелец сайта! Помните те светлые времена, когда чтобы поменять цвет кнопки на сайте, нужно было просто открыть файл style.css и поменять одно значение? Когда контент лежал в понятных HTML-файлах, а не в JSON-конфигах? Когда слово "билд" ассоциировалось со стройкой, а не с панической атакой?

А теперь вы — счастливый обладатель современного, прогрессивного сайта на 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>
  );
};

Проблема: Чтобы поменять эту надпись, нужно:

1. Найти разработчика (который уволился полгода назад)
   
2. Получить доступ к репозиторию (пароль от которого тоже у него)
   
3. Установить Node.js, npm, все зависимости (которых 1.2 ГБ)
   
4. Найти ЭТОТ конкретный файл среди 300 таких же
   
5. Не сломать при этом синтаксис TypeScript
   
6. Запустить

   npm run build

   (и молиться, чтобы он прошел)
   
7. Задеплоить куда-то (а как? ах да, через 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. Который тоже в коде. Который компилируется. И чтобы поменять палитру бренда, нужно:

1. Найти

   tailwind.config.js

   
   
2. Понять его синтаксис
   
3. Не сломать при этом все остальные

   blue-*

   классы
   
4. Пересобрать весь CSS
   

Но самое веселое: Когда вы получаете готовый сайт, в папке build/ или out/ лежит ОДИН большой CSS-файл с кучей минифицированных классов вроде .a1b2c3d. И понять, где там ваша кнопка — это как искать иголку в стоге сена, который потом сожгли.

Акт 3: "Сборка" — магический ритуал вместо простого сохранения файла

Классический сайт:

1. Изменил HTML/CSS файл
   
2. Загрузил на хостинг по FTP
   
3. Всё работает
   

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, вы получаете:

1. Исходники (папка с тысячами .tsx, .js, .json файлов) — это как чертежи машины.
   
2. Скрипты сборки (package.json, webpack.config.js) — это как станки для производства.
   
3. И... всё.
   

А вот что НЕ входит в комплект:

• Знание, как этим всем пользоваться
  
• Документация, как обновлять контент
  
• Админка для редактирования текстов
  
• Понятный интерфейс для смены картинок
  

Реальный риск №1: Разработчик исчезает, а с ним и знания о том:

• Как запустить проект локально (у вас Windows, а проект заточен под Mac?)
  
• Какая версия Node.js нужна? (14? 16? 18? LTS? Current?)
  
• Почему npm install падает с ошибкой на 20-й минуте?
  
• Что означают все эти скрипты в package.json?
  

Реальный риск №2: Вы хотите поменять подрядчика. Новые разработчики смотрят на код и говорят:
- "Здесь нет Storybook"
- "Здесь кривая структура компонентов"

• "Здесь нет Storybook"
  
• "Здесь кривая структура компонентов"
  
• "Здесь устаревшая версия Next.js"
  
• "Здесь кастомный Webpack, который никто не понимает"
  
• "Давайте перепишем с нуля на Vue/Nuxt" (спойлер: будет то же самое)
  

🏥 Пример из практики: "Просто обновите номер телефона!"

Запрос клиента: "В футере старый номер, поменяйте на новый".

Что происходит на самом деле:

1. День 1: Разработчик ушел в отпуск. Ждем.
   
2. День 5: Нашел файл

   src/components/Layout/Footer/FooterContacts.tsx

   
   
3. Обновил номер в коде:
   

tsx
const phoneNumber = '+7 (999) 123-45-67'; // Было +7 (999) 000-00-00

1. Запустил

   npm run build

   → ОШИБКА!
   
2. Оказывается, этот номер еще используется в src/hooks/useContactForm.ts
   
3. И в src/utils/constants.ts
   
4. И захардкожен в трех местах в тестах
   
5. День 7: После 2 дней правок, билд наконец проходит!
   
6. Но на staging'е номер не обновляется — нужно очистить кэш Vercel
   
7. День 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, спросите себя: "А действительно ли мне нужна вся эта сложность? Или я просто хочу, чтобы контент можно было легко обновлять?"

Иногда лучшее решение — то, которое не требует ежедневного присутствия шамана-разработчика для поддержания магии. Волшебство должно работать само, а не только когда колдун не в отпуске.