Все 29 ошибок новичков в Next.js

Аналитику Semaphor можно найти здесь: https://semaphor.cloud/home (платное спонсорство).
Отказ от ответственности: это спонсируемое видео (платное). Вы несете ответственность за оценку безопасности, точности и других важных частей рассматриваемого продукта.
НОВЫЙ курс React и Next.js: https://bytegrad.com/courses/professional-react-nextjs

Привет, меня зовут Уэсли. Я посол бренда Kinde (платное спонсорство).
Проверьте Kinde для аутентификации и многого другого https://bit.ly/3QOe1Bh

НОВЫЙ курс React и Next.js: https://bytegrad.com/courses/professional-react-nextjs
Профессиональный курс JavaScript: https://bytegrad.com/courses/professional-javascript
Профессиональный курс CSS: https://bytegrad.com/courses/professional-css

План развития веб-сайтов на 2024 и 2025 годы: https://email.bytegrad.com
Рассылка по электронной почте (скоро БОЛЬШОЕ обновление): https://email.bytegrad.com
Discord: у всех моих курсов есть закрытый Discord, где я активно участвую.
Kinde: ознакомьтесь с Kinde для аутентификации и многого другого https://bit.ly/3QOe1Bh

️ Временные метки:
00:00 Вступление
01:58 Semaphor (добавьте аналитику в свое приложение Next.js!)
04:11 #1: /"использовать клиент/" слишком высоко
09:45 #2: Не рефакторинг для /"use client/"
10:45 #3: Думать, что компонент является серверным компонентом, потому что у него нет /"use client/"
12:28 #4: Думать, что серверный компонент станет клиентским компонентом, если вы обернете его в клиентский компонент
17:52 #5: Использование управления состоянием (Context API, Zustand, Redux) в серверных компонентах
19:37 #6: Использование «use server» для создания серверного компонента
21:46 #7: Случайная утечка конфиденциальных данных с сервера на клиент
23:01 #8: Думать, что клиентские компоненты работают только в клиенте
27:53 #9: Неправильное использование API браузера (например, localStorage)
33:08 #10: Ошибки в поддержании водного баланса
38:43 #11: Неправильная работа со сторонними компонентами
42:27 #12: Использование обработчиков маршрутов для получения данных
44:28 #13: Думать, что это проблема — получать одни и те же данные в разных местах
48:45 #14: Получение эффекта «водопада» при извлечении данных
53:12 #15: Отправка данных серверному компоненту или обработчику маршрутов
59:38 #16: Возникает путаница, когда страница не отражает мутацию данных
1:01:43 #17: Думать, что действия сервера можно использовать только в серверных компонентах
1:03:40 #18: Забывание проверки и защиты действий сервера
1:07:26 #19: Добавление «использовать сервер», чтобы убедиться, что что-то остается на сервере
1:09:35 #20: Непонимание динамических маршрутов (параметры и параметры поиска)
1:13:12 #21: Неправильная работа с searchParams
1:19:12 #22: Забываем разобраться с состоянием загрузки
1:20:35 #23: Отсутствие детализации саспенса
1:22:53 #24: Добавление саспенса в неправильном месте
1:23:40 #25: Забывание «ключевого» реквизита для саспенса
1:29:49 #26: Случайное исключение страницы из статического рендеринга
1:36:10 #27: Жестко закодированные секреты
1:39:52 #28: Не делается различий между клиентскими и серверными утилитами
1:42:05 #29: Использование redirect() в try / catch