Повний курс 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, це всебічний додаток повного стека!

Усі коди надаються покроково, тому, навіть якщо ви не хочете писати код разом, ви отримаєте доступ до повного вихідного коду головного проекту (так, ви будете будувати 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, і різні техніки рендерингу, такі як статична генерація сайтів, рендеринг на стороні сервера, інкрементальна статична генерація та рендеринг на стороні клієнта.

6. Статичні сторінки кавових магазинів | Кавовий поціновувач

Дізнайтеся про нюанси статичного рендерингу та як вирішити, що рендерити статично, коли ви робите API-запити до Foursquare та використовуєте SSG.

7. Локалізація кавових магазинів | Кавовий поціновувач

Цей розділ розглядає різні підходи до рендерингу з резервними методами, а також отримання розташування користувачів та використання API контексту.

8. Серверлес-функції | Кавовий поціновувач

Що таке серверлес-функції та коли вони застосовуються? Ви створите серверлес-функції для отримання статичної інформації про кавові магазини.

9. Зберігання даних кавового магазину за допомогою Airtable | Кавовий поціновувач

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

10. SWR та рендеринг на стороні клієнта | Кавовий поціновувач

Що таке SWR та коли його використовувати? Ви будете використовувати Next.js для SWR та рендерингу на стороні клієнта в цій частині.

11. Розгортання та оптимізація | Кавовий поціновувач

Дізнайтеся, як розгорнути ваш додаток на Vercel і Netlify, досліджуйте різних хмарних провайдерів, зрозумійте, що таке Lighthouse, і оптимізуйте продуктивність Next.js.

12. Налаштування проекту | Клон Netflix на Next.js

Підготуйтеся до своєї основної роботи! Цей розділ стосується закладення основ для вашого клону Netflix.

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

Створіть головну сторінку Netflix із рендерингом на стороні сервера, навчаючись викликати YouTube API для отримання та відображення відео. Ви також будете використовувати 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 днів. Жодних запитань.