Веб-разработка

Учебник Next.js для начинающих

22 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Next.js — самый популярный фреймворк поверх React для создания быстрых, дружелюбных к SEO fullstack-приложений. Курс рассчитан на тех, кто уже знает React (компоненты, пропсы, состояние, хуки) и хочет научиться строить настоящие сайты. Главный упор — на ключевое отличие от обычного React: серверные компоненты по умолчанию и стратегии рендеринга (SSR, SSG, ISR). Вы освоите App Router и файловую маршрутизацию, вложенные layout и динамические сегменты, получение данных через fetch с кэшированием, метаданные для SEO, серверные действия (Server Actions) и обработчики маршрутов, стилизацию и оптимизацию изображений и шрифтов, а в конце соберёте мини-блог и задеплоите его на Vercel. Pages Router упомянут кратко — для совместимости. Примеры корректны: интерактивные блоки на чистом JavaScript можно запускать прямо в браузере, а серверный код помечен как нерабочий для запуска и служит образцом.

Курс «Next.js» состоит из 6 разделов и 22 уроков: Введение в Next.js, Маршрутизация в App Router, Рендеринг и компоненты, Данные и серверная логика, Стилизация и оптимизация и Практика и деплой. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

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

  1. 1 Введение в Next.js

    1. Что такое Next.js и зачем он поверх React

      Next.js — фреймворк над React: серверный рендеринг, файловая маршрутизация, оптимизации и fullstack-возможности. Разбираем, какие проблемы он решает.

    2. Создание проекта: create-next-app

      Запускаем create-next-app, разбираем флаги и зависимости. Как поднять dev-сервер и открыть первую страницу Next.js на localhost:3000.

    3. Структура проекта: app/ и public/

      Разбираем папки нового проекта Next.js: app/ с маршрутами, public/ для статики, next.config и служебные файлы. Что где лежит и зачем.

    4. App Router и Pages Router: обзор

      Два подхода к маршрутизации в Next.js: современный App Router (app/) и классический Pages Router (pages/). В чём разница и что выбирать.

  2. 2 Маршрутизация в App Router

    1. Файловая маршрутизация, page.js и layout.js

      Папки в app/ становятся URL, page.js делает сегмент страницей, а layout.js задаёт общий каркас и сохраняется между переходами. Основа App Router.

    2. Динамические маршруты: [id] и params

      Папка [id] делает сегмент маршрута динамическим. Как получить значение из URL через params и сгенерировать страницы для списка элементов.

    3. Навигация: Link и useRouter

      Компонент Link для переходов без перезагрузки и хук useRouter для программной навигации. Почему обычный <a> в Next.js — не лучший выбор.

    4. Загрузка, ошибки и группы маршрутов

      Файлы loading.js и error.js дают встроенные состояния загрузки и ошибки для сегмента. Группы маршрутов (folder) организуют структуру без влияния на URL.

  3. 3 Рендеринг и компоненты

    1. Серверные компоненты по умолчанию

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

    2. Клиентские компоненты: 'use client'

      Директива 'use client' превращает компонент в клиентский: появляются состояние, эффекты и обработчики. Когда она нужна и как сочетать с серверными.

    3. Стратегии рендеринга и получение данных

      SSG, SSR и ISR — три способа отдать страницу. Данные грузят обычным fetch в серверном компоненте, а опции кэша (no-store, revalidate) и определяют стратегию.

    4. Метаданные и SEO: generateMetadata

      Экспорт metadata и функция generateMetadata задают title, description и Open Graph прямо из серверного компонента. Динамические мета-теги для SEO.

  4. 4 Данные и серверная логика

    1. Серверные действия: Server Actions

      Server Actions — функции с директивой 'use server', которые выполняются на сервере и вызываются прямо из форм и обработчиков. Мутации без отдельного API.

    2. Обработчики маршрутов: Route Handlers

      Файл route.js в app/api создаёт настоящий API-эндпоинт с методами GET/POST. Когда нужен полноценный API помимо серверных компонентов и действий.

    3. Формы, ревалидация и обновление данных

      После мутации данные надо обновить: revalidatePath и revalidateTag сбрасывают кэш, а useFormStatus показывает состояние отправки. Полный цикл работы с формой.

    4. Переменные окружения

      Файл .env, разница между серверными и публичными переменными NEXT_PUBLIC_, и почему секреты не должны попадать в браузер. Безопасная работа с ключами.

  5. 5 Стилизация и оптимизация

    1. Способы стилизации: CSS Modules и Tailwind

      Глобальные стили, CSS Modules с локальными классами и обзор Tailwind. Какой подход выбрать для проекта на Next.js и чем они отличаются.

    2. Оптимизация изображений: next/image

      Компонент next/image автоматически сжимает, ресайзит и лениво грузит картинки в нужном формате. Чем он лучше обычного тега img и как его настроить.

    3. Шрифты, статика и производительность

      next/font самохостит шрифты без мерцания, public/ хранит статику, а серверные компоненты, разделение кода и Core Web Vitals определяют скорость сайта.

  6. 6 Практика и деплой

    1. Реальное приложение: структура и блог

      Организуем папки реального проекта (app/ — маршруты, components/, lib/) и собираем из изученного мини-блог: серверный список, динамическая статья, клиентский лайк.

    2. Аутентификация и база данных: обзор

      Обзорно о подключении БД и аутентификации в Next.js: где хранить сессии, почему доступ к данным — на сервере, и какие библиотеки решают эти задачи.

    3. Деплой и что дальше

      Продакшен-сборка через next build, деплой на Vercel и другие платформы, переменные окружения на проде и дорожная карта дальнейшего изучения Next.js.