Next js 14 - что нового?

  Рет қаралды 19,804

PurpleSchool | Anton Larichev

PurpleSchool | Anton Larichev

Күн бұрын

Посмотрим на изменения в Next js 14, поговорим об архитектуре, Server Actions и работе с Prisma, Turbopack и мигрируем проект с 13 на 14 Next.
🔗 Ссылки:
Server Actions: • Разбор Next.js Server ...
Prisma: • Prisma - лучшая ORM дл...
NvChad: • NvChad - идеальная IDE...
NVM: • Установка и управление...
🎓 Курс по Next.js purpleschool.ru/course/nextjs
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:11 - Что в релизе
1:58 - Создание проекта на Next js 14
2:43 - Добавление prisma
10:34 - Server Actions
15:30 - Добавление на сервере
19:53 - Миграция проекта
21:52 - Turbopack
22:58 - Partial Prerendering
24:02 - Заключение

Пікірлер: 133
@PurpleSchool
@PurpleSchool 7 ай бұрын
🔗 Ссылки: Server Actions: kzfaq.info/get/bejne/rZ6BhK52taq9j58.html Prisma: kzfaq.info/get/bejne/j9WDn5ik3ZPZhYk.html NvChad: kzfaq.info/get/bejne/h5eXfMWBqrnYfGQ.html NVM: kzfaq.info/get/bejne/idmSqdZjvdrepY0.html 🎓 Курс по Next.js purpleschool.ru/course/nextjs 💬 Telegram канал с полезными советами: t.me/purple_code_channel
@user-zu8ey7db4p
@user-zu8ey7db4p 6 ай бұрын
какие пет проекты посоветуешь делать именно для фронтенда next? без бека
@vadimivanovich1827
@vadimivanovich1827 7 ай бұрын
Спасибо за видео ❤️
@PurpleSchool
@PurpleSchool 7 ай бұрын
Пожалуйста
@user-ei6wy1ew9f
@user-ei6wy1ew9f Ай бұрын
Спасибо тебе за разбор. Красавчик, продолжай. Комент для продвижения видоса.
@PurpleSchool
@PurpleSchool Ай бұрын
Спасибо!
@leetcode24
@leetcode24 7 ай бұрын
Антон, Благодарю
@PurpleSchool
@PurpleSchool 7 ай бұрын
Пожалуйста!
@ilyasokolowski3728
@ilyasokolowski3728 7 ай бұрын
тема огонь)
@PurpleSchool
@PurpleSchool 7 ай бұрын
👍
@Jasurbek_Shomaqsudov
@Jasurbek_Shomaqsudov Ай бұрын
Спасибо за видео! И хотел спросить для создания большого ERP систему что более подходящий react или next? И ещё важный момент, разработчик один, фуллстек разработчик(наверное этот момент тоже влияет..).
@PurpleSchool
@PurpleSchool Ай бұрын
Если не требуется SSR, то проще взять React с Tanstack или React Router
@Jasurbek_Shomaqsudov
@Jasurbek_Shomaqsudov Ай бұрын
@@PurpleSchool Честно говоря не знаю, обычно нужно ли ssr для erp?
@PurpleSchool
@PurpleSchool Ай бұрын
@@Jasurbek_Shomaqsudov сомнительно
@Jasurbek_Shomaqsudov
@Jasurbek_Shomaqsudov Ай бұрын
@@PurpleSchool В любом случае спасибо за быстрый ответ
@NoName-oh9fh
@NoName-oh9fh 6 ай бұрын
Интересно, а как например выполнить client code с функцией server action? Например после нажатия кнопки поставить ей состояние disabled, изменить какие нибудь стейты, а если в server actionбудет ошибка, то как нибудь обработать ее и вывести уведомление с ошибкой 🤔
@redhexpt
@redhexpt 4 ай бұрын
kzfaq.info/get/bejne/iMeUms6gr9jMpWQ.html
@NefedoffYuriy
@NefedoffYuriy Ай бұрын
Антон, как же у тебя приятно звучит клавиатура, не подскажешь где брал и как она называется ? Спасибо за видос, очень полезный!
@PurpleSchool
@PurpleSchool Ай бұрын
Спасибо! Вот обзор моей клавиатуры, я собирал сам: kzfaq.info/get/bejne/hbeFn8SrqqyniZs.html
@Edgar-pu1lc
@Edgar-pu1lc 6 ай бұрын
Привет Антон, вопрос не по теме, но что лучше для бэкенда, Nest js или c# ?
@PurpleSchool
@PurpleSchool 6 ай бұрын
Зависит от команды и проекта, нет однозначного ответа
@Edgar-pu1lc
@Edgar-pu1lc 6 ай бұрын
Понял
@user-xs2dx2mh3f
@user-xs2dx2mh3f 4 ай бұрын
Java )
@CoollerFox
@CoollerFox 6 ай бұрын
Привет Подскажите, пожалуйста, как сделать такие снипеты в командной строке? Или это возможно только на Маке?
@PurpleSchool
@PurpleSchool 6 ай бұрын
Это ZSH плагин. У меня на канале есть про него видео
@yagelProject
@yagelProject 7 ай бұрын
Здравствуйте. Вы сказали, конечо без Tailwind. Скажите пожалуйста, а что с ним не так ?
@PurpleSchool
@PurpleSchool 7 ай бұрын
Мне лично не нравится замес кучи классов и JSX, становится плохо читабельно. Но это мое мнение
@yagelProject
@yagelProject 7 ай бұрын
@@PurpleSchool Спасибо. Было очень интересно ваше мнение.
@un_defined
@un_defined 7 ай бұрын
@@PurpleSchool 100% это опять этот тупик вроде бутстрапа когда убивается весь смысл разделения разметки и оформления.
@abbze8272
@abbze8272 7 ай бұрын
​@@un_definedсогласен. Фронтэнд в лапшу превращают
@user-mu7ps6qx7j
@user-mu7ps6qx7j 7 ай бұрын
Если нужен отдельный back - пожалуйста - делайте NestJs, и дергайте его из server actions с помощью fetch'а, который расширен next-ом. Преимуществом fullstack является сквозная типизация
@PurpleSchool
@PurpleSchool 7 ай бұрын
А зачем использовать fetch в server actions? Эти же типы могу быть на фронте и не требовать server actions вообще
@golden_smiles
@golden_smiles 7 ай бұрын
Никто вам не мешает на отдельном беке использовать сквозную типизацию в монорепо, например. Никакого тут преимущества у сервер акшенс нет.
@awenn2015
@awenn2015 6 ай бұрын
​@@golden_smilesмонорепо это тип когда есть парка клиент сервер и рядом общие файлы?
@golden_smiles
@golden_smiles 6 ай бұрын
@@awenn2015 Это когда несколько проектов в одном репо, обычно под управлением специализированных инструментов, но можно и просто workspaces от npm использовать. Экспортируете типы dto в серверном проекте, клиент их пользует, вот и сквозная типизация. Разумеется полностью от проблем не избавиться так как если рест, например, то надо как то обходится с параметрами вызовов, да и тайпскрипт далеко не идеален, так что все равно накручивают схемы и валидации. Удобство сервер акшенс в том что весь этот лейер передачи данных по апи они прячут за внешним простым вызовом функции. Это и недостаток, так во множестве сценариев требуется понимания и настроек более точных, чем просто вызвать и получить несложный джейсон, а это как раз становится недоступным.
@kulakofft4
@kulakofft4 7 ай бұрын
Я столкнулся с такой же проблемой архитектуры, когда начал пилить пет-проект на solid-start.
@PurpleSchool
@PurpleSchool 7 ай бұрын
👍
@anichkaaleksanyan1124
@anichkaaleksanyan1124 6 ай бұрын
Я правильно понимаю что мне в nexte не светит получить один раз, то что используеться в каждой странице и диспачить редакс и дальше не бегать за ним к серверу?
@PurpleSchool
@PurpleSchool 6 ай бұрын
Почему, вполне можно
@anichkaaleksanyan1124
@anichkaaleksanyan1124 6 ай бұрын
У меня есть Layout.js и страницы. Следовательно я это дело питаюсь сделать в layoute но там такая история export default async function RootLayout({ children }) { и здесь нет диспатч. Или для этого я могу тупой компонент рендерить внутры уже Providerа который и сделает этот рекуест и тогда может получиться. return ( {children} ); } Не так не тоже не вариант :)
@PurpleSchool
@PurpleSchool 6 ай бұрын
@@anichkaaleksanyan1124 вы можете внутрь добавить клиентский компонент, который через Props принимает данные и там вызывает dispatch
@anichkaaleksanyan1124
@anichkaaleksanyan1124 6 ай бұрын
@@PurpleSchool точно. Спасибо за совет.
@biLLie_wiLLie
@biLLie_wiLLie 7 ай бұрын
Как у вас некст запустился, он же требует версию ноды 18.17 ?
@PurpleSchool
@PurpleSchool 7 ай бұрын
Я через nvm сменил на 20
@spr1ng586
@spr1ng586 7 ай бұрын
Ну в целом я согласен насчет server actions, не особо понимаю почему Next движется в сторону fullstack фреймворка, если большинство его все равно воспринимают, как frontend фреймворк. Очень жду когда partials rendering будет, это намного интереснее
@PurpleSchool
@PurpleSchool 7 ай бұрын
Поддерживаю!
@erjigit17
@erjigit17 7 ай бұрын
Только плотно взаимодействуя с беком можно получить максимальную скорость
@PurpleSchool
@PurpleSchool 7 ай бұрын
@@erjigit17 что значит плотно? Server actions такой же http запрос, ни какой магии
@denisputnov
@denisputnov 7 ай бұрын
Как большинство воспринимают ≠ идея продукта
@spr1ng586
@spr1ng586 7 ай бұрын
@@denisputnov к счастью или к сожалению, у нас не коммунизм и одной идеи не достаточно) Сейчас важен бизнес. У кого деньги, тот и прав
@dmitryreturn1443
@dmitryreturn1443 7 ай бұрын
подскажите кто может! я тяну посты из вордпресса через graphql, рендерю в серверной странице блога пачку, мне нужно по кнопке загрузить след пачку постов а тут проблема - никак не могу заставить перерендерить серверную страницу если сервер экшен в отдельном файле т.е. я вижу след пачку в консоли но как отобразить понятия не имею (ревалидэйт пробовал) а если сервер экшен прямо на этой же странице блога то получается все норм, как это работает хз
@dmitryreturn1443
@dmitryreturn1443 7 ай бұрын
при загрузке страницы блога идет фетч первой пачки posts и его рендер, в отдельном файле сервер экшен я также делаю фетч с новыми параметрами приходит новая пачка постов я их записываю также в posts потом ревалидейт но перерендера не происходит..если сервер экшен в самой странице блога то я posts перезаписываю получается и происходит обновление..
@PurpleSchool
@PurpleSchool 7 ай бұрын
Нужно использовать revalidateURL. Но для GraphQL не нужны server actions
@dmitryreturn1443
@dmitryreturn1443 7 ай бұрын
@@PurpleSchool есть такая штука курсор в ВП graphql, передвигая его можно запрашивать след пачку постов или Вы предлагаете запросить сразу всю тысячу постов?
@PurpleSchool
@PurpleSchool 7 ай бұрын
@@dmitryreturn1443 в каком месте моего ответа я это предлагаю? Я говорю про ревалидацию страницы после использования Server Actions и говорю что оне не нужны тут. Курсор можно использовать и обычным React клиентом GraphQL.
@dmitryreturn1443
@dmitryreturn1443 7 ай бұрын
@@PurpleSchool понял, спасибо
@user-tb5tp2tv6x
@user-tb5tp2tv6x 2 ай бұрын
Вопрос есть, а что в next js должен знать бэкенд?
@PurpleSchool
@PurpleSchool 2 ай бұрын
В теории бекенд не должен использовать Next.js)
@user-tb5tp2tv6x
@user-tb5tp2tv6x 2 ай бұрын
Если бэкенд не нужен знать, почему middleware использовать?
@user-tb5tp2tv6x
@user-tb5tp2tv6x 2 ай бұрын
Спасибо за ответ !)
@un_defined
@un_defined 7 ай бұрын
у меня турбопак не пляшет с next-intl.
@PurpleSchool
@PurpleSchool 7 ай бұрын
Видимо не до конца доделали
@GAccountMe
@GAccountMe 7 ай бұрын
Чем замыкание не dependency injection?
@PurpleSchool
@PurpleSchool 7 ай бұрын
Это так себе практика DI
@GAccountMe
@GAccountMe 7 ай бұрын
@@PurpleSchool в каком смысле? Есть множество способов реализовать DI, в зависимости от языка и конкретной задачи, они могут быть разными, в js великолепно можно использовать замыкания, например вернуть функцию, которая вернет другую функцию, первая функция примет клиент, который можно менять в зависимости от нужды, вторая функция будет принимать уже нужные вам аргументы- вот вам и DI клиента например, я привел абстрактный пример
@PurpleSchool
@PurpleSchool 7 ай бұрын
@@GAccountMe да, но на этом нельзя строить архитектуру реального приложения
@GAccountMe
@GAccountMe 7 ай бұрын
@@PurpleSchool это как сказать, что нельзя строить архитектуру реального приложения используя переменные или оператор сравнения. Если вам нужно сравнить что-то с чем-то- используйте оператор сравнения, если вам нужно внедрить зависимость - можете ее внедрить замыканием, причем тут архитектура приложения - я не понял, я бы еще понял, если бы вы сказали, что фреймворк вам диктует архитектурный подход, который не позволяет использовать замыкания для DI, например nest для этого использует декораторы, но там как бы классы…
@adamburke4496
@adamburke4496 7 ай бұрын
Судя по документации - Turbopack всё еще находится в стадии Beta.
@PurpleSchool
@PurpleSchool 7 ай бұрын
Да, но на удивление работает
@un_defined
@un_defined 7 ай бұрын
@@PurpleSchool у меня нет. next-intl не заводится
@AleksandrMaltsev-jm8ph
@AleksandrMaltsev-jm8ph 7 ай бұрын
Алиасы на нем не заводились у меня
@sedoyjan
@sedoyjan 7 ай бұрын
А почему: только не tailwind?😢
@PurpleSchool
@PurpleSchool 7 ай бұрын
Я не его фанат) мне не очень нравится большое число классов в компонентах
@un_defined
@un_defined 7 ай бұрын
в чем кайф когда базовая идея разделения стиля и разметки ломается об колено
@golden_smiles
@golden_smiles 6 ай бұрын
@un_defined Ахаха точно замечено "об колено". Пикантно, то что этот коммент в ветке про React и NextJs, где сначала поломали разделение между разметкой и кодом, а потом между фронтом и беком. Наверное есть смысл, если народ этим пользуется. Я сильно был огорчен, когда впервые узнал про Tailwind, а теперь, после пары проектов на нем, не представляю как жил до него. Это безумно удобно по многим причинам, я бы сказал гениально, на уровне изобретения швейцарского ножа. Что не отменяет конечно того что css надо знать. А вот NextJs -- не гениально, к сожалению. Если очень хочется фуллстек, сделали лучше бы что нибудь с NestJs, красиво и понятно, чем все эти костыли и метания между роутерами.
@Igor-uz3vn
@Igor-uz3vn 6 ай бұрын
Просто Next'у нужно определиться. Они фронтэнд или бекэнд или все вместе но качественно. А то всего по чуть-чуть нахватали и вроде бы работает но через %опу
@PurpleSchool
@PurpleSchool 6 ай бұрын
Они пытаются быть всем, но для бека им не хватает очень многих компонент. Я бы не взялся на нём писать бек ни для какого проекта
@viacheslav90
@viacheslav90 3 ай бұрын
Да, прям не хватает DI, чтобы все эти коннекшены к БД, редис, очереди, нормальный контекст реквеста и прочее ижектить, а не изобретать костыли. Какого-нибудь слоя сервисов где будет бизнес логика. Не понял есть ли слой middleware, очень часто нужно предварительно работать с реквестом (логировать то что нужно, проверять авторизацию и тп.). Ну и еще много чего не хватает по мелочи. Короче для полноценного бекенда пока слабовато, но вот для небольших сайтов типа блога или сайта ресторана для заказа пиццы-шаурмы без лишних сервисов и интеграций, либо там какой-нибудь внутренний сервис типа админки быстро накидать, я думаю здесь будет топ. Ну и само собой для предварительного рендера реакта для сеошников самый раз.
@anatoliy1435
@anatoliy1435 7 ай бұрын
"tailwind - ни в коем случае" - почему так категорично?
@PurpleSchool
@PurpleSchool 7 ай бұрын
Мое личное мнение. Мне нравится его концепция, но не нравится ужасные замес кучи классов и JSX
@FobosWorld
@FobosWorld 7 ай бұрын
Меня всегда напрягали фул стаки, сам полтооа года был на этой позиции, но в перспективе это посредственный код получается, либо ты бек либо фронт
@PurpleSchool
@PurpleSchool 7 ай бұрын
Зависит от того, с чем человек больше работает
@kulakofft4
@kulakofft4 7 ай бұрын
периодически провожу либо присутствую на собесах. Как правило фулстаки либо сильно сдвинуты в какую либо сторону, либо плавают и там, и там
@un_defined
@un_defined 7 ай бұрын
согласен слишком много меняется и один чел может не тянуть и скорее всего е будет
@awenn2015
@awenn2015 6 ай бұрын
​@@PurpleSchoolи с тем и с тем, на что то одно тратить время как то не хочется, везде есть свои плюсы
@lmnottryhard5626
@lmnottryhard5626 6 ай бұрын
а что за терминал такой?
@PurpleSchool
@PurpleSchool 6 ай бұрын
kzfaq.info/get/bejne/hbxoobOkvN_bhJc.htmlsi=B4dtdXhFbKQ5dyQo
@qwe-rty-
@qwe-rty- 6 ай бұрын
Немножко удалим все, что здесь находится) Так мило
@PurpleSchool
@PurpleSchool 6 ай бұрын
😄
@MrBreakhead
@MrBreakhead 7 ай бұрын
16:54 Что за бред, нет никаких ограничений, не обязательно использовать в action и form, работают они как любая обычная функция с любыми входящими данными не только FormData. Вызывать можно хоть в onClick хоть в useEffect, только тело функции будет не на фронте а на сервере выполняться .. Как и валидация, прям в action добавляется валидация типа через Zod, который великолепно преобразуется в тип typeScripta. Таким образом у вас одна единая модель данных как на фронте так и на бэке 💁🏻‍♂️
@PurpleSchool
@PurpleSchool 7 ай бұрын
Если вы попробуете вызвать из onClick функцию, в отдельном файле, который даже отмечен как use server и передать туда аргументы, то получите ошибку, так как он будет считать runtime браузерным
@MrBreakhead
@MrBreakhead 7 ай бұрын
@@PurpleSchool У меня целый проект в продакшене уже так работает месяца 4 начиная с экспериментальной версии 13.5. И нет никаких проблем, более того эти server action успешно используются внутри стейт менеджера Zustand
@PurpleSchool
@PurpleSchool 7 ай бұрын
Хм, интересно, поэкспериментирую
@daveyjonesx
@daveyjonesx 7 ай бұрын
Идея с сервер экшенами это попытка переизобрести бэкенд? Не ну правда что это Где вообще в реальном мире бэки выберут это?)
@PurpleSchool
@PurpleSchool 7 ай бұрын
Скорее выберут фронты, чтобы быстро сделать бек на коленке
@daveyjonesx
@daveyjonesx 7 ай бұрын
⁠@@PurpleSchoolдаже для фронтов эта штука выглядит как баловство для приложений уровня туду листа Даже небольшое реальное приложение написать будет геморно и криво с такой архитектурой
@PurpleSchool
@PurpleSchool 7 ай бұрын
@@daveyjonesx пока так и есть
@golden_smiles
@golden_smiles 7 ай бұрын
Выбирают к сожалению лиды, которым кажется что все новое это круто. При этом сами забыли когда последний раз код писали.
@daveyjonesx
@daveyjonesx 7 ай бұрын
@@golden_smiles если показать это нововведение бэкенд лиду он скажет вы что сбрендили
@siparat842
@siparat842 7 ай бұрын
Зачем нам помечать серверные компоненты 'use server', они разве по умолчанию не серверные?
@siparat842
@siparat842 7 ай бұрын
Action*
@PurpleSchool
@PurpleSchool 7 ай бұрын
Согласно документации nextjs.org/docs/app/api-reference/functions/server-actions
@dimovich85
@dimovich85 7 ай бұрын
Видео лайк, а сервер екшени реально стремно виглядит...
@dimovich85
@dimovich85 7 ай бұрын
как только вижу магию, сразу болеть в спине начинает..
@PurpleSchool
@PurpleSchool 7 ай бұрын
😀
@golden_smiles
@golden_smiles 7 ай бұрын
Еще раз получил подтверждение, что Nextjs это тупик, в который настойчиво завели вобщем-то неплохую экосистему React. Зачем завели -- понятно -- чтобы продавать свои сервисы. Зачем мы ведемся -- непонятно. На текущем проекте пользуемся 13 версией, все озвученые проблемы там в полной мере уже присутствуют. Зачем делать из React убогое подобие MVC -- тоже непонятно, могли бы их продавать как нибудь по-другому. За видео спасибо, как всегда все круто!
@atmalive
@atmalive 7 ай бұрын
Какие альтернативы с лучшей работой сео?
@golden_smiles
@golden_smiles 7 ай бұрын
@@atmalive Зачем вам реакт, если нужно сео? Что сео там грабить будет, на динамической страничке?
@PurpleSchool
@PurpleSchool 7 ай бұрын
Next хорош для: - Индексации и SEO - Скорости загрузки - Работы на слабых устройствах или при плохой связи
@golden_smiles
@golden_smiles 7 ай бұрын
@@PurpleSchool 1. - если очень хочется индексировать и писать при этом на Реакт. Только нафига козе баян? Кто-то пишет блоги на Реакте? Что вообще надо написать такое, что без Реакта не обойтись, и что при этом потребует индексирования? 2. - про скорость загрузки уже много раз писалось, выигрыш - секунда, макс две для очень тяжелых проектов, которые на Нексте, кстати, геморно будет поднять. Если у вас тяжелый JS бандл, который долго грузиться, значит у вас много логики. Много логики == высокая сложность, Некст не вытянет по тем же причинам, о чем видео. Бандл может быть тяжелым от картинок и прочего - ну так он и на Нексте будет тяжело грузиться тогда. Это же не серебрянная пилюля от всего, там никакого волшебства. 3. Телефоны сейчас мощнее компьютеров пятилетней давности. Связь - да, только толку от предварительной загрузки, если интерактивное приложение загрузило и показало мертвый HTML, который еще надо подождать, чтобы заработал, мы так пользователей удержим? Кому надо, дождется полной загрузки бандла и будет спокойно работать, а не спотыкаться между страницами. И опять же какой вероятности этот юзкейс, и стоит ли это всего вышеописаного гемора с кашей в коде и в головах. Полярникам и нефтянникам формы налогов в портале услуг заполнять?
@deGGenerate
@deGGenerate 7 ай бұрын
@@golden_smilesдада, не забудьте что бандл также еще и загружается один раз и хранится в кэше. А для сео есть пререндер
@virtuoz-ru
@virtuoz-ru 7 ай бұрын
Ты бы ещё рассказывал про Nuxt 3. Вот это дело было бы.
@PurpleSchool
@PurpleSchool 7 ай бұрын
Подумаю над этим)
@user-sj7tf2yv3m
@user-sj7tf2yv3m 7 ай бұрын
​​@@PurpleSchoolв нем хотя бы настоящие серверные компоненты (в бете)
@PurpleSchool
@PurpleSchool 7 ай бұрын
@@user-sj7tf2yv3m так в Next же они же
Разбор Next.js Server Actions!
17:02
PurpleSchool | Anton Larichev
Рет қаралды 9 М.
Самый простой способ начать работу с БД
22:37
Михаил Непомнящий
Рет қаралды 6 М.
I Need Your Help..
00:33
Stokes Twins
Рет қаралды 144 МЛН
1 класс vs 11 класс (неаккуратность)
01:00
БЕРТ
Рет қаралды 4,8 МЛН
Storybook - Быстрый курс по работе и тестированию с React
37:39
NextJS 13. Варианты рендеринга - RSC, CSR, SSR, SSG, ISR
26:31
Михаил Непомнящий
Рет қаралды 24 М.
React 19 - React Compiler, Actions, use hook, activity
46:45
PurpleSchool | Anton Larichev
Рет қаралды 10 М.
React JS фундаментальный курс от А до Я
3:01:08