Разработка современных веб-приложений на Next.js

Этот курс предназначен для изучения фреймворка Next.js с нуля до уровня создания полноценных fullstack-приложений. Вы освоите App Router, серверные компоненты, работу с данными и оптимизацию производительности.

1. Введение в экосистему Next.js: установка, структура проекта и основы React Server Components

Введение в экосистему Next.js: установка, структура проекта и основы React Server Components

Добро пожаловать в курс по разработке современных веб-приложений на Next.js! Если вы уже знакомы с React, то, возможно, задавались вопросом: зачем нужен еще один инструмент поверх него? Если React — это библиотека для создания пользовательских интерфейсов (как двигатель), то Next.js — это полноценный фреймворк (как готовый автомобиль), который предоставляет структуру, правила и инструменты для создания готовых к продакшену приложений.

В этой первой статье мы разберем фундамент: как установить Next.js, как ориентироваться в файловой системе нового проекта и, самое главное, поймем концепцию React Server Components, которая кардинально меняет подход к разработке.

Почему Next.js?

React сам по себе великолепен, но он оставляет разработчику множество нерешенных вопросов: как настроить маршрутизацию? Как оптимизировать загрузку изображений? Как обеспечить SEO (поисковую оптимизацию)? Next.js решает эти проблемы «из коробки».

Основные преимущества:

* Гибридный рендеринг: Возможность рендерить страницы как на сервере, так и на клиенте. * Маршрутизация на основе файловой системы: Не нужно настраивать сложные конфигурации роутера, структура папок определяет URL. * Автоматическая оптимизация: Изображения, шрифты и скрипты оптимизируются автоматически для лучшей производительности.

Установка и создание первого проекта

Перед началом работы убедитесь, что на вашем компьютере установлен Node.js (рекомендуется версия 18.17.0 или выше). Вы можете проверить это, введя команду node -v в терминале.

Шаг 1: Инициализация проекта

Для создания нового приложения мы будем использовать утилиту create-next-app. Это официальный инструмент, который настраивает все необходимое окружение.

Откройте терминал и выполните следующую команду:

Здесь my-next-app — это название вашей папки с проектом.

Шаг 2: Настройка конфигурации

Во время установки терминал задаст вам несколько вопросов. Для целей этого курса мы рекомендуем следующие ответы:

  • Would you like to use TypeScript? — Yes (Мы будем использовать TypeScript для строгой типизации).
  • Would you like to use ESLint? — Yes (Помогает находить ошибки в коде).
  • Would you like to use Tailwind CSS? — Yes (Современный фреймворк для стилизации).
  • Would you like to use src/ directory? — No (Для простоты будем работать в корне, но использование src тоже популярно).
  • Would you like to use App Router? (recommended) — Yes (Это современный стандарт Next.js, который мы и будем изучать).
  • Would you like to customize the default import alias (@/*)? — No.

    • После завершения установки перейдите в папку проекта:

    И запустите сервер разработки:

    Теперь, открыв браузер по адресу http://localhost:3000, вы увидите стартовую страницу Next.js.

    Структура проекта: App Router

    С выходом Next.js 13 (и стабилизацией в 14-й версии) был представлен App Router. Это новая парадигма построения приложений, основанная на папке app. Давайте разберем структуру файлов, которую создал генератор.

    !Структура файлов в стандартном проекте Next.js с использованием App Router.

    Ключевые файлы и папки

  • app/: Главная папка вашего приложения. Все, что находится здесь, может быть частью маршрутизации.
    • * page.tsx: Этот файл отвечает за отображение контента по определенному маршруту. Файл app/page.tsx соответствует главной странице (/). * layout.tsx: Этот файл определяет общую структуру (оболочку) для страниц. Корневой layout.tsx обязательно должен содержать теги <html> и <body>. * globals.css: Глобальные стили, которые применяются ко всему приложению.
  • public/: Папка для статических файлов (изображения, шрифты, иконки), которые должны быть доступны напрямую из браузера. Например, файл public/logo.png будет доступен по адресу /logo.png.
  • next.config.js (или .mjs): Файл конфигурации самого Next.js. Здесь настраиваются редиректы, переменные окружения и плагины.
  • package.json: Список зависимостей и скриптов для запуска проекта.

    • Как работает вложенность (Routing)

    В Next.js файловая система — это и есть ваш роутер. Чтобы создать новый маршрут, например http://localhost:3000/about, вам нужно:

  • Создать папку about внутри папки app.
  • Внутри папки about создать файл page.tsx.

    • Next.js автоматически распознает этот файл и создаст соответствующий маршрут.

    React Server Components (RSC): Смена парадигмы

    Это самая важная и сложная концепция для понимания в современном Next.js. Раньше (в классическом React) все компоненты были клиентскими: браузер скачивал пустой HTML, затем загружал огромный JS-файл, выполнял его и только потом отрисовывал интерфейс. Это называется Client-Side Rendering (CSR).

    Next.js использует React Server Components (RSC). По умолчанию все компоненты в папке app являются Серверными Компонентами.

    Что такое Серверный Компонент?

    Серверный компонент рендерится только на сервере. Браузер получает уже готовый HTML. Код этого компонента (логика, импорты тяжелых библиотек) никогда не отправляется в браузер.

    Преимущества Серверных Компонентов:

    * Производительность: Меньше JavaScript отправляется клиенту. * Доступ к бэкенду: Вы можете обращаться к базе данных или файловой системе прямо внутри компонента. * Безопасность: Секретные ключи API и логика остаются на сервере.

    Пример серверного компонента:

    Обратите внимание: мы используем async/await прямо в компоненте. В обычном React так делать нельзя, но в Server Components — можно и нужно.

    Клиентские Компоненты (Client Components)

    Означает ли это, что мы больше не можем использовать хуки React, такие как useState или useEffect? Нет. Но серверные компоненты их не поддерживают, так как у сервера нет понятия «состояние браузера» или «клик мыши».

    Если вам нужна интерактивность (обработчики событий onClick, onChange, хуки состояния), вам нужно явно объявить компонент как Клиентский.

    Для этого используется директива 'use client' в самой первой строке файла.

    !Разделение ответственности между серверными и клиентскими компонентами.

    Когда использовать Server, а когда Client?

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

    | Характеристика | Server Component | Client Component | | :--- | :--- | :--- | | Доступ к базе данных | Да | Нет | | Использование useState, useEffect | Нет | Да | | Обработчики событий (onClick) | Нет | Да | | Использование браузерных API (window, localStorage) | Нет | Да | | Async/Await в компоненте | Да | Нет | | Размер JS-бандла для клиента | 0 Кб | Зависит от кода |

    Итоги

    Мы успешно заложили фундамент для работы с Next.js. Теперь у вас есть установленный проект и понимание того, как структурированы файлы. Вы узнали, что Next.js использует файловую систему для маршрутизации и разделяет компоненты на серверные (для данных и разметки) и клиентские (для интерактивности).

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

    2. Мастерство маршрутизации: App Router, вложенные макеты, динамические пути и навигация

    Мастерство маршрутизации: App Router, вложенные макеты, динамические пути и навигация

    В предыдущей статье мы заложили фундамент вашего понимания Next.js: установили проект, разобрали базовую структуру файловой системы и познакомились с концепцией React Server Components. Вы уже знаете, что создание файла page.tsx внутри папки app автоматически создает маршрут. Однако реальные веб-приложения редко состоят из простых статических страниц.

    Сегодня мы превратимся из новичков в архитекторов приложений. Мы научимся создавать сложные вложенные структуры, страницы, зависящие от данных (например, карточки товаров), и организовывать навигацию так, чтобы пользователь чувствовал мгновенный отклик интерфейса.

    Вложенные маршруты и сила Layouts

    Одной из самых мощных возможностей App Router в Next.js является система вложенных макетов (Nested Layouts). В традиционном React-разработке (например, с использованием старого React Router) часто приходилось дублировать код навигации или «шапки» сайта на каждой странице. Next.js решает эту проблему элегантно.

    Как работает вложенность

    Маршрутизация в Next.js отражает структуру вашей файловой системы. Если вы создадите папку dashboard, а внутри нее папку settings, то путь к странице будет /dashboard/settings.

    Но что, если у всего раздела /dashboard должна быть общая боковая панель навигации, которая отличается от главной страницы сайта? Здесь на сцену выходит файл layout.tsx.

    Иерархия макетов

    Макет (layout.tsx) — это UI, который является общим для нескольких страниц. Главная особенность макетов: при переходе между страницами внутри одного макета, сам макет не перерисовывается. Его состояние сохраняется, и он остается интерактивным.

    Представьте следующую структуру файлов:

    Когда пользователь заходит на /dashboard/settings, Next.js собирает страницу как матрешку:

  • Берет app/layout.tsx.
  • Внутрь него помещает app/dashboard/layout.tsx.
  • Внутрь макета дашборда помещает app/dashboard/settings/page.tsx.

    • !Схема, демонстрирующая принцип вложенности макетов (Nested Layouts), где родительские компоненты оборачивают дочерние.

    Создание вложенного макета

    Давайте создадим макет для раздела блога. Создайте файл app/blog/layout.tsx:

    Проп children — это критически важная часть. Именно вместо children Next.js подставит либо page.tsx, либо еще один вложенный layout.tsx.

    Динамические маршруты (Dynamic Routes)

    Статические пути, такие как /about или /contact, хороши, но что делать, если у вас интернет-магазин с тысячами товаров? Вы не будете создавать папку для каждого товара вручную. Вам нужны динамические сегменты.

    Синтаксис квадратных скобок

    Чтобы сделать сегмент пути динамическим, оберните название папки в квадратные скобки: [folderName]. Например, app/products/[id]/page.tsx.

    Этот файл будет отвечать за маршруты: * /products/1 * /products/sneakers * /products/abc-123

    Получение параметров

    Как получить значение id внутри компонента страницы? Next.js передает объект params в качестве пропса в компонент страницы.

    Обратите внимание: params — это объект, где ключи соответствуют названиям папок в скобках. Если папка называется [slug], то вы будете обращаться к params.slug.

    > В последних версиях Next.js доступ к params может быть асинхронным в определенных сценариях, но для базового использования структура остается простой.

    Catch-all Segments (Захват всех путей)

    Иногда нужно захватить не один сегмент, а всю оставшуюся часть пути. Например, для документации: /docs/getting-started/installation. Для этого используется троеточие внутри скобок: [...slug].

    Файл app/docs/[...slug]/page.tsx обработает любой путь, начинающийся с /docs/, и вернет массив сегментов.

    Пример URL: /docs/a/b Значение params.slug: ['a', 'b']

    Навигация и компонент Link

    В классическом вебе для перехода между страницами используется тег <a>. При клике на него браузер полностью перезагружает страницу, скачивая заново все CSS и JS файлы. Это медленно и неэффективно.

    Next.js предлагает компонент <Link>, который обеспечивает клиентскую навигацию.

    Использование <Link>

    Преимущества <Link>:

  • Мгновенный переход: Next.js меняет только контент внутри <body>, не перезагружая страницу целиком.
  • Prefetching (Предзагрузка): Когда ссылка попадает в область видимости пользователя (viewport), Next.js в фоновом режиме подгружает код целевой страницы. К моменту клика страница уже готова к отображению.

    • Программная навигация

    Иногда переход нужно совершить не по клику на ссылку, а в результате действия, например, после успешной отправки формы. Для этого используется хук useRouter.

    Важно: Так как это хук, он работает только в Клиентских Компонентах ('use client').

    Специальные файлы: Loading и Error

    Next.js предоставляет встроенные механизмы для обработки состояний загрузки и ошибок, используя специальные имена файлов.

    loading.tsx

    Если вы создадите файл loading.tsx в любой папке маршрута, Next.js автоматически покажет его содержимое, пока загружается основной контент страницы (page.tsx). Это основано на технологии React Suspense.

    Пользователь увидит этот спиннер мгновенно при переходе, что значительно улучшает UX (пользовательский опыт).

    error.tsx

    Этот файл позволяет создать «границу ошибок» (Error Boundary) для конкретного сегмента маршрута. Если в page.tsx произойдет ошибка, все приложение не упадет. Вместо этого отобразится компонент из error.tsx.

    Файл error.tsx обязательно должен быть клиентским компонентом.

    Группировка маршрутов (Route Groups)

    Иногда вам нужно организовать файлы в папки для удобства разработки, но вы не хотите, чтобы эти папки становились частью URL. Для этого название папки берется в круглые скобки: (folderName).

    Пример структуры:

    Папки (marketing) и (shop) игнорируются роутером. Это полезно, например, если вы хотите задать разные layout.tsx для маркетинговой части сайта и для магазина, не меняя при этом структуру URL.

    Заключение

    Мы разобрали мощные инструменты маршрутизации Next.js. Теперь вы умеете: * Строить иерархию интерфейсов с помощью вложенных layout.tsx. * Создавать страницы для динамического контента, используя [id]. * Организовывать быструю навигацию с помощью <Link> и useRouter. * Обрабатывать состояния загрузки и ошибок с помощью специальных файлов.

    Эти знания позволяют создавать приложения, которые не только функциональны, но и приятны в использовании. В следующей статье мы перейдем к «сердцу» любого приложения — получению данных (Data Fetching), где узнаем, как эффективно загружать информацию из баз данных и API прямо в наших серверных компонентах.