Велике оновлення NextJS 13.4 - короткий огляд українською
2024 ж. 12 Мам.
3 048 Рет қаралды
❗ Нещодавно Next.JS випустив велике оновлення в якому з'явився новий App Router, вкладені сторінки та серверні компоненти. Про все це, а також чому useState тепер може викликати помилку ви дізнаєтесь з цього короткого огляду
0:00 Вступ
0:48 Нова структура проекту
02:02 App Router
5:34 Серверні компоненти
7:37 Підсумок
08:23 Практика
✉️ Telegram: t.me/reactbeginners
❤️ Підтримати канал: opencollective.com/farstar
💡Всі матеріали курсу: github.com/Drag13/react-learn...
Доступний та зрозумілий огляд. Однозначно вартий уваги всім зацікавленим.
Дякую за відгук і за поширення!
дякую за топовий конент, і дякую звичайно за укранську!)
Дякую! Сьогодні виходить нове відео про Next та серверні компоненти - kzhead.info/sun/qM1ymbKFgn56o5E/bejne.html
@@reactdev круто, увімкнув сповіщення, обовязково подивлюся! дякую!
Гарне відео, зрозуміле пояснення та приклади
Дякую!
Дуже круто відео! Дякую за контент та ще й українською!
Дякую. Давайте більше відео =) Можливо серія уроків по написанню проекту на Next React
В процесі)
круто, дякую за українську
Оце я розумію, стисло і корисно. Дякую 🙂
Дякую) буду пробувати розбиратись) правда мені більше треба з використанням ts) а потім ще й редакс вчитись сюди підключати)
Все коротко та зрозуміло. Дякую!
Дякую велике за контент! Завжди все зрозуміло чітко і без зайвого))))
Приходьте ще)
@@reactdev чекаю наступне відео)))
Супер, чоловіче я тебе кохаю. Такого зрозумілого огляду я навіть на англо-язичному ютубі не бачив. Будь ласка оглядай некст і далі.
Немає що оглядати вже) Наступний реліз зі стабільним use server ще не завтра) Але хитрий план у мене є :)
❤
Ойойой, круто, дякую за україномовний контент, я дуже ціную те що ти робиш, купи собі ще мікрофон щоб голос був трохи об'ємнішим і трошки музички додай на фоні і контент буде бомба
Та наче вже є непоганий мікрофон. Можливо треба ще потестувати його налатштування
Нє нє, тільки без музики😅 включіть собі щось своє на фоні і слухайте😊 з мікрофоном наче все ок
@@reactdev ну в тебе дійсно непоганий мікрофон, просто голос не дуже об'ємно звучить, деякі мікрофони це самі по собі роблять. Але це моя суб'єктивна думка, головне що відео інформативне та гарно зроблене.
@@DifferencialX Моливо треба погратися з налаштуванями
А відео дуже класне!. Коротко і інформативно, тим більше що Українською. Молодець!!!
О, це така структура як у мене👍 А я вже написав питання в коменті до стартового відео - а чого в мене не такі файли?))))
Перше відео було до цього мажорного релізу)
Супер відео! Щодо тек в круглих дужках- акщо без неї зробити просто теку апі то працює так само. Але може якісь є неочевидні моменти?
Круглі дужки просто дають групування, щоб ви чітко бачили де серверний код, де клієнтський, де загальний Звісно що їх можна і не використовувати, але тоді весь серверний код буде в теці АПІ
Є пару питань: 1. Чи використовуються терер _app.js і _document.js і якщо ні то де тепер робити ті речі, що робились в цих файлах(зокрема глобальні стилі,Providers... .) 2.Як тепер стилізувати серверні компоненти. 3. Чи має місце таке поняття як періодичне обновлення даних SWR-(mutate) при роботі з БД? Треба все це провіряти і переробляти!!! Я надіюсь, що переваг, крім сумнівної, ніби покращення структури проекту більше, ніж затрат на переробку проектів.
1. Ні, не використовується. Замість цього ви робите так: import { Metadata } from 'next'; export const metadata: Metadata = { title: 'Next.js', }; 2. css і досі працює. Щодо CSS In JS - чекаємо 3. Не дуже зрозумів питання
Раніше для періодичного оновлення даних на фронтенді я використовуував функцію mutate(). Перед тим задавши:const { data, mutate, error } = useSWR("/api/shop/references/d_brand/select-all", fetcher). (Це при коригуванні довідника). Питання: як тепер на фронтеді можна контролювати зміни в БД з певною періодичністю і якщо можна то як? А за _app.js i __document.js дякую, хоч це дуде добре описанов доці, простотреба було почитати😃
Якщо ми звертаємось по урлу до апі, то це за замовчуванням метод GET? А як звернутися методом POST наприклад? Що тоді має бути у файлі route.js? Одна функція яка відповідає за GET-запити, інша за POST-запити?
Так, це метод get Для того щоб зробити post потрібно в другому аргументі fetch вказати method: POST fetch(url, {method: 'POST'}) Так. Як функція названа, за той метод вона і відповідає. Get за GET, Post за POST
1.Було б дуже добре, якби ви зробили відео з прикладом роботи з БД (можна PostgreSQL типу CRUD) з її періодичним оновленням при коригуванні , або блог з коментарями, що оновлюються онлайн. 2.Дуже цікаво яку б ви запропонували структуру проекту з декількома рівняим сторінок і API до цих сторінок. Бо ткпер є дуже багато варіантів. (Все , що відноситься до сторінки створювати безпосередньо в папці сторінки зі своїми components,styles,api і іншими..., чи робити загальні папки components,styles,api... 1-й варіант добрий коли робиш якийсь окремий функціонал(він мені більше імпонує), а другий варіант ніби більш компактний, але я все рівно у всіх components ділив папки по функціоналу.
Працюємо над п.1, але не факт що буде зі справжньою базою, тому що моделювання БД це великий і не наш шматок. Щодо другого - я завжди намагаюсь притримуватись модульного підходу. Тобто код лежить там, де його використовують. Загальні папки component/context/hooks - погано працюють на середніх + проектах
На рахунок БД, так це не страшно я з ними працюю. 1.Мене більше цікавить чи варто виділяти API як ви в окрему папку типу (server)/api/video? Я попробував, що можна api просто помістити в папку video: video/api/data,js,route.js. Мені так більше подобається, але чи це якось не впливає негативно на маршрутизацію? Чи нема тут якихось підводних каменів?
@@user-bu7fw1kj6t Я створю (server) для того, щоб було місце куди покласти код, який є серверним, але не має відношення до API. Наприклад логіка та транспорт. Зазвичай серверна архітектура трьох рівнева - Дані, Логіка, Представлення де представлення може мати вигляд UI або API
Дякую. Я все зрозумів.😀
лайк за українську
Дякую!
Всім вітаннячка!))
Привіт)
Як тобі відео?
Встиг подивитись тільки перші 15 хв. Потім додивлюсь. Але впевнений що як завжди супер!)
Куди там донатити?)
@@vitaliihubariev9523 А ось сюди - send.monobank.ua/jar/ABjhPz6PVS
не дуже зрозумів для чого потрібен (server)/api , ми можемо просто робити фетч в page.tsx і отримувати дані. А що саме роблять ф-ції GET , POST ітд не зрозуміло
Next.JS дає можливість мати і фронтенд і бекенд одночасно (server)/api і є наш бекенд, який ти можеш використовувати. А функціх GET, POST - це обробники запитів до апі. GET Оброблює get запити, POST - відповідно POST
@@reactdev тепер більш зрозуміло, якщо буде бажання розкрийте більш детально api, буду дуже вдячний
@@Rasty_Boss Подивіться сюди, може стане в нагоді - kzhead.info/sun/Y5qFgr2kiXVqdJ8/bejne.html
4:45 шо таке той "глагол"? 🤔
Це HTTP глаголи - developer.mozilla.org/en-US/docs/Web/HTTP/Methods
@@reactdev ааа, так ви за методи запитів HTTP говорили. А я думаю шо за глаголи, шось нове в нексті зявилось, а я не в курсі був 😁
Так це мій русизм, перепрошую.
Для формування нової структури проекту потрібно оновити create-next-app! При оновленні yarn global add create-next-app видає помилку error create-strapi-app@4.3.4: The engine "node" is incompatible with this module. Expected version ">=14.19.1
Отут не підкажу, з yarn мало працюю