Menu
CoddyTech
НАЧАТЬ УЧИТЬСЯ
flag Ru iconРусскийdown icon
react iconЧасть путешествия по ReactНовыйПуть

Учите Next.js

Бесплатный интерактивный курс по Next.js, который ведёт от компонентов React к настоящему приложению: маршрутизация, лейауты, серверные и клиентские компоненты, получение данных и server actions. Подсказки ИИ помогут, когда застряли, а в конце вы получите бесплатный сертификат.

НАЧАТЬ ОБУЧЕНИЕ(бесплатно)
Смотреть программуПесочница Основы Next.js

2,333+ codders записались

47 уроков41 задачи99 вопросов квиза

  • Для начинающих
  • sparkles iconПомощь ИИ при написании кода
  • hint iconПрактические интерактивные уроки
  • quiz iconТесты для проверки знаний
  • certificate iconБесплатный сертификат о прохождении

Программа

1 разделов1 проектов47 уроков41 задачи99 вопросов квиза

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

  1. Раздел 1Основы42 уроков
  2. Раздел 2

    Основы Next.js

    Начать разделНачатьРазвернутьСвернуть    Перейдите от компонентов React к реальному приложению: маршрутизация на основе файловой системы, макеты, серверные и клиентские компоненты, получение данных, серверные действия и полноценный проект на Next.js.47 уроков41 задачи99 вопросов1 проект

    Почему Next.js

    4 уроков39

    Маршрутизация и ссылки

    6 уроков516

    Макеты и метаданные

    6 уроков515

    Сервер и клиент

    6 уроков515

    Данные на сервере

    6 уроков516

    Server Actions

    5 уроков413

    Клиентская навигация

    5 уроков515

    Проект: Coddy Eats

    Проект9 уроков9
Посмотреть полную программу путешествия по React
Что вы получаете
Всё, что вам нужно, чтобы научиться программировать

Учитесь на практике

Пишите реальный код, работайте с базами данных, создавайте сайты и осваивайте ИИ-промпты. Наши интерактивные уроки охватывают все навыки, необходимые современным разработчикам.

playground.js
Редактор кода
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Тест №1test Case Success icon
Тест №2test Case Success icon
Тест №3test Case Failure icon
Ввод
"Alex"
Вывод
"Hello, Coddy! Alex"

Создайте свою серию

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

12 дней подряд

Возвращайтесь завтра, чтобы сохранить серию!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

Всё или ничего

День 5 из 7

fire Freeze icon

Заморозка серии

2 left

Код где угодно

Возьмите свое путешествие по программированию с собой! Без настройки, без загрузок - просто откройте и начните программировать. Доступно на iOS, Android и Web с рейтингом 4.9 звезд.

Python
7Серия
250Очки
5Энергия
Переменные
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
ПРОДОЛЖИТЬ
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
Путь
Цели
Таблица лидеров
Профиль
4.9
ЗвездаЗвездаЗвездаЗвездаЗвезда
Рейтинг

Вы не одиноки

Соревнуйтесь в глобальных рейтингах, приглашайте друзей, чтобы получать награды, и празднуйте успехи друг друга. Программировать веселее с друзьями!

Лига Претендентов
Лига ПретендентовТоп 7 продвигаются
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up iconЗона продвиженияleaderboard Arrow Up icon

Учитесь как угодно

Читайте, слушайте, проверяйте себя, спрашивайте у ИИ или ищите то, что уже изучили. Каждый урок подстраивается под вас.

Введение в переменные
Аудио

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

В Python вы создаёте её, написав имя, знак равенства и значение, которое нужно сохранить.

Значение может меняться - переприсваивание просто направляет имя на новое значение.

1xSarah

Ваш сертификат

Получайте сертификаты за каждый завершенный курс. Добавьте их в свой профиль LinkedIn и резюме, чтобы продемонстрировать работодателям свои навыки программирования.

CoddyСертификат о прохождении
Настоящим подтверждается, чтоИван Ивановуспешно завершил(а)
python iconОсновы Python
Подтверждено
Датаянв. 2026
LinkedInДобавить в LinkedIn

Почему стоит учить Next.js на Coddy

  • Создавайте Next.js-приложения в браузере. Не нужно ставить Node, create-next-app и ничего настраивать - в каждом уроке настоящая директория app с лейаутом, страницами и компонентами для редактирования.
  • App Router таким, каким его используют в продакшене: папки как маршруты, динамические сегменты, вложенные лейауты, серверные и клиентские компоненты, получение данных, состояния загрузки и ошибок, формы с server actions.
  • Подсказки ИИ, которые читают ваш реальный код. Если маршрут отдаёт 404 или ломается серверный компонент, вы получите наводку на проблему без готового ответа.
  • Бесплатный сертификат по завершении раздела - Next.js остаётся самым востребованным React-фреймворком, и именно его современные frontend-вакансии просят вместе с самим React.

Частые вопросы об изучении Next.js

Что такое Next.js?

Next.js - это React-фреймворк для создания полноценных веб-приложений. React даёт компоненты; Next.js добавляет всё вокруг них: маршрутизацию по файловой системе, вложенные лейауты, серверный рендеринг, получение данных и server actions для форм и мутаций. Его разрабатывает и поддерживает Vercel, и это самый используемый React-фреймворк в продакшене.

Нужно ли знать React перед изучением Next.js?

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

Курс охватывает App Router?

Да - раздел построен вокруг современного App Router: директория app, папки как маршруты, динамические сегменты маршрутов, вложенные лейауты и модель серверных/клиентских компонентов. Это архитектура, которую новые проекты Next.js используют по умолчанию, и именно её ждут в актуальных вакансиях.

Чем отличаются серверные и клиентские компоненты?

Серверные компоненты рендерятся на сервере: они могут напрямую запрашивать данные и отправляют в браузер меньше JavaScript. Клиентские компоненты работают в браузере и отвечают за интерактивность: состояние, события, эффекты. Приложения Next.js сочетают и те и другие, и умение выбрать нужный тип - один из ключевых навыков, который отрабатывает этот раздел.

Можно ли выучить Next.js онлайн бесплатно?

Да. Интерактивный раздел Next.js бесплатный: полные уроки, настоящие задачи по коду с мгновенной проверкой и подсказки ИИ. Всё работает в браузере, поэтому для старта не нужно ставить Node или создавать проект.

Выдаётся ли сертификат после курса Next.js?

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

Пути обучения, включающие этот курс

Этот курс - один шаг более длинного пути: несколько курсов в том порядке, в котором их дал бы наставник, каждый со своим бесплатным сертификатом.

Иллюстрация языков программирования Coddy

Учите Основы Next.js с Coddy

НАЧАТЬ