Ты фронтендер? Расскажу, как не сойти с ума среди React, Next.js и вечного «undefined»

[kirilljs]

Привет, я Кирилл. Я пишу код на JavaScript уже три, пять или 9 лет ?, и если вы ждёте историй про «успешного программиста с кофе на фоне MacBook» — пролистайте дальше. Здесь будет правда: гневные коммиты, бессонные ночи с документацией и вечная война между «оно работает» и «почему оно работает?».

---

JavaScript: где «легко» — это ловушка

JavaScript кажется дружелюбным, пока не столкнёшься с async/await в цепочке промисов, которые внезапно resolve в undefined. А потом оказывается, что проблема была в опечатке переменной. Знакомо? Да, это каждый день. ️️
Писать на чистом JS сейчас почти никто не будет — все бегут к фреймворкам. Но и там рай не наступает.

А начиналось так красиво:

document.querySelector('button').addEventListener('click', () => {  
  alert('Кирилл, ты попал!');  
});  

React: любовь-ненависть длиною в props

React — это как собрать мебель из IKEA: вроде инструкция есть, но половину деталей не понимаешь, зачем они.
Компоненты? Легко. Жизненный цикл? Уже устарело. Хуки? «Ну, это просто функции», — говорят в туториалах. А потом ты пишешь useEffect и три часа дебагаешь, почему стейт обновляется на один рендер позже.

const [data, setData] = useState(null);

useEffect(() => {
  fetchData().then((res) => {
    setData(res); // А вот и нет, данные «уплывут» если компонент размонтируется
  });
}, []);

Совет от меня: если useEffect вызывает панику — вы не одиноки. Документация React читается как роман Кафки: вроде всё по-человечески, но смысл ускользает.

Next.js: «Мне нужен SSR» vs «Что опять сбилась сборка?»

Next.js решает проблемы, о которых вы не знали, пока не начали его использовать. Хотите SSR? Пожалуйста. Статическую генерацию? Без проблем. А потом вы тратите день, чтобы заставить getStaticProps правильно работать с динамическими роутами, и понимаете, что fallback: true — это не магия, а головная боль.

Плюсы? Да, проект масштабируется.
Минусы? Конфигурация Webpack в Next.js — это как попытка починить реактивный двигатель на лету. И да, если увидите в ошибке Module not found: Can't resolve 'fs' — добро пожаловать в клуб.

А еще есть… «Экосистема» ️

• TypeScript: «Почему ты ругаешься на string | undefined? Я же проверил!».
• Redux, Zod: «Ты точно нужен? Может, Context API хватит? Ой, опять перерисовывается всё».
• Тесты: Пишешь их два дня, а потом менеджер говорит: «Мы жмём дедлайн, вырежи пока».

Зачем я это делаю?

Потому что когда после 20 попыток страница наконец рендерится без ошибок, а анимация не лагает — это кайф. Потому что находить баг в чужом коде (спасибо, коллега) — это как выиграть в детективе. И да, конечно на жопе сидеть приятнее чем на заводе.

Но если вы думаете, что программирование — это про гениальные озарения и лёгкие деньги, то… Нет. Это про упорство, гугление на английском и умение смеяться над своими же комментариями // TODO: fix later двухлетней давности.

P.S. Если React, Next.js и Node.js — это «просто», покажите свой GitHub. Мы все хотим на вас посмотреть.