Разбор Next 13 - урок по работе с app, turbopack, font, SSR
Вставка
- Опубліковано 4 сер 2024
- Детальный разбор нового релиза Next 13 и всех его возможностей, многие из которых доступны только в экспериментальном режиме. Получился полноценный урок)
Ссылка на Next.js: nextjs.org/
⚡ Мои курсы
Курс по Next.js: purpleschool.ru/course/nextjs
Все мои курсы: purpleschool.ru
Telegram канал с полезными советами: t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:07 - О Next.js
2:14 - Создание проекта с TypeScript
4:42 - Использование app
7:18 - next / font
10:03 - Turbopack
12:01 - Head / layout
14:06 - Роутинг
16:52 - Запрос данных
20:47 - Streaming
22:24 - Обработка ошибок / not found
25:00 - Клиентские компоненты / use client
27:40 - Ревалидация страниц и SSR
28:55 - Заключение
⚡ Мои курс по Next.js: purpleschool.ru/course/nextjs
🔗Telegram канал с полезными советами: t.me/purple_code_channel
Обновление будет по 13 версию?
Да, когда будет более или менее стабильной. Пару новых лекций будет в ближайшее время.
Антон, какой стэк ваш любимый?
Next + Nest)
@@PurpleSchool Прохожу сейчас ваши курсы по ноде и нексту. По ноде все очень понятно, один из любимый курсов. Но по нексту не очень понял, зачем нужен stylelint и eslint, их использование в курсе обязательно?
Спасибо!
Теперь ждем новый курс по этой версии)
Дополню сущесвующий думаю
🔥 помог сделать быстрый поверхностный обзор по новому в next13. Ждём другие видео
Спасибо)
у Автора грамотная подача материала. очень рад что попал на канал
Спасибо!
Супер!!! Побольше видео про Next13))))
👍
Спасибо, очень своевременно)
Спасибо)
Купил почти все курсы ваши и не жалею
Спасибо!
Спс. ждём продолжение))
Пожалуйста)
да круто, спасибо за разбор
Пожалуйста)
Отличный обзор! Хорошо было бы увидеть еще в работе динамические роуты: [slug] [...slug] )
Сделаю)
Не обязательно slug…можно любое слово
крутая стрижка!
Спасибо!
замечательный обзор, хотелось бы увидеть динамические роуты и + структуру папок в небольшом проекте 13 версии next
👍
Ждал когда ты выпустишь видео о next 13!! По идее еще в прод не стоит запускать?
То что я показываю в видео точно не стоит, это пока экспериментальные фичи. Но при работе по старой структуре с папкой pages, пожалуйста)
спасибо
Пожалуйста!
🔥🔥🔥
Для второй части: чтобы продемонстрировать исходный код, который с сервера возвращается, можно поставить "Disable JavaScript" в настройках DevTools и потом просто смотреть красивое дерево на вкладке Elements - только серверный реакт будет возвращать разметку )
👍
Добрый день! Можно по польше видео по next js!
Есть видео про server actions: ua-cam.com/video/w8QQKEPDY_k/v-deo.html
В следующем ролике по этой теме было бы хорошо показать жизненные примеры. Например когда некоторые страницы имеют одинаковый layout (не будем же копипастить файлы). Файл loading.tsx встает вместо всего контента, хотя часто на странице может быть много модулей и лоадер нужно вставить в конкретный блок.
Это лучшее видео о нексте 13 на русскоязычном ютубе. Спасибо тебе
Очень рад, что понравилось 👍
Спасибо тебе Антон за контент! Сидел ломал логову почему же у меня возникает ошибка со шрифтами при использовании турбопак) Теперь разобрался. Подача материала 20/10
Спасибо большое 👍
нужен ли некст если писать корпоративное приложение не требующее сео и поисковиков? jira например или confluence.
Разве что вы захотите переложить часть нагрузки с клиента на сервер, но я обычно беру просто React.
А если есть один root layout (например dashboard), который ты хочешь использовать на всех страницах, но есть страницы auth, где пользователь входит и там root layout не нужен, можно его как-то отключить для конкретных страниц?
Можно сделать различные layout для различных route. А все с похожим layout объединить скажем в виртуальные папки
Привет
А когда будет курс переведен на 13 версию? Надо ли будет доплачивать, если уже купил?
Я пока Typescript прохожу (всем советую), потом хочу на Next перейти
Пока рано, так как все в бете.
Кто нибудь сталкивался с ошибкой в новом next 13 с forwardRef? Никак не могу понять в чем дело, на sf ничего нет.
Антон, добрый вечер, ответьте, пожалуйста, на вопрос про курс React + NextJS, я правильно понял, что в Udemy ваш курс более актуальный, чем тот, что на вашем сайте?
Нет, все курсы обновляется идентично. Но вот от Udemy возможно придётся отказаться.
Такая просьба, а есть на канале видео или можете сделать видео о том, как на next сделать import ReactComoonent as Svg
У меня в курсе есть раздел отдельный.
Здравствуйте а на 13 версии мы можем создать уже полноценный проект для продакшена или ещё не рекомендуется?
Можете, если не будете использовать экспериментальные фичи типа папки app и turbopack.
можете помощь разобраться почему у меня при создание проекта отсутствует папка pages ?
Видимо вы создали с app папкой, а не pages
Сделайте пожалуйста видео, когда выйдет обновление уроков до NextJS 13. А то по ссылке выдает уроки с последним обновлением аж 07 октября 22г.)))
Да, когда будут все фичи в стабильной версии
Курс обновился уже к 13 версий? стоить смотреть ?
Тут всё в beta. В курсе 95% актуальной информации.
Антон, объясни мне пожалуйста для новичка, по поводу твоего недавно вышедшему курсу по JS. Это просто база? Будут ли еще курсы по JS? Я просто хотел бы понять, он завершенный или ещё что-то ожидать в рамках JS.
Надеюсь понятно что я хотел спросить)
Это 1-я из 2-х частей курса по JavaScript. 2-я - продвинутая уже в работе и будет в январе примерно
@@PurpleSchool понял спасибо большое
Вы обращали внимания, сколько next 13кушает памяти на больших проектах используя маршрутизацию: ( Router. ). Например в связке с каким-то css in js. Очень нужен ответ по тому, сколько кушает памяти такие проекты в next 13.
Еще очень не хватает по next 13 крутых обзоров, на английском уже есть, но такое. Жду вторую часть.
Не пробовал с CSS in JS, но в целом не замечал большого потребления памяти Next-ом.
Еще!
👍
Стол четкий, как называется?
Основание ergostol, а столешницу заказывал отдельно и сам покрывал лаком и пропиткой
В 12 версии revalidate: 100 работал таким образом: если 100 секунд прошли, это не означает что next при заходе на страницу сгенерирует новую кэшированную версию, она будет сгенерирована в фоне, а клиенту отдастся старая. То есть я мог зайти на эту страницу завтра и все равно получить старые данные. В next 13 эта логика сохраняется?
Да, он так же после захода пользователя на страницу начинает ревалидацию.
@@PurpleSchool хреново дело. так ничего и не придумали за год c ISR( вообще необходимая штука
почему не допишут, что бы сервер сам себя пнул и рефрешнул кеш, год прошёл так и не движется никуда....
Всегда стоит вопрос, SSR или SPA. С одной стороны SEO и большая безопасность хоста, с другой стороны экономия ресурсов хоста которые стоят денег (для контор понятно, это мелочи). Но есть еще один моментик, SSR уравнивает всех клиентов по производительности, люди вкладывают деньги в хорошие машинки так как хотят комфорт и быстроту (в том же тяжелом SPA приложении). Возникает вопрос какого черта вложил денег больше, а уравняли со всеми. Вот этот этический вопрос, плюс экономия отталкивает меня от SSR. )
SSR для SEO единственный пока вариант. Для клиентских приложений можно не использовать.
Еще больше этического в том, что люди вложились в создание интернет магазина, а его не видит Яндекс. Потому что ушлые SPA фанаты из числа разработчиков нассали в уши клиенту, что SSR не нужно.
а для чего тут используется promise?
17:38
Вроде как без него можно выполнить асинхронную функцию которая сделает запрос
не очень понял. Тут создаётся Promise, чтобы подождать таймер и замедлить получение ответа
планируется ли обновление выпуска? а если получится то и как пристроить туда redux. чтлбы стор получал данные из бэка на сервере но они были достпны и на фронте. например для работы со страницей товаров или корзиной. если соотносить с примером в видео, то чтобы у счетчика первичное значение было загружено из бэка и видно было поисковым роботом поскольку рендерится на сервере.
Пока не планировал, но может сделать в дальнейшем
@@PurpleSchoolспасибо. полно подобного для старых версий. а вот для 13.5 почему-то нет.
Какая ситуация с некстом на сегодняшний день?
Все так же, все новые фичи пока в бете
позавчера завёл проект на NextJS и там папочка app была уже по умолчанию
Да, в 13.4 уже новый роутинг
На одном стуле SEO точеное, на другом - лоадинги...
😄
Лоадинги верчёные
Я купил курс по next, но хочется видеть проект на next 13. Все плохо с ним как я понимаю. Он на столько сырой, что на средних проектах уложит спать dev забирая всю память на пк. Мне обидно, что next такой лагучий в dev.
Если писать всё как в 12 и ниже в целом он рабочий, а вот экспериментальные фичи я бы не рекомендовал на продакшене использовать.
В общем app это какая то непонятная хрень которую пока лучше вообще нигде не использовать, максимум по баловаться )
На самом деле думаю в версии 14 она станет стабильной и все будут медленно переходить со старой структуры на новую.