Полный курс по Next.js

Добро пожаловать на наш курс по Next.js, где мы делаем акцент на эффективное обучение. Забудьте об устаревших и запутанных уроках, которые тратят ваше драгоценное время!

Мы выйдем за рамки основ, позволяя вам создавать современные, крупные корпоративные приложения, используя новейшие технологии Next.js.

И самое лучшее? Вы будете учиться в живом сообществе.

Зарегистрировавшись сегодня, вы получите доступ к нашему эксклюзивному живому онлайн-классу, где сможете общаться с тысячами учеников, выпускников, наставников, ассистентов и инструкторов.

Увлекательно. Динамично. Поддерживающе. Дружелюбно. Вдохновляюще. Необходимо.

Эти слова описывают то, как студенты относятся к сообществу ZTM Discord, одному из крупнейших и самых активных разработческих сообществ на Discord.

И что самое важное, вас будут обучать профессионалы отрасли (Анкита и Андрей) с реальным опытом работы в качестве старших инженеров в ведущих компаниях Кремниевой долины и Торонто. Кроме того, Анкита регулярно выступает на престижных конференциях по Next.js и React.

Этот проектно-ориентированный курс раскроет вам современный набор инструментов разработчика Next.js на 2024 год.

Вы даже создадите обширное приложение-аналог Netflix, используя React Hooks, Hasura (GraphQL), Context API, Airtable, Serverless Functions, Framer Motion, Vercel и многое другое.

В отличие от большинства онлайн-уроков по Next.js, это полноценное full-stack приложение!

Весь код будет предоставлен пошагово, поэтому, даже если вы не будете писать код одновременно, вы получите доступ к полному коду основного проекта (да, вы будете строить Netflix!), который можно добавить в ваше портфолио.

Вот что вы пройдете на курсе, чтобы превратиться из новичка в эксперта по Next.js

Программа курса практическая и ведет вас от создания идеи проекта до запуска профессионального приложения на Next.js в продакшене.

Начнем с основ и рассмотрим базовые принципы Next.js.

Но это только начало; затем мы углубимся в продвинутые темы, чтобы помочь вам принимать обоснованные архитектурные и инструментальные решения для ваших будущих проектов на Next.js.

Краткий обзор тем, которые вы изучите:

1. Основы Next.js

Мы изучим различия между Next.js и React, подчеркнем многочисленные преимущества Next.js и объясним концепцию JAM Stack. Этот базовый раздел заложит основу для всего курса.

2. Ваше первое приложение на Next.js | Кофейный знаток

Вы сразу создадите свой первый проект. Этот проект направлен на изучение основ Next.js, с акцентом на настройку проекта, CSS-модули, быструю перезагрузку и многое другое.

3. Маршрутизация в Next.js | Кофейный знаток

Вы узнаете о различных аспектах маршрутизации, включая динамические маршруты, индексные маршруты, именованные маршруты и компонент ссылок.

4. Стилизация в Next.js | Кофейный знаток

Этот сегмент охватывает стилизацию ваших приложений с помощью CSS-модулей, разделение стилей компонентов и внедрение глобальных стилей.

5. Гидрация, SEO и методы рендеринга в Next.js

Этот важный раздел расскажет о ключевых аспектах SEO, как Next.js улучшает SEO, и различные методы рендеринга, такие как статическая генерация сайтов, серверное рендеринг (SSR), инкрементальная статическая генерация и клиентское рендеринг.

6. Статические страницы кофеен | Кофейный знаток

Научитесь тонкостям статического рендеринга и тому, как решать, что именно нужно статически рендерить, создавая API-запросы к Foursquare и реализовав статическую генерацию.

7. Поиск кофеен | Кофейный знаток

Этот раздел охватывает различные резервы при статическом рендеринге, а также получение данных о местоположении пользователей и использование Context API.

8. Безсерверные функции | Кофейный знаток

Что такое безсерверные функции, и когда их применять? Вы создадите безсерверные функции для получения информации о кофеенах.

9. Хранение данных о кофейнях с помощью Airtable | Кофейный знаток

Вы погрузитесь в хранение данных с помощью Airtable, сохраняя данные о кофеенах и изучая клиентское рендеринг.

10. SWR и клиентское рендеринг | Кофейный знаток

Что такое SWR, и когда стоит его использовать? Вы будете использовать SWR и клиентское рендеринг в Next.js в этом разделе.

11. Развертывание и оптимизация | Кофейный знаток

Научитесь развертывать ваше приложение на Vercel и Netlify, познакомьтесь с различными облачными провайдерами, узнайте, что такое Lighthouse, и оптимизируйте производительность вашего приложения на Next.js.

12. Настройка проекта | Клон Netflix на Next.js

Готовьтесь к вашему крупному проекту! Этот сегмент посвящен подготовке фундамента для создания клона Netflix.

13. Главная страница Netflix и отображение видео | Клон Netflix на Next.js

Создайте главную страницу Netflix с серверным рендерингом, изучая, как использовать API YouTube для получения и отображения видео. Вы также будете использовать Framer Motion для создания сложных дизайнерских карточек.

14. Аутентификация с Magic | Клон Netflix на Next.js

Узнайте, как работает аутентификация в Next.js, внедрив систему входа без пароля и создав безопасную страницу авторизации.

15. Инкрементальная статическая генерация | Клон Netflix на Next.js

Отображайте видео на главной странице и используйте ISR для создания модальных окон, изучая больше о инкрементальной статической генерации.

16. Исследуем Hasura GraphQL | Клон Netflix на Next.js

Изучите GraphQL, Hasura и их архитектуру, настраивая проект в среде Hasura.

17. Аутентификация Hasura | Клон Netflix на Next.js

Познакомьтесь с архитектурой потоков аутентификации и используйте SDK на стороне сервера для входа пользователя.

18. Страница оценок и избранного | Клон Netflix на Next.js

Настройте Hasura для сервисов оценок, разрабатывайте API для лайков/дизлайков видео и создайте страницу с избранными видео.

19. Финальное развертывание | Клон Netflix на Next.js

Создайте финальный репозиторий GitHub, настройте его и разверните на Vercel!

20. Основы React | Дополнительный раздел

Дополнительный раздел для тех, кто нуждается в обновлении знаний по React.js и React Hooks, чтобы максимально использовать этот курс.

Интересует, что лучшего в этом курсе?

Этот курс будет постоянно развиваться и адаптироваться по мере изменений в экосистеме Next.js.

По мере появления обновлений в мире Next.js ждите обновления нашего курса с новыми лекциями и материалами.

Это значит, что вы можете вернуться к курсу в любой момент, чтобы освежить свои знания по последним лучшим практикам Next.js.

Итак, в чём суть?

Этот курс не о том, чтобы просто кодировать по шагам, не понимая базовые концепции, что в итоге приводит к завершению курса без осознания того, как двигаться дальше, кроме как смотреть еще больше обучающих видео... Нет, это не наш подход!

Наша цель — поднять вас с уровня полного новичка до того, чтобы вы оказались среди топ-10% разработчиков Next.js и React 💪.

Откуда мы знаем, что это работает?

Потому что многочисленные выпускники Zero To Mastery уже получили работу в таких компаниях, как Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook и Shopify.

Наши выпускники имеют самые разные жизненные пути, возраст и опыт, и многие начинали с полного нуля.

Так почему бы не вам?

Ничего не теряя, вы можете начать свое обучение уже сегодня, и если этот курс не оправдает ваших ожиданий, мы предлагаем простое и быстрое 100%-ное возврат средств в течение 30 дней. Никаких вопросов.