Главная страницаКатегория next.jsNext.js на примере

Next.js на примере

Name: Next.js на примере
Price: 12.5 USD
Rating: 4 (10 reviews)

Next.js by Example

udemy

★4 (всего оценок - 10)

Продолжительность

17 ч 29 мин

Категория

Next.js

Количество уроков

193 Видео

Дата добавления

22 февр. 2023 г., 00:41

Язык

Английский

Дата выхода

3 февр. 2023 г., 01:00

Дата обновления

29 апр. 2026 г., 17:04

Изучите Next.js на практике и шаг за шагом создайте два полноценных приложения — статичный персональный блог и гибридный интернет-магазин. Курс помогает быстро понять ключевые концепции фреймворка и освоить современные технологии, которые используются в реальных продакшн‑проектах.

Что вы изучите в курсе

Курс построен вокруг практики: вы будете разрабатывать два проекта, параллельно осваивая фундаментальные и продвинутые возможности Next.js.

Основы Next.js на примере статичного блога

Начальный проект — персональный блог — позволяет познакомиться с концепциями, которые делают Next.js мощным и удобным фреймворком для продакшена.

Ключевые темы первого проекта

Предварительный рендеринг (SSG) и его преимущества
Маршрутизация на основе файловой системы
Гидратация React-компонентов
Загрузка данных на этапе сборки
Стилизация с помощью глобальных CSS и библиотеки styled-jsx

Также вы разберёте варианты развертывания Next.js приложений — от Vercel до собственных серверов Linux.

Создание гибридного веб‑приложения магазина

Второй проект значительно сложнее и демонстрирует продвинутые возможности фреймворка, применимые в современных e-commerce решениях.

Работа с Headless CMS и серверными функциями

Данные для магазина загружаются из Strapi, что позволяет изучить интеграцию Next.js с внешними API и CMS.

Продвинутые возможности Next.js

Инкрементальная статическая регенерация (ISR)
Создание пользовательских API‑маршрутов
Оптимизация изображений через компонент Next Image
Использование Tailwind CSS для гибкой стилизации

TypeScript и лучшие практики разработки

Проект демонстрирует, как включить TypeScript в Next.js. Хотя основная часть курса использует JavaScript, полный TypeScript‑код доступен в GitHub‑репозитории.

Аутентификация и работа с данными

Аутентификация на базе JWT и cookie
Кэширование данных на клиенте с помощью React Query
Разные подходы к загрузке данных из внешних источников
Выбор оптимального способа SSR, SSG, CSR или ISR под задачу

Что включено в курс

Полный исходный код всех проектов
Пошаговые изменения к каждой лекции
Актуальность для Next.js 13 (без экспериментальных App Router функций)

Почему этот курс полезен

Курс сочетает теорию и глубокую практику, давая чёткое понимание того, как создаются реальные приложения на Next.js — от простой блог‑платформы до динамичного интернет-магазина с продвинутыми функциями.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:04:16
App vs Pages Router
Урок 2. 00:02:58
Project Overview
Урок 3. 00:08:11
Creating a Next.js Project
Урок 4. 00:04:40
Home Page
Урок 5. 00:04:40
Source Code
Урок 6. 00:06:14
TypeScript
Урок 7. 00:06:09
Page Routes
Урок 8. 00:03:29
Exercise: Add More Pages
Урок 9. 00:06:20
Nested Layouts
Урок 10. 00:08:45
Prerendering
Урок 11. 00:08:58
React Server Components
Урок 12. 00:07:41
Dev vs Production Server
Урок 13. 00:06:24
Link Component
Урок 14. 00:05:38
Prefetching
Урок 15. 00:03:58
Layout and Navigation
Урок 16. 00:01:44
Exercise: Review Links
Урок 17. 00:06:53
Styling Solutions
Урок 18. 00:04:25
Installing Tailwind CSS
Урок 19. 00:07:05
Layout Styling
Урок 20. 00:05:41
Color Palette
Урок 21. 00:03:44
Heading Component
Урок 22. 00:04:04
Import Alias
Урок 23. 00:04:48
Static Assets
Урок 24. 00:04:48
Image Cards
Урок 25. 00:06:28
Font Optimization
Урок 26. 00:05:31
Custom Tailwind Font
Урок 27. 00:04:53
Exercise: Custom Default Font
Урок 28. 00:07:35
Responsive Design
Урок 29. 00:05:20
Reading Files
Урок 30. 00:04:33
Rendering Markdown
Урок 31. 00:04:17
Tailwind CSS Typography
Урок 32. 00:04:41
Front Matter
Урок 33. 00:03:49
Data Layer Separation
Урок 34. 00:04:48
Dynamic Routes
Урок 35. 00:06:05
Listing Files
Урок 36. 00:02:54
Rendering Arrays
Урок 37. 00:08:07
Static Generation for Dynamic Routes
Урок 38. 00:03:32
Exercise: Featured Review
Урок 39. 00:04:21
Title and Meta Tags
Урок 40. 00:04:00
Title Template
Урок 41. 00:02:47
Dynamic Metadata
Урок 42. 00:04:04
Icon and Metadata Files
Урок 43. 00:03:47
Share Link Button
Урок 44. 00:05:11
Client Components
Урок 45. 00:05:08
Component State
Урок 46. 00:05:33
Nested Client Components
Урок 47. 00:02:57
Heroicons
Урок 48. 00:01:56
Deployment Options
Урок 49. 00:05:22
Deploying to Vercel
Урок 50. 00:04:03
Static Export
Урок 51. 00:02:27
Static Hosting
Урок 52. 00:05:19
Project Phase 2
Урок 53. 00:07:32
Strapi Overview
Урок 54. 00:04:13
Preloaded CMS Instance
Урок 55. 00:07:20
Fetch API
Урок 56. 00:07:04
Strapi API Parameters
Урок 57. 00:04:23
Get Reviews From CMS - Step 1
Урок 58. 00:04:01
Get Reviews From CMS - Step 2
Урок 59. 00:04:41
Get Review From CMS - Step 1
Урок 60. 00:03:42
Get Review From CMS - Step 2
Урок 61. 00:04:46
Refactoring: Fetch Reviews
Урок 62. 00:04:23
Get Slugs From CMS
Урок 63. 00:02:44
Static Build with CMS Data
Урок 64. 00:05:32
ESLint
Урок 65. 00:04:17
Next Image Component
Урок 66. 00:06:02
Image Conversion
Урок 67. 00:06:59
Lazy Loading and Priority
Урок 68. 00:04:45
Exercise: Home Images
Урок 69. 00:03:32
Subtitles
Урок 70. 00:05:12
Alternative Image Loaders
Урок 71. 00:09:14
Dynamic Params
Урок 72. 00:07:04
Dynamic Rendering
Урок 73. 00:04:52
Page Not Found
Урок 74. 00:08:45
Background Revalidation
Урок 75. 00:06:11
Fetch Cache and Revalidation
Урок 76. 00:08:46
Webhook Route Handler
Урок 77. 00:07:18
On-Demand Revalidation
Урок 78. 00:07:57
Rendering Strategies Comparison
Урок 79. 00:06:40
Query String Parameters
Урок 80. 00:04:49
Pagination with Strapi
Урок 81. 00:04:33
Page Count
Урок 82. 00:08:23
Exercise: Pagination Bar
Урок 83. 00:09:11
Search Params and Dynamic Rendering
Урок 84. 00:06:02
Exercise: usePathname
Урок 85. 00:05:27
Third-Party Components
Урок 86. 00:09:10
Client-Only Rendering
Урок 87. 00:06:55
Combobox Styles
Урок 88. 00:04:51
Combobox Events
Урок 89. 00:08:12
Server to Client Props
Урок 90. 00:07:06
Client-Side Fetch
Урок 91. 00:04:55
Search Route Handler
Урок 92. 00:04:03
Calling Route Handlers
Урок 93. 00:04:55
Cancelling Requests
Урок 94. 00:05:44
Debouncing Requests
Урок 95. 00:07:25
Environment Variables
Урок 96. 00:06:14
Configurable Image Source
Урок 97. 00:06:56
Strapi Cloud
Урок 98. 00:06:22
Deploying with Environment Variables
Урок 99. 00:02:22
Next Blog: Overview
Урок 100. 00:06:59
Next.js Project Setup
Урок 101. 00:04:16
Source Code
Урок 102. 00:06:04
Pre-rendering
Урок 103. 00:07:59
Development vs Production Server
Урок 104. 00:03:19
Adding New Pages
Урок 105. 00:04:52
Next Link Component
Урок 106. 00:04:47
Shared NavBar Component
Урок 107. 00:05:06
Custom App Component
Урок 108. 00:03:21
Next Head Component
Урок 109. 00:04:44
Global Styles
Урок 110. 00:06:42
Component Styles with Styled JSX
Урок 111. 00:04:44
Images and Other Assets
Урок 112. 00:02:44
First Post Page
Урок 113. 00:02:25
Markdown Syntax
Урок 114. 00:04:00
getStaticProps Function
Урок 115. 00:06:55
getStaticProps in Production Mode
Урок 116. 00:03:46
Reading a File
Урок 117. 00:03:34
Lib Module
Урок 118. 00:06:20
Rendering Markdown
Урок 119. 00:04:53
Front Matter
Урок 120. 00:08:10
Dynamic Route and getStaticPaths
Урок 121. 00:04:33
Listing Files in a Folder
Урок 122. 00:05:29
Listing Posts
Урок 123. 00:03:33
Dynamic Routes in Production Mode
Урок 124. 00:06:19
ThemeSwitch Component
Урок 125. 00:04:56
Dark Mode Styles
Урок 126. 00:04:42
DarkTheme Component
Урок 127. 00:06:46
Hydration
Урок 128. 00:05:46
Saving Preferences to Local Storage
Урок 129. 00:05:23
Feature Detection
Урок 130. 00:04:28
Deployment Options
Урок 131. 00:05:51
Vercel Platform
Урок 132. 00:04:33
Exporting as a Static Website
Урок 133. 00:04:30
Linux Server with Nginx
Урок 134. 00:05:56
Linux Server with Node.js
Урок 135. 00:02:20
Next Shop: Overview
Урок 136. 00:05:32
Create Next App
Урок 137. 00:08:10
TypeScript Support
Урок 138. 00:05:41
Tailwind CSS Setup
Урок 139. 00:08:05
Utility-First CSS
Урок 140. 00:07:32
High-level Architecture
Урок 141. 00:10:36
Strapi Headless CMS
Урок 142. 00:04:27
Backend Setup
Урок 143. 00:04:18
Displaying Products
Урок 144. 00:04:43
Fetching Data Server-side
Урок 145. 00:06:53
Fetching Data Client-side
Урок 146. 00:09:11
Incremental Static Regeneration
Урок 147. 00:05:09
Server-side Rendering
Урок 148. 00:06:22
API Routes
Урок 149. 00:03:30
Calling API Routes
Урок 150. 00:07:29
Choosing a Data Fetching Strategy
Урок 151. 00:02:55
Product Page Links
Урок 152. 00:05:46
Product Page
Урок 153. 00:05:04
Regenerating Product Pages
Урок 154. 00:09:45
On-demand Revalidation
Урок 155. 00:05:17
Fallback: Blocking
Урок 156. 00:06:00
Fallback and Page Not Found
Урок 157. 00:04:06
Shared fetchJson function
Урок 158. 00:04:03
Custom Error Class
Урок 159. 00:06:07
Environment Variables
Урок 160. 00:06:10
Product Card
Урок 161. 00:05:11
Responsive Grid
Урок 162. 00:02:50
Product Images
Урок 163. 00:07:09
Next Image Component
Урок 164. 00:05:42
Responsive Product Page
Урок 165. 00:06:30
Strapi Authentication
Урок 166. 00:05:30
Common Page Component
Урок 167. 00:06:21
Sign In Form
Урок 168. 00:04:22
Form State and Validation
Урок 169. 00:04:40
Sign In API Request
Урок 170. 00:06:45
Error and Loading States
Урок 171. 00:06:09
API Route with POST
Урок 172. 00:03:59
Login API Route
Урок 173. 00:06:07
Setting a Cookie
Урок 174. 00:04:50
NavBar with Authentication
Урок 175. 00:06:09
User API Route
Урок 176. 00:06:06
Loading User Data
Урок 177. 00:05:12
Signing Out
Урок 178. 00:05:00
Why React Query
Урок 179. 00:09:55
useQuery Hook
Урок 180. 00:03:37
useUser Custom Hook
Урок 181. 00:07:13
useMutation Hook
Урок 182. 00:04:34
Updating the Query Cache
Урок 183. 00:07:13
useSignIn Custom Hook
Урок 184. 00:05:18
useSignOut Custom Hook
Урок 185. 00:06:11
Cart Items Collection
Урок 186. 00:02:38
Cart Page
Урок 187. 00:04:06
Cart API Route
Урок 188. 00:02:04
Fetching Cart Items
Урок 189. 00:05:58
Displaying Cart Items
Урок 190. 00:04:22
POST Cart Handler
Урок 191. 00:03:20
Add to Cart Widget
Урок 192. 00:02:49
Add to Cart Mutation
Урок 193. 00:05:13
Wrap Up

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

Mr. UD
8 янв. 2025 г., 16:56
@andrewkaluba Please update to the app router videos, the new ones.
Mr. UD
15 янв. 2024 г., 19:32
Please update this course.
sativo
21 авг. 2023 г., 03:45
Hi Admin, is it possible to update this course. I believe it now offers both the "app" and the "pages" based routing pattern.