Изучи 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]

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

[@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.

[@freepeopleworldtv6138]

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

[@Abbos_700]

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

[@SoniqueChannel]

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

[@ockgame651]

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

[@user-ik3gf2gs9c]

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

[@jctrash4798]

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

[@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 Всегда пожалуйста!

[@evgeniykolmak5459]

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

[@Rais_Dev]

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

[@TeaCoder]

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

[@advokats086]

Уважаемый автор !!! Какой шрифт Вы используете в VS CODE ???

[@TeaCoder]

Jetbrains Mono

[@advokats086]

@@TeaCoder I thank you !!!

[@thunderrise8263]

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

[@TeaCoder]

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

[@user-mb8xo8gt5c]

Подскажите пожалуйста какой сниппет вы используете

[@TeaCoder]

"nafce": {
"scope": "typescriptreact",
"prefix": "nafce",
"body": [
"import { FC } from 'react'",
"import { Text, View } from 'react-native'",
"",
"const ${TM_FILENAME_BASE}: FC = () => {",
" return (",
" ",
" ${1}${TM_FILENAME_BASE}",
" ",
" )",
"}",
"",
"export default ${TM_FILENAME_BASE}"
],
"description": "create a new react native typescript component"
},
"nafcec": {
"scope": "typescriptreact",
"prefix": "nafcec",
"body": [
"import { FC, PropsWithChildren } from 'react'",
"import { View } from 'react-native'",
"",
"const ${TM_FILENAME_BASE}: FC = ({children}) => {",
" return ${1}{children}",
"}",
"",
"export default ${TM_FILENAME_BASE}"
],
"description": "create a new react native HOC typescript component"
},
"nafcei": {
"scope": "typescriptreact",
"prefix": "nafcei",
"body": [
"import { FC } from 'react'",
"import { Text, View } from 'react-native'",
"",
"interface I${TM_FILENAME_BASE} {${1}}",
"",
"const ${TM_FILENAME_BASE}: FC = () => {",
" return (",
" ",
" ${1}${TM_FILENAME_BASE}",
" ",
" )",
"}",
"",
"export default ${TM_FILENAME_BASE}"
],
"description": "create a new react native typescript component with interface"
},

[@user-mb8xo8gt5c]

@@TeaCoder спасибо!

[@qvadratkz]

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

[@faha_dev]

Никогда, это есть основа