Релиз NextJS 14 и Server actions

  Рет қаралды 14,881

Михаил Непомнящий

Михаил Непомнящий

Күн бұрын

С выходом NextJS 14-й версии концепт Server actions признан стабильным. Разбираемся, что это такое и как использовать.
Тайм-коды:
00:00 Анонс темы
00:20 Документация и пререквизит
01:37 Создание постов с Server action
06:26 Разное поведение по завершению мутации
10:53 Удаление с Server action
13:47 Редактирование с Server action
17:06 Итоги
Код из видео github.com/michey85/next-blog...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 64
@NIKOLAEVRR3RUS
@NIKOLAEVRR3RUS 7 ай бұрын
Больше контента! Спасибо за свежатину)
@DevAr4y
@DevAr4y 5 ай бұрын
спасибо, доходчиво и понятно.
@user-gi8pn8or7l
@user-gi8pn8or7l 7 ай бұрын
ура наконец то дождался next)) пожалуйста, сделайте более продвинутый урок по авторизации в next. например как сделать вход по почте + паролю, как сделать регистрацию, очень интересна работа с токенами (если у меня сервер возвращает два токена jwt). как сделать вход по google кнопке и при этом сохранить токены итд
@hacktau
@hacktau 7 ай бұрын
next auth в помощь
@Den-yg4wz
@Den-yg4wz 7 ай бұрын
@@hacktau а как там все кастомизировать? чтобы не на аглицком аутентификация была. Много вопросов. Будем благодарны за обстоятельный обзор этого инструмента и как его реально использовать на проде.
@hacktau
@hacktau 7 ай бұрын
@@Den-yg4wz через next-intl можно
@angryprops
@angryprops 7 ай бұрын
Да, тоже очень интересна эта тема, видео было бы очень полезно
@sour5786
@sour5786 7 ай бұрын
тоже интересна продвинутая работа с next-auth. жду
@omg-go4vf
@omg-go4vf Ай бұрын
Спасибо добрая душа
@pavelsmirnov9818
@pavelsmirnov9818 7 ай бұрын
Было бы здорово, если Михаил разобрал тему FSD, если был опыт работы с этой методологией. Тезисный обзор сущностей дополненный мыслями на основании из своего опыта (опять таки, если он есть)
@sabrenda
@sabrenda 6 ай бұрын
Михаил, добрый день! а можете выпустить видео с работой User-agent для определения устройств) так как на next js в проектах SSR и CSR часто используется вместе это вызываем проблемы, потратил день чтобы решить проблему с этим, ну и работу с svg тоже интересно показать) и конечно же спасибо за годный контент!)
@rustamakhmetyanov4404
@rustamakhmetyanov4404 7 ай бұрын
Люди, использующие next в больших проектах, говорят 13 версия принесла немало багов, и вообще она сыровата ещё, а тут выкатили 14 версию😅
@prostojustme
@prostojustme 7 ай бұрын
Да , есть такие баги. Но многих из них исправили в версии 13.5 )
@Den-yg4wz
@Den-yg4wz 7 ай бұрын
🔥🔥🔥Михаил спасибо за ратные труды! 🙏🙏🙏 Подскажите по секрету, как вы сделали такую красивую цветную консольку? Будем благодарны! ) ♥
@mishanep
@mishanep 7 ай бұрын
Я использую iTerm терминал. Там много любопытных фишек.
@user-dy5sv1gx4v
@user-dy5sv1gx4v 6 ай бұрын
красавчик
@stasprykhodko938
@stasprykhodko938 5 ай бұрын
Добрый день, Михаил. Во всех видео о server action разбор идет в ключе работы с формой. Где еще может и должен применяться server action? Server action функция всегда содержит директиву 'use sever', хотя во всех разборах данная функция и так находится в серверном компоненте - это такой синтаксис и может ли Server action располагаться внутри "use client" компонента/страницы?
@HEX_CAT
@HEX_CAT 7 ай бұрын
❤🎉
@boycovclub
@boycovclub 2 ай бұрын
Это называется возвращение в 2000-е когда был пхп)
@Taiga_libertarian
@Taiga_libertarian 7 ай бұрын
оу май год 😱😱😱😱 опять?
@Alexander_1ov
@Alexander_1ov 5 ай бұрын
Очень доходчиво и понятно. Спасибо за видео. А в чем преимущество использовании форм в серверных компонентах в отличии от клиентских? Просто чтобы нагрузку с клиента перенести на сервер?
@mishanep
@mishanep 5 ай бұрын
Меньше JS на клиенте - быстрее загрузка страницы. Но тут зависит от требований. Когда нужна сложная валидация на клиенте, то без JS всё равно не обойтись. Но есть и немало сценариев, когда достаточно серверной части. Исторически это были form action, так что это возвращение к истокам.
@Alexander_1ov
@Alexander_1ov 5 ай бұрын
@@mishanep спасибо за ответ)
@SaDaMaZaHaKa
@SaDaMaZaHaKa 7 ай бұрын
Михаил доброго вам времени суток, наверное пишу свой первый комментарий, но не могу сказать что вы прекрасно преподносите материал, но смотря это видео и читаю документацию оф по Server Actions возник вопрос, надеюсь вы на него ответите. Я думал что вся суть Server Actions это в том что она позволяет нам управлять формой на серверной компоненте и плюс к этому если в браузере не загрузиться js может из за медленного интернета, форма будет все равно работать что говорит про оптимизацию некую. Но читаю статью в документации они используют такое новые хуки по управлению формы как useFormState, useFormStatus, useOptimistic. Как вы по итогу думаете в чем суть теперь Server Actions если у нас клиентские компоненты судя по документации.
@mishanep
@mishanep 7 ай бұрын
Суть server actions в мутации данных. А конкретно - как альтернатива REST API точкам. Касаемо новых хуков - это уже новшества react и react-dom, идущие как экспериментальные и пока не доступные в стабильных релизах. Плюс, на официальной документации реакта по хуку useFormStatus нет ни слова о NextJS. Примеры в официальной доке выглядят любопытно, но пока не было релиза этих хуков, говорить о них рано.
@pulsarbitw5335
@pulsarbitw5335 6 ай бұрын
Михаил, здравствуйте! В процессе изучения next.js столкнулся с проблемой. global-error.jsx (error компонент ) НЕ перехватывает ошибки в корневом layout'e. В документации написано, что для перехвата ошибки в корневом layout'e необходимо использовать global-error.jsx, НО он этого не делает. Пытался найти решение и постоянно натыкаюсь на наличие проблемы, но без ее решения. (P.S. заметки: в корневом layout'e делаю обычный throw new error("...") для проверки работы global-error, а в global-error.jsx - стандартный return ( ...), global-error лежит на верхнем уровне app - где и должен; версия next.js - 14.0.2 )
@alexvoid8717
@alexvoid8717 3 ай бұрын
Server Actions are not limited to and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like .
@pulsarbitw5335
@pulsarbitw5335 7 ай бұрын
Привет, Михаил. Вопрос не по теме видео, но все же. Хотелось бы узнать насколько важно понимание работы createEntityAdapter в RTK, нужно ли разбирать эту тему в документации подробно или хватит поверхностного ознакомления? А так же как часто вы встречали createEntityAdapter на своей практике?
@mishanep
@mishanep 7 ай бұрын
Я считаю это самый недооцененный функционал в редаксе, по крайней мере в проектах, что мне доводилось участвовать. Последние полгода я редаксом не пользуюсь по работе. Но в целом, чем лучше вы ознакомитесь с этой фичей, тем больше выгоды сможете выжать из нее.
@pulsarbitw5335
@pulsarbitw5335 7 ай бұрын
спасибо @@mishanep
@evgenstepanov6319
@evgenstepanov6319 7 ай бұрын
С bind конечно на костыль скорее похоже)
@alexanderbaltsevich9270
@alexanderbaltsevich9270 7 ай бұрын
Здравствуйте Михаил :) Спасибо за труды! Пытаюсь переварить Server Actions. И не могу понять, какую выгоду мы получили в рамках вашего видео от Server Actions. По факту мы переложили запрос с клиента на сервер, а какой профит от этого? Ведь точно так же могли и с клиента сделать запрос. Буду благодарен ответу :)
@mishanep
@mishanep 7 ай бұрын
В серверных экшнах может быть прямой запрос к базе данных, чего на фронте мы сделать не можем.
@alexanderbaltsevich9270
@alexanderbaltsevich9270 7 ай бұрын
@@mishanep А есть в этом какая то ценность? Как работает бэкэнд в реальности. Там еще целая череда мидлваров и разных проверок прежде чем, хоть что то добавить в базу данных. Та же регистрация, которая проверяет целостность данных, потом проверяет наличие пользователя в базе. Создает токены и т.д.. Не будем же мы все это писать в серверных экшенах. И тоже самое нам нужно и для логина и для большинства других экшенов.
@mishanep
@mishanep 7 ай бұрын
Здесь вопрос выбора архитектуры. Next может быть как полноценным бэкендом, и тогда да - так или иначе какие-то проверки внутри экшнов понадобятся. Либо это прослойка до бэкенда. На моей работе используется именно как прослойка, а бэк на Java.
@wolfern5449
@wolfern5449 7 ай бұрын
Добрый день, может кто-нибудь обьяснит почему если я создаю action внутри page.tsx мне надо явно прописывать что это use server, разве страницы это не априори серверные компоненты, если вопрос глупый заранее извеняюсь, первую неделю разбераюсь с Next js
@dmitryreturn1443
@dmitryreturn1443 7 ай бұрын
как раз столкнулся с проблемой обновления серверного компонента с помощью форм экшен...посмотрим смогу ли разобраться с помощью этого видео
@hotmetallic
@hotmetallic 7 ай бұрын
Если action серверный,то как почистить форму на клиенте после submit-а?
@un_defined
@un_defined 7 ай бұрын
он умеет вернуть результат работы, после получения - сбросить
@user-ki4eu5wi1b
@user-ki4eu5wi1b 7 ай бұрын
Очень хорошее видео. Ноя у меня пару багов, открыл ваш гит и тоже вроде пару багов если открыть сайт. когда создашь посты к примеру пост 5 пост 6 пост 7 , потом удаляешь их, а потом опять создаешь с другим контентом то все равно кидает тебя на уже созданные пост 5 пост 6 и пост 7 , несмотря на то что тайтл и контент другой. И потом вовсе их удалить нельзя. Или это я чего-то не понимаю
@mishanep
@mishanep 7 ай бұрын
Там могут быть нюансы с кэшированием. По-хорошему, БД должна создавать каждый раз уникальный id. В моем примере используется моковый бэкенд, поэтому он может местами криво работать.
@user-ki4eu5wi1b
@user-ki4eu5wi1b 7 ай бұрын
спасибо)@@mishanep
@__a8as
@__a8as 6 ай бұрын
Используй доверенные методы с пхп к черту некст он всегда лагает и багов куча когда просыпаешься уже поздно ибо продакшн и бабки миллиардовые
@biLLie_wiLLie
@biLLie_wiLLie 7 ай бұрын
а в чем заключается здесь проблема с безопасностью?
@mishanep
@mishanep 7 ай бұрын
Там речь о том, что когда начинаешь миксовать концепрты фронта и бэка, есть риск нечаянно сенситивные данные отправить в разметку. Next уже даже придумал концепт как предотвратить это, назвав его taint, но он пока в Альфе. У них в блоге большая статья на тему безопасности.
@jonyonee
@jonyonee 7 ай бұрын
Как отключить роутер кэш на клиенте в next 14?
@mishanep
@mishanep 7 ай бұрын
Полагаю, здесь не должно быть отличия с 13-й версией. Встроенный fetch имеет опциональный третий параметр, который управляет кэшированием. Где-то я об этом на канале рассказывал в цикле по нексту.
@jonyonee
@jonyonee 7 ай бұрын
@@mishanep Я не про кэш запросов и данных. Я про роутинг некста его кэш.
@user-xg2ro4ic2m
@user-xg2ro4ic2m 7 ай бұрын
Странно... Почему-то отправляет вовсе не в json не смотря на stringify...
@Sergey_Klimov
@Sergey_Klimov 12 күн бұрын
Редирект работает только потому, что компонент формы является северным. Попробуйте сделать этот компонент клиентским и никакой редирект не сработает а будет выбрасывать ошибку. Я например хочу сделать валидацию формы на стороне клиента, потому она у меня клиентская и получается, что серверные экшны являются просто бесполезными если они только и могут, что выбрасывать ошибки
@mishanep
@mishanep 11 күн бұрын
Здесь можно по-разному подойти к решению этого вопроса. Первое, что приходит в голову вложить в форму (серверный компонент) клиентские компоненты с инпутами, и валидировать их по мере заполнения (или потери фокуса). Та же кнопка отправки формы может быть неактивна до тех пор пока поля не заполнены корректно.
@Sergey_Klimov
@Sergey_Klimov 11 күн бұрын
@@mishanep и получается, что всякие библиотеки по типу react-hook-form теряют свой смысл. Я не могу представить себе как я буду связывать такие инпуты как "пароль" и "повторение пароля" друг с другом. Как кнопка будет знать о состояниях инпутов, если она является отдельным клиентским компонентом. Все настолько туманно. Какой то общий стор делать для них что-ли)
@admall5596
@admall5596 7 ай бұрын
Во, уже можно выпиливать experimental: { serverActions: true, }, Еще в то время успел распробовать и уж очень зашло...
@paqstd-yt
@paqstd-yt 7 ай бұрын
Разработчики next.js изобрели php
@abbze8272
@abbze8272 7 ай бұрын
Вообще лютую эко-систему наворотили. Скоро в angular превратят))
@ogg_gang
@ogg_gang 7 ай бұрын
не видел твой коммент, то же самое написал. ахах обидно как-то, убили все основные концепции реакта, теперь его можно не учить. JSX знаешь и вперёд
@ogg_gang
@ogg_gang 7 ай бұрын
становится похоже на php, в котором мы серв и фронт пишем в одном файле. как-то грустно... а куда же денутся хуки? по сути реакт там и не нужен, нужен только jsx
@user-lk4mb3nw3d
@user-lk4mb3nw3d 6 ай бұрын
Простите меня конечно, но нет ощущение что это дичь какая то , нагородили какой то хрени ребята в Next )
@leonidserafimovich4844
@leonidserafimovich4844 6 ай бұрын
Ребят, подскажите, как сделать авторизацию через openID на мой одностроничник, я уже голову сломал...
@dimzinnatov7242
@dimzinnatov7242 2 ай бұрын
Есть уже готовая реализация для openid connect на js и типизированный вариант
Самый простой способ начать работу с БД
22:37
Михаил Непомнящий
Рет қаралды 6 М.
NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR
26:31
Михаил Непомнящий
Рет қаралды 25 М.
Они убрались очень быстро!
00:40
Аришнев
Рет қаралды 3,2 МЛН
Would you like a delicious big mooncake? #shorts#Mooncake #China #Chinesefood
00:30
Каха ограбил банк
01:00
К-Media
Рет қаралды 3,9 МЛН
NextJS 13. Использование клиентских компонентов
32:19
Михаил Непомнящий
Рет қаралды 36 М.
Next.js App Router Authentication (Sessions, Cookies, JWTs)
11:31
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Рет қаралды 44 М.
How To Use Next.js 14 Server Actions
21:06
Brett Westwood - Software Engineer
Рет қаралды 22 М.
Как работает автопилот на Lixiang L9 Max
0:34
Семен Ефимов
Рет қаралды 16 М.
#miniphone
0:16
Miniphone
Рет қаралды 3,2 МЛН
Хотела заскамить на Айфон!😱📱(@gertieinar)
0:21
Взрывная История
Рет қаралды 2,7 МЛН