Изучи Next.js 14 и создай свой сайт за 1 час! Полный курс по Next.js

Поддержать автора - www.donationalerts.com/r/teac...
В этом видео мы познакомимся с фреймворком Next.js, освоим его продвинутые возможности, такие как новый подход к роутингу, оптимизация SEO, серверный рендеринг (SSR), статическая генерация (SSG) и Incremental Static Regeneration (ISR), работа с клиентскими и серверными компонентами. В этом ролике будет как и практика next, на примере проекта, так и немного теории. Приятного просмотра!
Поддержи видео лайком, 30 лайков 👍 и я делаю еще один курс!
Скачать 🖥 готовый проект + база данных - teacoder.ru/projects/next-js
🦋 ТГ канал - t.me/teacoder_official
Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях!
00:00:00 - Начало
00:00:09 - План курса
00:00:25 - Преимущества Next js
00:00:48 - Создание проекта
00:03:32 - Структура проекта
00:04:08 - Как работает роутинг
00:08:33 - Как работает layout и not-found
00:13:48 - SEO оптимизация
00:16:29 - Как работать со стилями
00:17:40 - Изображения в Next js
00:19:11 - Как подключить шрифт
00:19:56 - Хуки в Next js
00:22:51 - Клиентские компоненты vs Cерверные компоненты
00:24:46 - use client, use server
00:27:17 - Подгрузка данных (SSG, SSR, ISR)
00:32:15 - Настройки в next.config.js
00:33:45 - Middleware
00:35:16 - Создание сайта на Next js
01:12:34 - Когда использовать Next js?
01:12:50 - Конец!
#Next #Nextjs #TeaCoder

[@natanrock4358]

Спасибо большое за крутое видео))) так держать)

[@freepeopleworldtv6138]

Ого , сегодня буду смотреть

[@Abbos_700]

Огромное спасибо

[@SoniqueChannel]

ура, выучил за час и устроился на 300к/наносек🎉🎉🎉

[@ockgame651]

Ааахаххахахахахха

[@user-ik3gf2gs9c]

привет можешь записать курс фронтенд с нуля? был бы благодарен, хорошо объясняешь! спаасибо!

[@jctrash4798]

Очень крутое видео, однозначно лайк!! Я сам тоже пишу один сайт на нексте и у меня есть проблема, которую я давно не могу решить. Например у меня в локальном хранилище есть какое-то значение, от которого я отталкиваюсь и решаю показывать контент или нет. Проблема в том что после перезагрузки, он не сразу видит это значение в локальном хранилище из-за чего, мой сайт возвращается в исходное состояние и только потом, после того как он увидит что в локальном хранилище что-то хранится меняет. Есть ли способ пофиксить такое поведение? Все это дело происходит на клиенте с директивой use client.

[@thunderrise8263]

Жду урок по nest.js

[@TeaCoder]

Всё будет, просто нужно время. Щас я делаю масштабный курс по css и sass

[@whoooooo]

Я не знаю, но уже какого человека смотрю и все допускают одну ошибку, по умолчанию при использование fetch в next.js он будет SSG он по умолчанию использует force-cache. Маленький не дочет, но почему тут все путают? В доках написано же. А так видос хороший, для начинающих топ! В свое время мне пришлось изучать на методе проб и ошибок, такое видео бы пригодилось! :) VIDEO: 30:00 force-cache (default) - Next.js looks for a matching request in its Data Cache. If there is a match and it is fresh, it will be returned from the cache. If there is no match or a stale match, Next.js will fetch the resource from the remote server and update the cache with the downloaded resource. no-store - Next.js fetches the resource from the remote server on every request without looking in the cache, and it will not update the cache with the downloaded resource. Good to know: If you don't provide a cache option, Next.js will default to force-cache, unless a dynamic function such as cookies() is used, in which case it will default to no-store. The no-cache option behaves the same way as no-store in Next.js.

[@Rais_Dev]

🌿Здравствуйте, спасибо как раз не мог нормально работать с middleware, теперь разбиваюсь нормально.🌿 ❓ Кстати, как вы относитесь к тому, что Next js используется как Full-stack фреймворк? 🤔 Я пробовал использовать его с MongoDB, но в итоге получился какой-то треш. Да и структура проекта выросла настолько что мне пробила крышу.

[@TeaCoder]

Я пробовал засовывать back-end в next и мне это очень не понравилось. Я больше люблю разделять back-end и front-end. сервер я пишу на nest js, а клиент на next. Мне так больше нравится

[@evgeniykolmak5459]

Каталаг, каталаг 🥸

[@user-wt5cr7xr1r]

А middleware можно создавать только в корне проекта или в каждой папке внутри app? Спрашиваю вот почему - если я хочу обработать разной логикой различные пути - прописать всё в одном middleware и добавить кучу if на нужный мне путь (звучит довольно громоздко). Хотелось бы это декомпозировать, есть такая возможность? Как я это вижу, разбить на несколько middleware`ов только для нужного URI соответствия

[@TeaCoder]

Да, можно создавать middleware не только в корне проекта, но и в каждой папке внутри app. Это позволит декомпозировать логику обработки различных путей и сделать код более модульным и масштабируемым. Можно создать отдельные middleware-файлы для каждого набора путей, которые требуют специальной обработки. Например, можно создать dashboard.middleware.ts для обработки путей, связанных с панелью управления, и auth.middleware.ts для обработки путей, связанных с аутентификацией. Чтобы использовать middleware в разных папках, можно импортировать его в файл middleware.ts в корне твоего проекта и добавить его в массив middleware: import { middleware as dashboardMiddleware } from './app/dashboard/dashboard.middleware' import { middleware as authMiddleware } from './app/auth/auth.middleware' export { default } from 'next/server' export const middleware = [ dashboardMiddleware, authMiddleware ] export const config = { matcher: [ '/dashboard/:path*', '/auth/:path*' ]

[@user-wt5cr7xr1r]

@@TeaCoder супер, спасибо за разъяснение 👍

[@TeaCoder]

@@user-wt5cr7xr1r Всегда пожалуйста!

[@qvadratkz]

Html and css когда умрёт?