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

Учите Next.js

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

НАЧАТЬ ОБУЧЕНИЕ(бесплатно)
Смотреть программу

1,000+ codders записались

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

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

Программа

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

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

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

    Основы Next.js

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

    Почему Next.js

    4 уроков39

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

    6 уроков516

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

    6 уроков515

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

    6 уроков515

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

    6 уроков516

    Server Actions

    5 уроков413

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

    5 уроков515

    Проект: Coddy Eats

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

Learn by Doing

Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.

playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
Test #1test Case Success icon
Test #2test Case Success icon
Test #3test Case Failure icon
Input
"Alex"
Output
"Hello, Coddy! Alex"

Build Your Coding Streak

Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.

12 days streak

Return tomorrow to keep your streak!

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

Double or Nothing

Day 5 of 7

fire Freeze icon

Streak Freeze

2 left

Code Anywhere, Anytime

Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.

Python
7Streak
250Score
5Energy
Variables
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
CONTINUE
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
Journey
Goals
Leaderboard
Profile
4.9
StarStarStarStarStar
Rating

You're Not Alone in This

Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!

Challenger League
Challenger LeagueTop 7 advance
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 iconPromotion zoneleaderboard Arrow Up icon

Every way to learn

Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.

Intro to Variables
Audio

A variable is a named container that stores a value you can reference later in your program.

In Python, you create one by writing the name, an equals sign, then the value you want to store.

The value can change over time - reassigning the name simply points it to a new value.

1xSarah

Prove Your Skills

Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.

CoddyCertificate of Completion
This certifies thatJohn Doehas successfully completed
PythonPython Fundamentals
Verified
DateJan 2026
LinkedInAdd to 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 programming languages illustration

Learn Основы Next.js with Coddy

НАЧАТЬ