Next.js 15: Полное руководство по современной веб-разработке

Этот курс охватывает ключевые нововведения Next.js 15, включая интеграцию с React 19, обновленный механизм кэширования и Turbopack. Вы научитесь создавать производительные full-stack приложения, используя App Router и Server Actions.

1. Введение в Next.js 15: Установка, структура проекта и основы App Router

Введение в Next.js 15: Установка, структура проекта и основы App Router

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

Next.js прошел долгий путь от простого инструмента для серверного рендеринга до полноценного фулстек-решения. Версия 15 закрепляет успех архитектуры App Router, улучшает производительность с помощью Turbopack и вводит новые стабильные API для работы с данными. В этой статье мы разберем, как создать проект, что находится внутри папок и как работает маршрутизация.

Что такое Next.js и зачем он нужен?

React — это библиотека для создания пользовательских интерфейсов. Однако сам по себе React не решает множество задач, необходимых для создания полноценного веб-приложения: маршрутизация, оптимизация изображений, SEO, серверный рендеринг (SSR) и генерация статики (SSG).

Next.js — это мета-фреймворк поверх React, который предоставляет все эти инструменты «из коробки». В версии 15 основной упор сделан на React Server Components (RSC). Это парадигма, позволяющая рендерить компоненты на сервере, отправляя клиенту только необходимый HTML и минимальное количество JavaScript.

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

Для начала работы вам потребуется установленный Node.js. Next.js 15 требует Node.js версии 18.17.0 или выше.

Чтобы создать новый проект, откройте терминал и выполните следующую команду:

Здесь my-next-app — это название вашей папки с проектом. В процессе установки CLI (интерфейс командной строки) задаст вам несколько вопросов. Рекомендуется выбирать следующие настройки для современного стека:

  • 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? — Yes. (Помогает отделить исходный код от конфигурационных файлов).
  • Would you like to use App Router? (recommended) — Yes. (Это современный способ построения приложений в Next.js, который мы будем изучать).
  • Would you like to customize the default import alias (@/*)? — No (или Yes, если хотите изменить алиас, но стандартный @ вполне удобен).
  • Would you like to use Turbopack for next dev? — Yes. (Это новый быстрый сборщик, который значительно ускоряет локальную разработку).

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

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

    Структура проекта

    Давайте разберем, что именно создала команда create-next-app. Понимание структуры — ключ к комфортной разработке.

    !Схематичное изображение файловой структуры типичного проекта на Next.js 15.

    Основные файлы и папки

    * package.json: Список зависимостей и скриптов. Здесь вы увидите next, react, react-dom. * next.config.js (или .ts): Конфигурационный файл Next.js. Здесь настраиваются редиректы, переменные окружения, настройки изображений и многое другое. * public/: Папка для статических файлов (картинки, шрифты, robots.txt), которые должны быть доступны напрямую через URL (например, http://localhost:3000/logo.png). * src/: Папка с исходным кодом (если вы выбрали эту опцию при установке).

    Папка app (App Router)

    Внутри src/ находится папка app. Это сердце вашего приложения. В Next.js 15 используется файловая маршрутизация. Это означает, что структура папок внутри app напрямую определяет URL-адреса вашего сайта.

    Внутри app вы найдете два критически важных файла:

  • layout.tsx: Корневой макет. Он оборачивает все страницы вашего приложения. Здесь обычно находятся теги <html> и <body>. Если вы хотите добавить навигационную панель (Navbar) или подвал (Footer), которые будут видны на всех страницах, их нужно добавить именно сюда.
  • page.tsx: Главная страница вашего сайта (Home Page). То, что рендерится внутри этого файла, будет доступно по адресу /.

    • Основы App Router и Маршрутизация

    Система App Router построена на концепции вложенных маршрутов и специальных файлов. Давайте рассмотрим, как создавать новые страницы.

    Создание маршрутов

    Чтобы создать новый маршрут (страницу), нужно создать новую папку внутри app и поместить в неё файл page.tsx.

    Пример: Мы хотим создать страницу «О нас» по адресу http://localhost:3000/about.

  • Создайте папку about внутри src/app.
  • Внутри папки about создайте файл page.tsx.
  • Добавьте следующий код:

    • Теперь, если вы перейдете по адресу /about, Next.js автоматически отобразит этот компонент.

    > Важно: Компонент должен быть экспортирован по умолчанию (export default). Название функции может быть любым, но принято называть его осмысленно, например AboutPage.

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

    Вы можете создавать вложенные структуры любой глубины.

    * Путь к файлу: src/app/blog/first-post/page.tsx * URL: /blog/first-post

    Если в папке нет файла page.tsx, то этот путь не будет доступен как страница (это может быть полезно для группировки компонентов).

    !Иллюстрация того, как вложенность папок трансформируется в URL-адрес.

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

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

    * page.tsx: Уникальный UI маршрута (сама страница). * layout.tsx: Общий UI для сегмента и его потомков (обертка). * loading.tsx: UI загрузки (показывается, пока грузится содержимое страницы). * not-found.tsx: UI для ошибки 404. * error.tsx: UI для обработки ошибок.

    Навигация между страницами

    В традиционном HTML для ссылок используется тег <a>. В Next.js для переходов между внутренними страницами следует использовать компонент <Link> из пакета next/link.

    Почему не <a>? Тег <a> вызывает полную перезагрузку страницы (Hard Refresh). Компонент <Link> делает переход «мягким» (Client-side navigation): JavaScript подменяет контент, сохраняя состояние приложения, что работает намного быстрее и выглядит плавнее.

    Пример использования в src/app/page.tsx:

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

    Одной из ключевых особенностей Next.js 15 (App Router) является то, что все компоненты по умолчанию являются серверными (Server Components).

    Это означает:

  • Код компонента выполняется на сервере.
  • Вы можете напрямую обращаться к базе данных или файловой системе внутри компонента.
  • Код этого компонента не попадает в бандл JavaScript, который скачивает браузер (меньше размер — быстрее загрузка).

    • Если вам нужно использовать интерактивность (например, useState, useEffect или обработчики событий onClick), вы должны явно пометить компонент директивой 'use client' в самой первой строке файла.

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

    Заключение

    Мы успешно установили Next.js 15, разобрали структуру проекта и научились создавать простые маршруты. App Router предлагает интуитивно понятную файловую систему для маршрутизации, где папки определяют URL, а файлы page.tsx — контент.

    В следующей статье мы углубимся в работу с макетами (layout.tsx), научимся оптимизировать шрифты и изображения, а также разберем работу с метаданными для SEO.

    2. Маршрутизация и UI: Вложенные макеты, динамические пути и обработка ошибок

    Маршрутизация и UI: Вложенные макеты, динамические пути и обработка ошибок

    В предыдущей статье мы установили Next.js 15, изучили структуру проекта и создали наши первые статические страницы. Но современные веб-приложения редко состоят только из статического контента с простыми URL. Нам часто требуется создавать общие оболочки для групп страниц (например, панель администратора), генерировать страницы на основе данных из базы (карточки товаров) и грациозно обрабатывать ошибки, чтобы пользователь не видел белый экран смерти.

    В этой статье мы углубимся в возможности App Router и разберем три кита продвинутой маршрутизации: вложенные макеты (layouts), динамические сегменты пути и специальные файлы для обработки состояний загрузки и ошибок.

    Вложенные макеты (Nested Layouts)

    Вы уже знакомы с корневым макетом src/app/layout.tsx. Он обязателен и определяет каркас всего приложения (html и body). Однако сила Next.js заключается в возможности создавать вложенные макеты.

    Зачем нужны вложенные макеты?

    Представьте, что вы разрабатываете интернет-магазин. У вас есть личный кабинет пользователя, доступный по адресу /dashboard. Внутри этого раздела есть страницы /dashboard/settings и /dashboard/orders. Все эти страницы должны иметь общую боковую панель навигации (Sidebar), которая отличается от навигации на главной странице сайта.

    Вместо того чтобы импортировать компонент Sidebar на каждую страницу вручную, мы можем создать файл layout.tsx внутри папки dashboard.

    !Иерархия вложенности макетов: как корневой макет оборачивает вложенный, а тот — страницу.

    Как это работает

    Макеты в Next.js работают по принципу матрешки. Корневой макет оборачивает макет раздела, а макет раздела оборачивает страницу.

    Создадим структуру для примера выше:

  • Создайте папку src/app/dashboard.
  • Внутри создайте файл layout.tsx.

    • Теперь любой файл page.tsx, находящийся внутри папки dashboard (или её подпапках), будет автоматически отображаться внутри блока {children} этого макета.

    > Важное отличие: При переходе между страницами внутри одного макета, состояние макета сохраняется. Это означает, что если вы прокрутили боковую панель вниз или ввели текст в поле поиска в шапке макета, при переходе с /dashboard/settings на /dashboard/orders эти данные не сбросятся, а сам макет не будет перерисован заново.

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

    Часто мы не знаем заранее точные URL-адреса страниц. Например, у нас может быть блог с тысячами статей или каталог с миллионом товаров. Мы не можем создать файл page.tsx для каждого товара вручную. Здесь на помощь приходят динамические маршруты.

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

    Чтобы сделать сегмент пути динамическим, нужно заключить название папки в квадратные скобки: [folderName].

    Допустим, мы хотим создать страницу товара, которая будет доступна по адресу /products/1, /products/2 и так далее.

  • Создайте папку src/app/products.
  • Внутри неё создайте папку [id].
  • Внутри [id] создайте page.tsx.

    • Путь к файлу: src/app/products/[id]/page.tsx.

    Получение параметров в Next.js 15

    В Next.js 15 произошло важное изменение в работе с параметрами. Теперь params — это асинхронное свойство (Promise). Это сделано для подготовки к будущим оптимизациям ввода-вывода.

    Вот как правильно читать параметры URL в компоненте страницы:

    Если вы перейдете по адресу /products/iphone-15, на странице отобразится: "ID товара: iphone-15".

    Генерация статических параметров (generateStaticParams)

    Если вы хотите, чтобы эти динамические страницы были статически сгенерированы (SSG) во время сборки приложения (для лучшего SEO и производительности), вы можете использовать функцию generateStaticParams.

    Потоковая передача и состояние загрузки (Loading UI)

    Next.js 15 активно использует возможности React Suspense. Специальный файл loading.tsx позволяет создать мгновенное состояние загрузки, которое будет показано пользователю, пока содержимое страницы (Server Component) еще грузится или запрашивает данные.

    Как использовать

    Просто создайте файл loading.tsx в той же папке, где находится ваш page.tsx.

    Теперь, если page.tsx в этой папке выполняет долгий асинхронный запрос к базе данных, пользователь сразу увидит компонент Loading. Как только данные будут готовы, Next.js автоматически заменит индикатор загрузки на реальный контент.

    Это значительно улучшает UX (User Experience), так как приложение кажется более отзывчивым.

    Обработка ошибок (Error Handling)

    Ошибки случаются. API может упасть, база данных стать недоступной, или в коде может закрасться баг. Next.js предоставляет механизм для локализации ошибок с помощью файла error.tsx.

    Особенности error.tsx

    Файл error.tsx создает границу ошибок (Error Boundary) React. Если в page.tsx или любом его дочернем компоненте произойдет ошибка, Next.js не сломает всё приложение, а покажет компонент из error.tsx вместо упавшего сегмента.

    Важные правила:

  • error.tsx обязан быть клиентским компонентом. В начале файла нужно добавить 'use client'.
  • Он принимает два пропса: error (объект ошибки) и reset (функция для попытки восстановления).

    • Пример:

    Страница 404 (Not Found)

    Для обработки случаев, когда ресурс не найден, используется файл not-found.tsx. Он работает аналогично, но вызывается, когда вы используете функцию notFound() из next/navigation или когда пользователь переходит по несуществующему URL.

    Продвинутые шаблоны маршрутизации

    В завершение кратко рассмотрим еще два полезных паттерна.

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

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

    Например, структура src/app/(marketing)/about/page.tsx будет доступна просто по адресу /about. Папка (marketing) игнорируется в URL, но позволяет вам создать для этой группы свой уникальный layout.tsx.

    Catch-all Segments

    Если вам нужно захватить не один сегмент пути, а сразу несколько (например, /docs/feature/installation/manual), используйте многоточие внутри скобок: [...slug].

    * Файл: src/app/docs/[...slug]/page.tsx * URL /docs/a -> params будет { slug: ['a'] } * URL /docs/a/b -> params будет { slug: ['a', 'b'] }

    Заключение

    Мы разобрали мощные инструменты маршрутизации Next.js 15. Теперь вы умеете: * Создавать вложенные макеты для сложного UI. * Работать с динамическими путями и правильно извлекать параметры (не забывая про await params!). * Создавать плавный UX с помощью loading.tsx. * Обрабатывать ошибки, не ломая всё приложение, через error.tsx.

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

    3. Работа с данными: Серверные компоненты, Server Actions и стратегии кэширования

    Работа с данными: Серверные компоненты, Server Actions и стратегии кэширования

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

    В Next.js 15 работа с данными кардинально отличается от того, к чему вы могли привыкнуть в классическом React (с его useEffect) или старых версиях Next.js (getServerSideProps). Мы переходим к модели, где данные загружаются там, где они нужны, а мутации (изменения данных) происходят через серверные действия (Server Actions).

    Получение данных в серверных компонентах

    Как мы помним, в App Router все компоненты по умолчанию являются серверными (React Server Components — RSC). Это открывает перед нами уникальную возможность: мы можем получать данные прямо внутри компонента, используя асинхронные функции.

    Прямой доступ к данным

    Вам больше не нужно создавать API-роут, чтобы получить список пользователей из базы данных, а затем вызывать этот API с клиента. Вы можете импортировать ORM (например, Prisma или Drizzle) или SDK базы данных прямо в файл компонента.

    Преимущества такого подхода:

  • Отсутствие водопадов (Waterfalls) на клиенте: Браузер получает уже готовый HTML с данными. Ему не нужно скачивать JS, парсить его, запускать эффект и ждать ответа от сервера.
  • Безопасность: Код, работающий с базой данных, никогда не попадает в браузер.
  • Производительность: Сервер Next.js обычно находится в том же регионе (или даже в той же сети), что и ваша база данных, что минимизирует задержки.

    • Использование Fetch API

    Если ваши данные находятся во внешнем API, вы используете стандартный fetch. Однако в Next.js этот метод расширен дополнительными возможностями для управления кэшированием.

    Стратегии кэширования

    Кэширование — это механизм сохранения копии данных для ускорения последующих запросов. В Next.js 15 управление кэшем стало более явным и гибким.

    !Схематичное изображение работы Data Cache: проверка наличия данных перед обращением к источнику.

    Статическое и динамическое получение данных

    По умолчанию Next.js пытается кэшировать запросы fetch, чтобы улучшить производительность. Однако поведение зависит от того, как вы настроите запрос.

    #### 1. Принудительное кэширование (Force Cache)

    Если данные меняются редко (например, список категорий товаров), мы хотим загрузить их один раз при сборке и использовать всегда.

    Это аналог getStaticProps из старых версий. Данные будут получены во время сборки (npm run build) и сохранены.

    #### 2. Отключение кэширования (No Store)

    Если данные меняются постоянно (например, текущие котировки акций или чат), кэш нам не нужен.

    Это аналог getServerSideProps. Запрос будет выполняться при каждом обновлении страницы.

    > Примечание: В Next.js 15 функции, использующие динамические данные (например, cookies() или headers()), автоматически переключают запрос в режим без кэширования, если не указано иное.

    #### 3. Ревалидация по времени (ISR)

    Часто нам нужен компромисс: кэшировать данные, но обновлять их периодически. Это называется Incremental Static Regeneration (ISR).

    В этом примере данные будут считаться свежими в течение 3600 секунд (1 час). Первый пользователь, зашедший после истечения часа, запустит фоновое обновление кэша.

    Server Actions: Изменение данных

    До сих пор мы говорили о чтении данных. Но как их изменять? Раньше для отправки формы нам нужно было создавать API Route (/api/submit), писать обработчик POST, а на клиенте делать fetch с методом POST, обрабатывать JSON и состояния загрузки.

    Next.js 15 предлагает Server Actions — асинхронные функции, которые выполняются на сервере, но могут быть вызваны из клиентских или серверных компонентов (например, через атрибут action формы).

    Создание Server Action

    Чтобы объявить функцию как серверное действие, необходимо использовать директиву 'use use server' в теле функции или в начале файла.

    Рассмотрим пример создания задачи (Todo):

    Использование в компоненте

    Теперь мы можем импортировать эту функцию и использовать её прямо в форме.

    Что происходит под капотом? Когда пользователь отправляет форму, Next.js делает POST-запрос к тому же URL, автоматически вызывая функцию createTodo на сервере. После выполнения функции страница может быть автоматически обновлена.

    RevalidatePath: Обновление UI

    Обратите внимание на функцию revalidatePath('/todos') в примере выше. Это критически важный элемент Server Actions.

    Поскольку Next.js кэширует данные, после добавления новой задачи в базу данных, пользователь может всё ещё видеть старый список задач из кэша. Функция revalidatePath говорит Next.js: «Данные по этому пути устарели, пожалуйста, очисти кэш и перезапроси их при следующем рендере».

    !Иллюстрация цикла работы Server Action: от отправки формы до обновления интерфейса.

    Server Actions в клиентских компонентах

    Хотя Server Actions выполняются на сервере, их можно передавать в клиентские компоненты (те, что с 'use client'). Это полезно, если вам нужна интерактивность, например, очистка формы после отправки или показ всплывающего уведомления (Toast).

    Паттерны загрузки данных

    Параллельная загрузка

    Если компоненту нужны данные из нескольких источников, старайтесь запускать запросы параллельно, чтобы избежать эффекта «водопада» (когда второй запрос ждет завершения первого).

    Плохо (последовательно):

    Хорошо (параллельно):

    Suspense для потоковой передачи

    Как мы обсуждали в статье про маршрутизацию, вы можете обернуть компоненты, загружающие данные, в <Suspense>. Это позволяет показать часть интерфейса немедленно, пока тяжелые данные еще грузятся.

    Заключение

    Next.js 15 предоставляет мощный инструментарий для работы с данными. Мы ушли от сложных API-прослоек к прямому доступу к данным в серверных компонентах и интуитивным Server Actions для мутаций.

    Ключевые выводы: * Используйте Server Components для получения данных. * Управляйте кэшем через параметры fetch (force-cache, no-store, revalidate). * Используйте Server Actions для обработки форм и изменения данных. * Не забывайте про revalidatePath, чтобы обновить интерфейс после изменений.

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

    4. Оптимизация и рендеринг: Partial Prerendering, изображения, шрифты и SEO

    Оптимизация и рендеринг: Partial Prerendering, изображения, шрифты и SEO

    В предыдущих статьях мы прошли путь от установки Next.js 15 до создания сложных серверных действий для работы с данными. Теперь у нас есть функциональное приложение. Но функциональность — это только половина успеха. В современном вебе пользователи не прощают медленной загрузки, а поисковые системы пессимизируют сайты с плохой производительностью.

    В этой статье мы сосредоточимся на том, как сделать ваше приложение молниеносным и видимым для поисковиков. Мы разберем новую парадигму рендеринга Partial Prerendering (PPR), научимся оптимизировать медиа-контент и настроим SEO так, чтобы ваш сайт красиво выглядел при отправке ссылок в соцсетях.

    Эволюция рендеринга: Partial Prerendering (PPR)

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

    SSG — это быстро, но не подходит для динамических данных. SSR — это актуально, но медленно, так как пользователь ждет, пока сервер подготовит всю страницу.

    Next.js 15 вводит (в статусе экспериментальной, но важной функции) Partial Prerendering (PPR). Это попытка объединить лучшее из обоих миров в рамках одной страницы.

    Как работает PPR?

    Представьте вашу страницу как пазл. У вас есть «оболочка» (Shell): шапка, навигация, подвал и статический текст. Эти части не меняются для разных пользователей. Но внутри есть «дырки» для динамического контента: корзина пользователя, персональные рекомендации или лента новостей.

    !Визуализация концепции Partial Prerendering: статическая оболочка и динамические отверстия.

    При использовании PPR:

  • Сервер мгновенно отправляет статическую оболочку (как при SSG).
  • Параллельно сервер начинает вычислять динамические части.
  • Динамические части «стримятся» (потоковая передача) в браузер по мере готовности и вставляются в нужные места.

    • Вам не нужно писать сложный код для этого. Достаточно обернуть динамические части в компонент <Suspense>, о котором мы говорили в прошлой статье.

    Чтобы включить PPR в Next.js 15, нужно добавить настройку в next.config.js:

    Оптимизация изображений

    Изображения занимают большую часть трафика в вебе. Обычный тег <img> имеет ряд проблем: * Он загружает картинку, даже если она находится далеко внизу страницы. * Он может вызывать сдвиг макета (Layout Shift), когда картинка загружается и «расталкивает» текст. * Он не адаптирует формат и размер под устройство пользователя.

    Next.js предоставляет компонент <Image /> из пакета next/image, который решает эти проблемы автоматически.

    Основные возможности next/image

  • Автоматическое изменение размера: Next.js создает несколько версий изображения разных размеров и отдает браузеру самую подходящую (маленькую для телефона, большую для 4K монитора).
  • Современные форматы: Изображения автоматически конвертируются в легкие форматы WebP или AVIF.
  • Lazy Loading: Картинки загружаются только тогда, когда пользователь доскроллил до них.
  • Зарезервированное место: Компонент требует указать размеры (или соотношение сторон), чтобы избежать сдвигов макета.

    • Пример использования

    > Важно: Для использования удаленных изображений (по ссылке) необходимо добавить домен в разрешенный список в файле next.config.js.

    Оптимизация шрифтов

    Шрифты — еще один критический ресурс. Использование нестандартных шрифтов часто приводит к двум проблемам:

  • FOIT (Flash of Invisible Text): Текст невидим, пока шрифт не загрузится.
  • FOUT (Flash of Unstyled Text): Сначала показывается стандартный шрифт (например, Arial), а потом он резко меняется на красивый, вызывая сдвиг контента.

    • Next.js 15 имеет встроенный модуль next/font, который решает эти проблемы. Он автоматически скачивает шрифты (даже Google Fonts) во время сборки и хостит их вместе с вашими статическими файлами. Никаких запросов к серверам Google из браузера пользователя!

    Подключение Google Fonts

    Использование next/font гарантирует Zero Layout Shift. Next.js автоматически подбирает параметры запасного системного шрифта так, чтобы он занимал ровно столько же места, сколько и загружаемый шрифт.

    SEO и Метаданные

    Поисковая оптимизация (SEO) критически важна для публичных сайтов. В Next.js 15 (App Router) управление мета-тегами (<title>, <meta name="description">) происходит через экспорт специального объекта или функции.

    Статические метаданные

    Для страниц, где заголовок и описание известны заранее, используйте объект metadata в файле layout.tsx или page.tsx.

    Динамические метаданные

    Для страниц товаров или статей блога, где заголовок зависит от контента, используйте функцию generateMetadata.

    Sitemap и Robots

    Next.js позволяет генерировать файлы sitemap.xml и robots.txt программно. Для этого нужно создать файлы sitemap.ts и robots.ts в папке app.

    Пример src/app/sitemap.ts:

    Core Web Vitals

    Все описанные выше оптимизации направлены на улучшение метрик Core Web Vitals, которые Google использует для ранжирования сайтов.

    * LCP (Largest Contentful Paint): Скорость загрузки основного контента. Улучшается благодаря next/image (свойство priority) и PPR. * CLS (Cumulative Layout Shift): Стабильность макета. Улучшается благодаря указанию размеров в next/image и использованию next/font. * INP (Interaction to Next Paint): Отзывчивость интерфейса. Улучшается благодаря использованию серверных компонентов (меньше JS на клиенте) и стримингу.

    Заключение

    Оптимизация в Next.js 15 — это не сложный процесс настройки конфигураций, а использование встроенных компонентов.

  • Используйте Partial Prerendering для мгновенной отдачи статики.
  • Заменяйте тег <img> на <Image />.
  • Подключайте шрифты через next/font.
  • Заполняйте Metadata API для каждой страницы.

    • Теперь ваше приложение не только работает, но и «летает». В следующей, заключительной статье курса, мы разберем процесс деплоя (развертывания) приложения в продакшн, работу с переменными окружения и мониторинг ошибок.

    5. Сборка и деплой: Использование Turbopack и публикация приложения

    Сборка и деплой: Использование Turbopack и публикация приложения

    Поздравляем! Вы прошли долгий путь от установки Next.js 15 до создания сложного приложения с серверными действиями и оптимизированным контентом. Теперь у вас есть полностью функциональный проект, который работает на вашем локальном компьютере. Но веб-разработка не заканчивается на localhost:3000.

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

    Turbopack: Двигатель нового поколения

    Во время разработки вы, вероятно, заметили, что Next.js запускается и обновляет изменения практически мгновенно. За это отвечает Turbopack.

    Что такое Turbopack?

    Долгое время стандартом в мире JavaScript был Webpack. Это мощный инструмент, но он был написан на JavaScript и со временем стал медленным для огромных проектов. Команда Vercel (создатели Next.js) решила переосмыслить процесс сборки и создала Turbopack.

    Turbopack — это инкрементальный бандлер (сборщик), написанный на языке Rust. Rust известен своей невероятной производительностью и безопасностью работы с памятью.

    !Сравнение производительности: Webpack пересобирает зависимости, Turbopack обновляет только изменения.

    Почему он такой быстрый?

    Главный секрет Turbopack — инкрементальные вычисления. Когда вы меняете файл, Turbopack не пересчитывает весь проект заново. Он помнит результаты предыдущей сборки и обновляет только то, что действительно изменилось, и то, что от этого зависит.

    В Next.js 15 Turbopack используется по умолчанию для локальной разработки (next dev), обеспечивая мгновенный Hot Module Replacement (HMR). Это значит, что изменения в CSS или JSX появляются в браузере быстрее, чем вы успеваете переключить окно.

    Переменные окружения (Environment Variables)

    Перед тем как отправить приложение на сервер, нужно позаботиться о безопасности. В вашем коде наверняка есть данные, которые нельзя показывать посторонним: пароли от базы данных, секретные ключи API (API Keys) или токены доступа.

    Next.js имеет встроенную поддержку переменных окружения. Они хранятся в файле .env в корне проекта.

    Типы файлов .env

    * .env: Общие настройки для всех окружений (обычно не содержит секретов). * .env.local: Локальные настройки разработчика. Этот файл должен быть добавлен в .gitignore и никогда не должен попадать в репозиторий (GitHub/GitLab). * .env.production: Настройки, специфичные для продакшена.

    Пример содержимого .env.local:

    Доступ к переменным

  • На сервере: Внутри серверных компонентов, Server Actions или API-роутов вы можете обращаться к переменным через process.env.VARIABLE_NAME. Эти данные никогда не попадут в браузер пользователя.

  • На клиенте: Если вам нужно использовать переменную в браузере (например, ID для Google Analytics), вы обязаны добавить префикс NEXT_PUBLIC_ к названию переменной. Next.js встроит значение этой переменной в JavaScript-код, который скачает пользователь.

    • Процесс сборки (Build)

    Когда вы запускаете команду npm run dev, Next.js работает в режиме разработки: он не оптимизирует код, добавляет много отладочной информации и компилирует страницы «на лету».

    Для продакшена нам нужно создать максимально оптимизированную версию приложения. Это делается командой:

    Что происходит во время билда?

  • Компиляция: Весь TypeScript и современный JavaScript транспилируется в код, понятный браузерам.
  • Минификация: Удаляются пробелы, комментарии, сокращаются имена переменных для уменьшения размера файлов.
  • Генерация статики (SSG): Next.js находит страницы, которые не требуют динамических данных, и превращает их в чистый HTML.
  • Оптимизация изображений и шрифтов: Подготавливаются конфигурации для next/image и next/font.

    • После завершения команды вы увидите отчет в терминале:

    !Отчет о сборке Next.js показывает типы маршрутов и размер итоговых файлов.

    Легенда символов: * ○ (Static): Статический HTML, сгенерированный при сборке. * ƒ (Dynamic): Серверный рендеринг (SSR), выполняется при каждом запросе.

    После успешной сборки вы можете запустить локальную эмуляцию продакшен-сервера командой npm run start, чтобы проверить, как всё работает.

    Деплой (Развертывание)

    Существует два основных способа запустить Next.js приложение в интернете: управляемый хостинг (Vercel) и самостоятельный хостинг (Docker/Node.js).

    Вариант 1: Vercel (Рекомендуемый)

    Next.js и Vercel создаются одной командой, поэтому их интеграция идеальна. Это самый простой способ.

    Шаги:

  • Загрузите ваш код на GitHub, GitLab или Bitbucket.
  • Зарегистрируйтесь на vercel.com.
  • Нажмите Add New Project и выберите ваш репозиторий.
  • Vercel автоматически определит, что это проект на Next.js.
  • В разделе Environment Variables добавьте ваши секретные ключи (из .env.local).
  • Нажмите Deploy.

    • Через минуту ваше приложение будет доступно по адресу https://your-project.vercel.app. Vercel автоматически настраивает HTTPS, CDN, кэширование и масштабирование.

    Вариант 2: Docker и Self-Hosting

    Если вы хотите разместить приложение на собственном VPS (например, DigitalOcean, AWS EC2 или корпоративный сервер), лучше всего использовать Docker.

    Next.js поддерживает режим standalone, который значительно уменьшает размер Docker-образа. Он копирует только необходимые файлы, исключая огромную папку node_modules с зависимостями для разработки.

    Настройка:

  • Откройте next.config.js и добавьте:

  • Создайте файл Dockerfile в корне проекта. Вот пример оптимизированного Dockerfile:

    • Этот Dockerfile использует многоступенчатую сборку (multi-stage build), чтобы итоговый образ весил минимально возможное количество мегабайт.

    Мониторинг и аналитика

    После запуска приложения важно знать, как оно работает у пользователей.

    * Vercel Analytics: Если вы используете Vercel, вы можете включить аналитику одной кнопкой. Она покажет реальную производительность (Core Web Vitals) на устройствах пользователей. * Sentry: Для отслеживания ошибок (когда у пользователя что-то сломалось) стандартным решением является Sentry. Он интегрируется в Next.js и присылает уведомления, если в error.tsx сработал перехват исключения.

    Заключение курса

    Мы завершили курс Next.js 15: Полное руководство по современной веб-разработке.

    Давайте вспомним, чему мы научились:

  • App Router: Мы освоили файловую маршрутизацию и вложенные макеты.
  • Server Components: Мы научились рендерить компоненты на сервере для максимальной производительности.
  • Data Fetching: Мы ушли от useEffect к прямым запросам в БД и Server Actions.
  • Оптимизация: Мы настроили шрифты, изображения и SEO.
  • Деплой: Мы подготовили приложение к публикации.

    • Next.js 15 — это мощный инструмент, который стирает грань между фронтендом и бэкендом, позволяя одному разработчику создавать полноценные, быстрые и масштабируемые продукты. Теперь дело за вами — создавайте, экспериментируйте и запускайте свои идеи в мир!

    Удачи в разработке!