Логотип Prowid — курсы программирования PROWIDIT Education Academy

Next.js

Курс Next.js — Prowid
Длительность курса
2 мес/ 12 уроков
Индивидуально
В мес 160 AZN
В группе
В мес 130 AZN
При оплате за весь курс в группе
15% скидка
Оплата по частям
50/50
По подписке
от 30 AZN в мес
Next.js — фреймворк на базе React для full-stack веб-приложений: серверный рендеринг, SEO, API и высокая производительность в одном инструменте. Для курса нужны знания React.

Идёт набор в новую группу — оставьте заявку, чтобы забронировать место

Записаться на курс Бесплатный пробный урок

Или учитесь сами в личном кабинете → по подписке от 30 AZN в месяц

Программа курса

Введение в Next.js: App Router и структура проекта
Маршрутизация: страницы, layout, динамические маршруты
Серверные и клиентские компоненты
Загрузка данных и кэширование
Стратегии рендеринга: SSR, SSG, ISR и streaming
Server Actions и формы
Route Handlers: создание API в Next.js
База данных: PostgreSQL и Prisma
Аутентификация и защита маршрутов
SEO: Metadata API, оптимизация изображений и шрифтов
Обработка ошибок, страницы loading и not-found
Деплой: Vercel и Docker
Финальный проект: full-stack приложение (блог или интернет-магазин)
Как мы учим?

Этапы обучения

01

Вебинар

Студенты подключаются к уроку в прямом эфире. В конце каждого урока студентам отправляется видеозапись занятия.

02

Домашнее задание

Все задания основаны на теме, пройденной на вебинаре. Домашняя работа помогает закрепить материал и лучше его понять.

03

Работа с ментором

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

04

Портфолио

За время курса вы выполните несколько проектов на разные темы — они покажут работодателям ваши навыки.

Самостоятельное обучение

Полная программа в личном кабинете

113 тем с теорией, примерами и практикой. Первые 4 — бесплатно, остальные — по подписке. Интерактивных уроков со слайдами и тренажёрами: 100.

Начать бесплатно Подписка — от 30 AZN в месяц
Знакомство с Next.jsтем: 6
  1. Что Next.js добавляет к React
  2. Создание проекта: create-next-app
  3. Структура проекта: app, public и конфигурационные файлы
  4. Команды dev, build и start: разработка и production-сборка
  5. Как Next.js рендерит страницу: сервер, HTML и гидрация
  6. next.config.ts, TypeScript и ESLint в проекте
Маршрутизация и навигациятем: 10
  1. Файловая маршрутизация: папки, page.tsx и вложенные маршруты
  2. Layout: корневой и вложенные макеты
  3. Навигация с компонентом Link
  4. Программная навигация: useRouter, usePathname, useParams
  5. Динамические сегменты: [id] и асинхронные params
  6. Catch-all сегменты: [...slug] и [[...slug]]
  7. Группы маршрутов и приватные папки
  8. Параметры запроса: searchParams и состояние в URL
  9. Редиректы и rewrites: redirect(), permanentRedirect() и next.config
  10. Проект: многостраничный сайт-портфолио
Специальные файлы и продвинутая маршрутизациятем: 7
  1. Состояние загрузки: loading.tsx и скелетоны
  2. Обработка ошибок: error.tsx и global-error.tsx
  3. Страница 404: notFound() и not-found.tsx
  4. template.tsx и иерархия специальных файлов
  5. Параллельные маршруты: слоты @folder и default.tsx
  6. Перехватывающие маршруты: модальные окна со своим URL
  7. Проект: фотогалерея с модальным просмотром
Server и Client Componentsтем: 8
  1. Server Components: компоненты, которые работают на сервере
  2. Директива 'use client' и клиентские границы
  3. Передача данных из серверных компонентов в клиентские
  4. Паттерны композиции: серверные компоненты внутри клиентских
  5. Контекст и провайдеры в App Router
  6. Сторонние клиентские библиотеки и next/dynamic
  7. Ошибки гидрации: причины и исправление
  8. Проект: перевод React SPA на Server Components
Стилизация, шрифты и изображениятем: 7
  1. Tailwind CSS v4 в Next.js: настройка и тема
  2. CSS Modules, глобальные стили и Sass
  3. UI-компоненты: shadcn/ui, cn() и варианты через cva
  4. Тёмная тема с next-themes без мигания
  5. Шрифты: next/font/google и локальные шрифты
  6. Изображения: компонент next/image
  7. Сторонние скрипты: next/script и @next/third-parties
Загрузка данных и стримингтем: 8
  1. Переменные окружения: .env и NEXT_PUBLIC_
  2. Загрузка данных в серверных компонентах
  3. Асинхронные Request API: cookies(), headers(), params
  4. Параллельная и последовательная загрузка: без водопадов
  5. Стриминг с Suspense: страница по частям
  6. Хук use(): передача промисов в клиентские компоненты
  7. Загрузка данных на клиенте: TanStack Query и SWR
  8. Проект: панель курсов валют и погоды
Route Handlers и proxy (middleware)тем: 5
  1. Route Handlers: API-эндпоинты в папке app
  2. Route Handlers: параметры, тело запроса и ответы
  3. CORS, вебхуки и потоковые ответы в Route Handlers
  4. Proxy (бывший middleware): перехват запросов до рендера
  5. Proxy на практике: редиректы, A/B-тесты и заголовки
Рендеринг и кэшированиетем: 9
  1. Статический и динамический рендеринг
  2. generateStaticParams: статические страницы для динамических маршрутов
  3. Как устроено кэширование в Next.js
  4. Кэширование fetch: cache, revalidate и tags
  5. ISR: инкрементальная регенерация по времени
  6. Ревалидация по требованию: revalidatePath и revalidateTag
  7. Директива 'use cache': cacheLife и cacheTag
  8. Partial Prerendering: статическая оболочка и динамические части
  9. Проект: новостной сайт с ISR и ревалидацией
Базы данных: PostgreSQL, Prisma и Drizzleтем: 9
  1. PostgreSQL и Prisma: подключение к проекту
  2. Схема Prisma, миграции и начальные данные
  3. Запросы Prisma: чтение, создание, изменение, удаление
  4. Связи в Prisma: один-ко-многим и многие-ко-многим
  5. Транзакции и обработка ошибок базы данных
  6. Drizzle ORM: схема на TypeScript и SQL-подобные запросы
  7. Слой доступа к данным: DAL, DTO и React cache()
  8. Поиск, фильтры и пагинация на стороне базы данных
  9. Проект: каталог товаров с поиском и фильтрами
Server Actions и формытем: 10
  1. Server Actions: директива 'use server' и формы
  2. Мутации данных: Server Action, revalidatePath и redirect
  3. Валидация форм на сервере с Zod
  4. useActionState и useFormStatus: состояние формы
  5. Server Actions вне форм: useTransition и bind
  6. Оптимистичные обновления с useOptimistic
  7. Сложные формы: React Hook Form, Zod и Server Actions
  8. Загрузка файлов через Server Actions
  9. Безопасность Server Actions
  10. Проект: full-stack менеджер задач на Server Actions
Аутентификация и авторизациятем: 9
  1. Основы аутентификации: сессии, cookie и JWT
  2. Auth.js v5: установка и вход через GitHub
  3. Сессия пользователя в серверных и клиентских компонентах
  4. Пользователи в базе данных: Prisma Adapter и колбэки
  5. Несколько провайдеров, Google и своя страница входа
  6. Регистрация и вход по email и паролю
  7. Защита маршрутов: proxy, DAL и Server Actions
  8. Авторизация: роли, права доступа и владение данными
  9. Проект: защищённая панель управления с ролями
SEO, контент и мультиязычностьтем: 11
  1. Metadata API: заголовки, описания и Open Graph
  2. Динамические метаданные: generateMetadata
  3. sitemap.xml, robots.txt, иконки и manifest
  4. Динамические OG-изображения с ImageResponse
  5. Структурированные данные JSON-LD и SEO-чеклист
  6. MDX: статьи в Markdown с React-компонентами
  7. Проект: блог на MDX
  8. Интернационализация: маршруты [locale] и определение языка
  9. Переводы с next-intl: сообщения, числа и даты
  10. SEO мультиязычного сайта: hreflang и локализованные URL
  11. Проект: мультиязычный лендинг az/ru/en
Профессиональные практики: тесты, производительность, безопасностьтем: 7
  1. Логирование и мониторинг ошибок: instrumentation.ts и Sentry
  2. Модульные тесты: Vitest и React Testing Library
  3. E2E-тесты с Playwright
  4. Core Web Vitals: измерение и оптимизация
  5. Меньше JavaScript: анализ бандла и React Compiler
  6. Безопасность приложения: заголовки, CSP и защита данных
  7. Pages Router и App Router: сравнение и миграция
Деплой и финальный проекттем: 7
  1. Деплой на Vercel
  2. Self-hosting: Node.js-сервер, standalone и Nginx
  3. Docker: контейнер для Next.js и PostgreSQL
  4. Статический экспорт: output: 'export'
  5. Финальный проект: идея, архитектура и схема данных
  6. Финальный проект: реализация ключевых функций
  7. Финальный проект: тесты, оптимизация, деплой и защита

Группа и индивидуальные занятия — это преподаватель, проверка заданий и сертификат. Подписка — материалы, тренажёры и прогресс в своём темпе, без обратной связи преподавателя.

Курс Next.js: как записаться

Заполните форму — сообщим дату старта ближайшей группы, расписание и условия оплаты. А можно сначала прийти на бесплатный пробный урок.

+994 77 333 38 36 Или сразу напишите в WhatsApp info@prowid.com

Отправляя форму, вы соглашаетесь, что данные будут использованы только для связи с вами.

WhatsApp