В данном уроке мы рассмотрим полный курс по Next.js – библиотеке для создания универсальных React-приложений. Мы изучим основы Next.js, реализацию SSR (серверного рендеринга) с помощью этой библиотеки, а также научимся использовать таймкоды для управления временем в наших приложениях.
Next.js – это фреймворк, основанный на React, который облегчает создание высокопроизводительных приложений. Он позволяет реализовывать SSR, что улучшает SEO и общую производительность вашего приложения. Также Next.js поддерживает маршрутизацию, аналитику, CSS-in-JS и многое другое.
В данном курсе мы сначала рассмотрим установку и настройку Next.js. Для этого нам понадобится Node.js и npm (или yarn). Для установки Next.js достаточно выполнить команду:
npx create-next-app@latestПосле установки Next.js, создадим простое приложение, чтобы понять основы данной библиотеки. Мы создадим несколько компонентов, подключим стили и научимся работать с маршрутами.
Далее мы изучим SSR с помощью Next.js. Для этого нам потребуется создать динамические страницы, которые будут загружаться с сервера при запросе пользователя. Мы также научимся работать с данными на стороне сервера и клиента, а также настроим маршрутизацию для SSR.
Затем мы перейдем к таймкодам. Таймкоды позволяют управлять временем в аудио и видео файлов, что может быть полезно при создании мультимедийных приложений. Мы научимся создавать таймкоды, синхронизировать их с контентом, а также управлять анимацией и интерактивностью на основе таймкодов.
В этом курсе мы также рассмотрим различные практические примеры использования Next.js: создание блога, интернет-магазина, админ-панели и многое другое. Мы научимся использовать сторонние библиотеки и инструменты для улучшения производительности и функциональности наших приложений.
По завершению курса вы сможете создавать высокопроизводительные React-приложения с использованием Next.js, реализовывать SSR, работать с таймкодами и многим другим. Будете готовы к созданию современных и мощных веб-приложений!
Удачи в изучении Next.js и разработке приложений на его основе!
Вышел новый полный курс по свежей версии Next.js 13.5 – https://youtu.be/bxnx92gxAe8
Скачать 🖥 готовый проект + база данных (требуется подписка) – https://htmllessons.ru/storage#storage_file_76
🦋 ТГ канал – https://t.me/redgroupchannel
👉 Полезные ссылки из видео:
Настройка vs code + сниппеты – https://www.youtube.com/watch?v=ZMDdsH7QUQU
Полный курс по React – https://youtu.be/k35Jt-VnzO8
Настройка Vs Code – https://youtu.be/ZMDdsH7QUQU
Разбор Next.js 13 – https://youtu.be/kJJhyPAVkO4
Amazon 2.0 – https://youtu.be/7-zwvUPKYpE
ебать ты тараторишь
"Вы наверное сидите думаете, мол учитель сам удивляется". Посмотрел недавно graphql и apollo стрим, это гениально, как будто вместе с товарищем сидим и разбираем, тут тоже это есть. Очень круто
Регистрация на сайте не работает. Летит ошибка запроса
У вот почему-то [id].tsx не работает, пишет 404, но если сделать папку [id], а потом page.tsx, то всё ок
⬆️⬆️⬆️
Вы рассуждали где некст не нужен, так вот мне недвано лендингпейдж на нексте заказали.Было смешно )
Хотел бы купить твой курс , но не могу – нету возможности 🙁
Насчет шрифтов и как красиво их заюзать в приложении. Просто создаем компонент, где мы объявляем шрифты и оборачиваем весь апп на руте этим компонентом. Т.о. фонты будут доступны везде, через variable, а т.к. обычно мы хотим объявить фонты 1 раз, там же, в этом компоненте и делаем весь сетап фонтов
Подключение шрифтов через className используется, когда подключаешь какую-то 3rd-party библиотеку (типа календарь и т.д.), и авторы дали только className, как единственный способ кастомизировать их коомпоненты. Другими словами, для совместимости с тонной пакетов, которые мы юзаем из npm
дублирует render (и соответственно console.log) из-за strict mode в react
а зачеи так сложно делать компонент клиентским? через dynamic? Чем этот способ отличается от способа написать 'use client' сверху? Объясните, пожалуйста
Спасибо за урок!
а как теперь его загрузить на хостинг
Чувак медленнее говори плиз
Один вопрос ! Next решает както задачу кэширования браузером: html/ks/css ?
++++++++++++++++++++
що скажете за React Server Components думаю ця штука заменит next?
А в Nextjs используется redux, redux toolkit? Или там эта логика пишется иначе? Если да, то как, и проще ли?
Круто, но не пойму как принцип KISS со всем этим согласуется 😀