Курс на Stepik
Обложка курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» на Stepik
3 999 ₽

React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid ★ 4.765

Открыть на
STEPIK.ORG

Next.js - готовый к production framework для React - самой популярной JavaScript библиотеки на сегодняшний день. Он позволяет разрабатывать производительные, SEO-friendly сайты с использованием Server Side Rendering (SSR) и статической генерацией страниц. При этом от вас требуется только базовое знание CSS, HTML и JavaScript, так в рамках курса мы не только разберём Next.js, но и React с нуля. При этом мы будем писать не просто какой-то учебный проект, а реальный production сайт, посвящённый рейтингам.

Показатель Текущие показатели Рост
Значение 🏆 Рейтинг 3 дн 7 дн 30 дн
Количество учеников на курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Учеников на курсе 814
Сертификаты, выданные на курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Сертификатов выдано 310
Отзывы о курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Отзывов получено 17
Рейтинг курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Рейтинг курса 4.765
Уроки в курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Количество уроков 177
Тесты в курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Количество квизов 37
Время прохождения курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Время прохождения курса —
Стоимость курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Стоимость курса 3 999 ₽ —
Обновления курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Обновления курса — —
Дата публикации курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Дата публикации курса — ———
Последнее обновление курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid»Последнее обновление — ———

Содержание курса

Разделы в курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» 19 разделов Уроки в курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» 177 уроков Тесты в курсе «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» 37 тестов Время прохождения курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» 22 ч. Последнее обновление курса «React + Next.js 14 — с нуля. TypeScript, Hooks, SSR и CSS Grid» обн. 18 марта 2026

1. Введение

6 уроков
Открытый
1.1 Преимущества NextJS ↗
2 019
2 019
7м 12с
35
Открытый
1.2 Как устроен курс ↗
2 871
1 482
6м 15с
30
Открытый
1.3 Обзор проекта ↗
1 873
1 873
3м 52с
17
Открытый
1.4 Как проходить обновлённый курс ↗
532
532
5м 49с
11
Открытый
1.5 Обзор курсов ↗
1 006
1 006
2м 31с
13
Открытый
1.6 Перенос курса ↗
334
334
0м 17с
6

2. Настройка окружения

3 урока
Закрытый
2.1 Установка софта ↗
643
584
3м 4с
15
Закрытый
2.2 Работа с nvm ↗
625
625
3м 24с
14
Закрытый
2.3 Настройки VSCode ↗
609
609
2м 9с
7

3. TypeScript

12 уроков
Открытый
3.1 Дополнительный курс по TypeScript ↗
1 043
1 043
2м 32с
14
Закрытый
3.2 Вводное видео ↗
598
555
2м 9с
9
Закрытый
3.3 Компилятор TypeScript ↗
585
585
3м 47с
15
Закрытый
3.4 Базовые типы ↗
566
566
11м 29с
19
Закрытый
3.5 Interfaces and Types ↗
549
549
7м 22с
16
Закрытый
3.6 Упражнение - Interfaces ↗
536
523
2м 8с
15
Закрытый
3.7 Литеральные типы ↗
530
530
3м 26с
13
Закрытый
3.8 Enums ↗
522
522
8м 8с
12
Открытый
3.9 Tuple ↗
827
827
4м 30с
14
Закрытый
3.10 Generics ↗
520
520
6м 28с
11
Закрытый
3.11 JSX ↗
529
529
7м 59с
10
Закрытый
3.12 Тест - TypeScript ↗
534
515
1м 26с
7

4. Старт проекта

11 уроков
Закрытый
4.1 Обзор модуля ↗
571
571
1м 8с
8
Закрытый
4.2 О новом router ↗
326
314
2м 12с
6
Закрытый
4.3 App Router - Развертка проекта ↗
326
326
2м 9с
5
Закрытый
4.4 Pages Router - Развертка проекта ↗
551
551
5м 33с
6
Закрытый
4.5 App Router - Cтруктура проекта ↗
310
298
5м 7с
8
Закрытый
4.6 Pages Router - Структура проекта ↗
531
531
6м 54с
7
Закрытый
4.7 Настройка eslint ↗
527
510
4м 24с
12
Закрытый
4.8 Настройка stylelint ↗
512
495
6м 51с
10
Закрытый
4.9 Отладка в VSCode ↗
500
481
7м 45с
3
Закрытый
4.10 React Dev Tools ↗
502
502
2м 54с
7
Закрытый
4.11 Тест - Старт проекта ↗
502
482
0м 28с
7

5. Компоненты Head и Document

7 уроков
Закрытый
5.1 Жизненный цикл React ↗
520
520
9м 59с
13
Закрытый
5.2 App Router - Задание Meta ↗
288
278
11м 14с
11
Закрытый
5.3 Pages Router - Компонент head ↗
486
486
5м 4с
9
Закрытый
5.4 React Fragment ↗
479
479
3м 33с
7
Закрытый
5.5 App Router - Корневой документ ↗
277
277
3м 38с
5
Закрытый
5.6 Pages Router - Компонент Document ↗
468
468
7м 32с
8
Закрытый
5.7 Тест - Компоненты Head и Document ↗
472
456
1м 38с
6

6. Figma для разработчика

5 уроков
Закрытый
6.1 Обзор модуля ↗
480
480
2м 15с
9
Закрытый
6.2 Разбор интерфейса ↗
447
425
5м 40с
10
Закрытый
6.3 Свойства компонент ↗
431
431
4м 32с
6
Закрытый
6.4 Экспорт графики ↗
422
422
5м 38с
5
Закрытый
6.5 Тест - Figma для разработчика ↗
434
427
0м 17с
3

7. Простые компоненты

13 уроков
Закрытый
7.1 Шрифты и цвета ↗
469
469
8м 54с
8
Закрытый
7.2 Первый компонент ↗
450
450
16м 9с
10
Открытый
7.3 Update - Библиотека classnames ↗
595
595
4м 47с
10
Закрытый
7.4 Classnames ↗
408
408
13м 32с
16
Закрытый
7.5 HTMLProps ↗
411
411
4м 55с
6
Открытый
7.6 Updated - Детали HTMLprops ↗
509
509
8м 8с
25
Закрытый
7.7 SVG Next 13 ↗
217
217
5м 32с
5
Закрытый
7.8 Работа с svg ↗
382
360
11м 28с
6
Закрытый
7.9 Дополнительно - SVG в NextJS 11 ↗
373
353
7м 42с
6
Открытый
7.10 Дополнительно - Обновление SVGR ↗
456
456
3м 7с
5
Закрытый
7.11 Упражнение - Компонент p ↗
363
363
6м 20с
10
Закрытый
7.12 Компонент тэга ↗
358
358
13м 11с
6
Закрытый
7.13 Тест - Простые компоненты ↗
363
354
1м 33с
3

8. Statefull компоненты

9 уроков
Закрытый
8.1 App Router - Клиентские компоненты ↗
226
226
7м 20с
4
Закрытый
8.2 React Hooks ↗
374
374
5м 43с
7
Открытый
8.3 useState ↗
601
601
5м 12с
9
Закрытый
8.4 useEffect ↗
348
348
5м 24с
6
Закрытый
8.5 Правила использования Hooks ↗
345
345
2м 17с
8
Закрытый
8.6 Архитектура компонента рейтинга ↗
351
351
2м 30с
5
Закрытый
8.7 Компонент рейтинга - 1 ↗
345
345
16м 58с
9
Закрытый
8.8 Компонент рейтинга - 2 ↗
327
327
11м 8с
9
Закрытый
8.9 Тест - Statefull компоненты ↗
343
331
1м 43с
3

9. HOC компоненты

8 уроков
Закрытый
9.1 Что такое HOC? ↗
357
357
5м 40с
10
Закрытый
9.2 App Router - Работа с layout ↗
183
183
10м 32с
3
Закрытый
9.3 App Router - Группы роутов ↗
178
178
6м 2с
6
Закрытый
9.4 App Router - Template ↗
175
175
2м 44с
1
Закрытый
9.5 App Router - Структура проекта ↗
174
174
6м 59с
3
Закрытый
9.6 Pages Router - Layout ↗
315
315
10м 16с
7
Закрытый
9.7 Pages Router - Пишем HOC withLayout ↗
303
303
4м 1с
6
Закрытый
9.8 Тест - HOC компоненты ↗
324
313
0м 28с
3

10. CSS Grid

9 уроков
Закрытый
10.1 Обзор модуля ↗
337
337
2м 20с
5
Открытый
10.2 Template и gap ↗
455
455
12м 31с
14
Закрытый
10.3 Justify и align ↗
294
294
7м 53с
12
Закрытый
10.4 Распределение ячеек ↗
289
289
9м 10с
15
Закрытый
10.5 Template-area ↗
287
287
9м 49с
18
Закрытый
10.6 Лучшие практики ↗
296
296
3м 2с
12
Закрытый
10.7 Вёрстка layout ↗
299
299
10м 38с
11
Закрытый
10.8 Упражнение - Вёрстка footer ↗
286
286
9м 1с
10
Закрытый
10.9 Тест - CSS Grid ↗
306
295
1м 28с
6

11. Server side rendering

12 уроков
Закрытый
11.1 Переменные окружения ↗
334
334
5м 19с
9
Закрытый
11.2 Как работает SSR? ↗
319
319
15м 41с
13
Закрытый
11.3 App Router - SSR в NextJS ↗
177
177
9м 7с
6
Закрытый
11.4 Pages Router - SSR в NextJS ↗
299
299
13м 49с
12
Закрытый
11.5 App Router - Получение данных ↗
171
171
13м 17с
5
Закрытый
11.6 App Router - Динамические страницы ↗
155
155
6м 58с
4
Закрытый
11.7 App Router - notFound ↗
147
147
5м 47с
3
Закрытый
11.8 App Router - generateStaticParams ↗
149
149
5м 44с
5
Закрытый
11.9 App Router - Ревалидация страниц ↗
145
145
7м 11с
4
Закрытый
11.10 Pages Router - Использование getStaticProps ↗
271
271
10м 16с
9
Закрытый
11.11 Pages Router - Использование getStaticPaths ↗
254
254
17м 17с
8
Закрытый
11.12 Тест - Server side rendering ↗
283
278
1м 36с
3

12. Контекст

5 уроков
Закрытый
12.1 useContext ↗
293
293
6м 7с
8
Закрытый
12.2 App Router - Работа с контекстом ↗
149
149
6м 30с
6
Открытый
12.3 Пишем свой контекст ↗
446
446
16м 47с
10
Закрытый
12.4 Вёрстка меню ↗
263
263
34м 18с
9
Закрытый
12.5 Тест - Контекст ↗
250
237
0м 30с
1

13. Роутинг

10 уроков
Закрытый
13.1 Компонент Link ↗
264
264
6м 6с
6
Закрытый
13.2 useRouter ↗
237
237
10м 1с
3
Закрытый
13.3 Упражнение - Добавление страниц ↗
209
209
1м 58с
2
Закрытый
13.4 Структура роутинга ↗
214
214
17м 33с
2
Закрытый
13.5 Вёрстка Sidebar ↗
186
186
4м 39с
3
Закрытый
13.6 Тест - Роутинг ↗
203
193
1м 50с
2
Закрытый
13.7 Обновление компонента Link ↗
100
100
4м 59с
4
Закрытый
13.8 App Router - Параллельные роуты ↗
99
99
4м 33с
2
Закрытый
13.9 App Router - Loading ↗
96
96
3м 12с
4
Закрытый
13.10 App Router - Error page ↗
91
91
7м 6с
4

14. Страница продуктов

10 уроков
Закрытый
14.1 Компоненты страниц ↗
201
201
7м 50с
5
Закрытый
14.2 Вёрстка страницы продуктов - 1 ↗
166
166
36м 0с
8
Закрытый
14.3 Regex отображения цены ↗
157
157
7м 35с
7
Закрытый
14.4 Упражнение - Доработка страницы ↗
149
149
1м 34с
4
Закрытый
14.5 Вёрстка страницы продуктов - 2 ↗
152
152
17м 53с
4
Закрытый
14.6 Вставка HTML ↗
147
147
3м 16с
4
Закрытый
14.7 useReducer ↗
164
164
3м 26с
5
Закрытый
14.8 Компонент сортировки ↗
157
157
12м 7с
6
Закрытый
14.9 Reducer сортировки ↗
152
152
12м 34с
7
Закрытый
14.10 Тест - Страница продуктов ↗
168
158
1м 5с
3

15. Компонент продукта

10 уроков
Закрытый
15.1 Компонент Input ↗
173
173
7м 51с
6
Закрытый
15.2 Упражнение - Компонент Textarea ↗
155
155
3м 4с
6
Закрытый
15.3 Компонент поиска ↗
151
151
13м 19с
8
Закрытый
15.4 Компонент продукта - планирование ↗
144
144
11м 32с
7
Закрытый
15.5 Компонент продукта - сетка ↗
137
137
22м 10с
7
Закрытый
15.6 Компонент продукта - стили ↗
137
137
18м 15с
8
Закрытый
15.7 Склонение слов ↗
143
143
13м 9с
9
Закрытый
15.8 Компонент Image ↗
141
141
12м 20с
6
Закрытый
15.9 Компонент продукта - адаптив ↗
136
136
18м 57с
6
Закрытый
15.10 Тест - Компонент продукта ↗
153
143
1м 32с
1

16. Работа с формами

10 уроков
Закрытый
16.1 Компонент отзыва ↗
155
155
25м 44с
4
Закрытый
16.2 Форма отзыва ↗
138
138
22м 10с
4
Закрытый
16.3 useForm ↗
149
149
12м 6с
4
Закрытый
16.4 Работа с формами ↗
143
143
10м 15с
5
Закрытый
16.5 Проброс ref ↗
138
138
6м 30с
3
Закрытый
16.6 Обработка ошибок ↗
133
133
12м 11с
3
Закрытый
16.7 Упражнение - Обработка ошибок Rating ↗
126
126
5м 50с
4
Закрытый
16.8 Отправка запроса со страницы ↗
131
131
16м 33с
4
Закрытый
16.9 useRef ↗
132
132
7м 53с
8
Закрытый
16.10 Упражнение - Исправление бага useReducer ↗
128
128
5м 50с
2

17. Анимация на Framer Motion

11 уроков
Закрытый
17.1 Вводное видео ↗
150
150
5м 15с
3
Закрытый
17.2 Принципы анимации ↗
144
144
7м 45с
4
Закрытый
17.3 Анимация меню ↗
144
144
12м 19с
6
Закрытый
17.4 Анимация сортировки ↗
124
124
4м 44с
4
Закрытый
17.5 Пишем свой hook ↗
115
115
8м 37с
6
Закрытый
17.6 useAnimation ↗
118
118
11м 22с
3
Закрытый
17.7 Упражнение - Анимация отзывов ↗
110
110
6м 0с
2
Закрытый
17.8 Динамическая иконка ↗
108
108
11м 31с
1
Закрытый
17.9 Мобильное меню ↗
114
114
17м 21с
1
Закрытый
17.10 Жесты и MotionValues ↗
110
110
7м 1с
0
Закрытый
17.11 Производительность ↗
107
107
1м 24с
2

18. Доступность

14 уроков
Закрытый
18.1 Виды доступности ↗
118
118
5м 12с
3
Закрытый
18.2 Цветовая доступность ↗
108
108
11м 25с
6
Закрытый
18.3 Доступность меню с клавиатуры ↗
103
103
20м 42с
5
Закрытый
18.4 Доступность форм с клавиатуры ↗
99
99
23м 45с
5
Закрытый
18.5 Упражнение - доступность сортировки ↗
92
92
2м 25с
2
Закрытый
18.6 ARIA атрибуты ↗
100
92
13м 20с
6
Закрытый
18.7 Использование Screen Reader ↗
100
100
13м 10с
2
Закрытый
18.8 Aria-label и aria-labelledby ↗
94
94
10м 50с
3
Закрытый
18.9 Aria-hidden ↗
93
93
9м 59с
1
Закрытый
18.10 Добавление landmarks ↗
94
86
6м 25с
4
Закрытый
18.11 Доступность форм ↗
98
98
15м 43с
3
Закрытый
18.12 Упражнение - Доступность оповещений ↗
90
90
5м 54с
3
Закрытый
18.13 Доступность меню и списка ↗
90
90
22м 43с
2
Закрытый
18.14 Уменьшение движения ↗
103
103
5м 2с
2

19. Подготовка к production

11 уроков
Закрытый
19.1 Font ↗
126
126
4м 53с
3
Закрытый
19.2 Script ↗
86
86
4м 30с
3
Закрытый
19.3 App Router - Расчёт meta ↗
69
69
3м 54с
2
Закрытый
19.4 Page Router - Добавление meta на страницу ↗
126
126
8м 18с
2
Закрытый
19.5 Установка метрики ↗
128
128
7м 33с
0
Закрытый
19.6 Husky ↗
139
139
6м 36с
0
Закрытый
19.7 Next export ↗
137
137
8м 16с
1
Закрытый
19.8 Страницы 404, 500 ↗
135
135
8м 34с
3
Закрытый
19.9 Сборка контейнера Docker ↗
153
153
18м 30с
4
Закрытый
19.10 Запуск через docker-compose ↗
139
139
9м 1с
1
Закрытый
19.11 Github actions ↗
167
167
12м 7с
1