Next.js: что это за фреймворк и как с ним работать

Что такое Next.js и для чего он нужен

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

Например, каталог показывает описания товаров с сервера, а фильтры работают в браузере. Next.js объединяет эти части проекта. Содержание, дизайн и бизнес-логику вы разрабатываете отдельно.

Название nextjs обычно означает тот же фреймворк Next.js от Vercel. Для старта нужны JavaScript, HTML, CSS и основы React. Официальный сайт предлагает документацию и шаблоны, включая блог и магазин. Проверяйте зависимости и условия использования выбранного шаблона.

Кому подходит Next.js: преимущества и ограничения

Next.js подходит, когда публичные страницы и личный кабинет требуют разных способов загрузки данных. Статью удобно подготовить заранее, состояние заказа нужно получать с проверкой пользователя. Для новичка полезен учебный блог, для бизнеса: каталог или сервис с интеграциями.

Готовой панели редактора и товарной базы здесь нет. Для обновления материалов без программиста подключите CMS. Для визитки сравните затраты с обычной вёрсткой: сборка и поддержка приложения могут оказаться избыточными.

Установка Next.js и запуск первого проекта

Сначала установите Node.js, среду выполнения JavaScript вне браузера. Проверьте установку командой node -v. На сентябрь 2026 года минимум для Next.js по документации: 20.9. Для нового проекта выбирайте поддерживаемую LTS-ветку, совместимую с этим требованием. Поддерживаются Windows, macOS и Linux.

В терминале выполните npx create-next-app@latest my-app. Утилита создаст папку my-app с проектом Next.js. Выберите ручную настройку, TypeScript и App Router, без src. TypeScript проверяет типы, ESLint находит проблемы кода, Tailwind CSS помогает оформлять интерфейс.

Выполните cd my-app, затем npm run dev. Откройте http://localhost:3000. При занятом порте смотрите адрес в терминале. Сервер разработки Next.js может слушать сетевые интерфейсы; для доступа только с вашего компьютера используйте npm run dev -- --hostname 127.0.0.1.

Флаг --yes пропускает вопросы установщика и использует сохранённые предпочтения или настройки по умолчанию. Проверьте их перед копированием примеров. Turbopack в Next.js отвечает за сборку приложения.

npx create-next-app@latest my-app
cd my-app
npm run dev

Структура проекта: app, layout и public

В App Router файловая маршрутизация связывает папки и URL. Главная находится в app/page.tsx или src/app/page.tsx при выборе src. В JavaScript используются page.js и layout.js.

Файл layout задаёт общий макет: навигацию и нижнюю часть сайта. Корневой макет содержит html и body. Вложенный layout оформляет конкретный раздел.

Папка pages относится к Pages Router, который по-прежнему поддерживается. Ниже используется App Router с каталогом app. Примеры с pages/index.js требуют других соглашений.

Как создать страницу в Next.js и добавить ссылку

Создайте app/about/page.tsx с примером ниже и откройте /about. Next.js определит маршрут по файлу. Отдельный список адресов не нужен.

export default function объявляет функцию страницы, return возвращает разметку: main, заголовок h1 и ссылку. Для изменения главной отредактируйте app/page.tsx.

import Link from подключает компонент Link из next/link. Атрибут href задаёт адрес. Link обеспечивает клиентскую навигацию и предварительную загрузку, чтобы переходы обходились без полной перезагрузки документа.

Динамический маршрут для каталога

Папка [slug] обозначает переменную часть адреса. Файл app/blog/[slug]/page.tsx становится шаблоном записей блога. В асинхронной странице Next.js получите значение через const { slug } = await params. В TypeScript тип параметра: Promise<{ slug: string }>.

По slug загрузите запись из базы. Если записи нет, покажите страницу ошибки. При изменении адреса настройте перенаправление со старого URL.

import Link from 'next/link';

export default function AboutPage() {
  return (
    <main>
      <h1>О магазине</h1>
      <p>Здесь можно узнать об оплате и доставке.</p>
      <Link href='/'>На главную</Link>
    </main>
  );
}

Серверные и клиентские компоненты Next.js

В App Router страницы и макеты по умолчанию являются серверными компонентами, Server Components. Они могут читать базу данных без отправки своего кода в браузер. Next.js передаёт результат через HTML и представление дерева интерфейса RSC Payload.

Клиентская часть нужна для кнопок, состояния и браузерных API. Директива «use client» обозначает границу модуля. useState хранит состояние, обработчик нажатия меняет его, useEffect запускает эффекты на клиенте.

При первой загрузке Next.js формирует HTML на сервере и для клиентских компонентов. Браузер подключает обработчики событий к DOM: это гидратация. Поэтому «use client» не означает выполнение исключительно в браузере.

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

Загрузка данных и кэширование в Next.js

В серверной странице async function позволяет использовать await для ожидания данных. Запрос fetch получает ответ API, response.json() разбирает JSON. Сначала проверьте response.ok: ошибка HTTP сама по себе не означает отклонение Promise. Затем отобразите данные или сообщение об ошибке.

Next.js по умолчанию не кэширует ответы fetch между посещениями. Объединение одинаковых запросов внутри рендеринга не заменяет постоянный кэш. Задавайте правила хранения и обновления данных явно, с учётом конфигурации проекта.

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

Как выбирать способ рендеринга

Статическая генерация SSG готовит контент заранее. SSR формирует ответ на сервере при запросе. CSR обновляет интерфейс в браузере. Next.js сочетает подходы: готовый текст статьи и интерактивные комментарии.

ISR обновляет статические страницы без полной пересборки сайта. Это подходит для каталога, где допустима задержка обновления. Механизм ревалидации выбирают с учётом конфигурации кэширования Next.js. Личный заказ требует отдельной проверки актуальности и доступа.

Для ожидания данных используйте loading.tsx или границу Suspense. Посетитель увидит индикатор загрузки, пока сервер готовит остальное содержание. Неперехваченные ошибки дочерних компонентов можно обрабатывать через error.tsx; это отдельный клиентский компонент.

API и серверные действия в Next.js

Обработчик маршрута, Route Handler, создаёт API внутри Next.js. Сохраните пример в app/api/status/route.ts и откройте /api/status: GET вернёт JSON. Файлы route.ts и page.ts нельзя размещать в одном сегменте маршрута.

Метод GET читает данные, POST отправляет их. Такой встроенный бэкенд упрощает интеграции. Каждый обработчик должен проверять входные данные и права пользователя.

Server Actions выполняют изменения на сервере без отдельного API-маршрута для формы. Асинхронную функцию помечают директивой «use server» и передают в action формы. Она получает FormData. После сохранения при необходимости обновляют кэш, например через revalidatePath.

«use server» не проверяет права доступа автоматически. Внутри действия подтвердите пользователя, проверьте поля и обработайте отказ записи. Для внешних клиентов используйте HTTP API, для действий собственной формы часто удобнее Server Actions.

export async function GET() {
  return Response.json({ status: 'ok' });
}

Изображения, стили и скорость загрузки

Next.js предлагает Image из next/image для работы с изображениями. Он расширяет возможности обычного img: помогает подбирать размеры и откладывать загрузку картинок вне области просмотра. Чтобы использовать его, импортируйте Image и задайте источник src.

Файл public/product.png доступен как /product.png. При статическом импорте Next.js определяет размеры автоматически. Для внешней картинки задайте width и height либо fill с подготовленным контейнером. Разрешённые внешние адреса укажите в images.remotePatterns файла next.config.ts: протокол, домен и допустимый путь.

Оставьте место под картинку до загрузки. Для адаптивного изображения задайте sizes в соответствии с шириной на экране. Атрибут alt описывает содержание для тех, кто не видит изображение.

Next.js поддерживает обычный CSS, CSS Modules и Tailwind CSS. Файл с расширением .module.css ограничивает действие классов компонентом: import styles from подключает объект классов. Общие стили удобно подключить в корневом layout.

Для шрифтов Next.js используйте next/font/local с локальным файлом или next/font/google. Полученный className назначьте элементу в layout. При next/font/google браузер посетителя получает шрифты с вашего сайта, без запросов к Google. Для сборки без загрузки шрифтов извне выбирайте локальные файлы.

SEO и метаданные в Next.js

Next.js предоставляет объект metadata и функцию generateMetadata для метаданных. В объекте можно задать title и description, а функция подходит для значений, зависящих от данных. Эти экспорты поддерживаются в серверных модулях. Фреймворк формирует соответствующие теги страницы.

Строка export const metadata в примере задаёт заголовок вкладки и описание страницы. Сам заголовок h1 остаётся частью разметки, его нужно добавить отдельно.

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

// Добавьте в app/about/page.tsx перед функцией страницы.
export const metadata = {
  title: 'О магазине',
  description: 'Информация об оплате и доставке.',
};

Сборка Next.js и публикация на сервере

Выполните npm run build для сборки, затем npm run start для запуска готового сервера. В стандартном package.json это команды next build и next start.

Next.js размещают на сервере Node.js, в Docker или через подходящую платформу, например Vercel. Статический экспорт поддерживает только функции без серверного выполнения при запросе. Для личного кабинета и форм с серверными действиями нужен соответствующий серверный вариант.

Подготовьте домен, HTTPS и переменные окружения. Проверьте подключение к данным и права доступа. Сохраните рабочую сборку для возврата после неудачного обновления. Проверьте сайт после npm run build и npm run start, а не только в режиме разработки.

1. Соберите проект и устраните ошибки сборки.
2. Откройте главную страницу и вложенный адрес напрямую.
3. Проверьте форму, фильтры и переходы между разделами.
4. Проверьте результат при недоступном источнике данных.
5. После публикации повторите основной сценарий на телефоне.

Частые ошибки при работе с Next.js

• Копировать примеры другого маршрутизатора. Проверяйте, относятся ли они к app или pages.
• Добавлять «use client» во все файлы. Выделяйте только интерактивные части.
• Ожидать автоматического обновления кэша. Проверяйте результат после редактирования данных.
• Измерять производительность только на пустом экране. Проверяйте реальные данные и изображения при медленном соединении.
• Забывать о редакторе. Если материалы часто меняются, способ их обновления стоит выбрать до начала разработки.
• Публиковать результат без проверки прямых ссылок. Вложенный адрес должен открываться самостоятельно.

Как оценить разработку сайта на Next.js

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

Цена зависит от интерфейса, интеграций и правил обновления данных. В seosite1 цену разработки на Next.js называем после брифа. Минимальный бюджет проекта от 50 тыс. ₽. Поддержку после запуска и критерии приёмки обсудите до начала работы.

Подробнее об услуге: разработка веб-приложений, /uslugi/veb-prilozheniya/. seosite1 делает сайты с 2009 года и работает удалённо по всей России. Оплата по этапам, каждый этап вперёд. Состав работ и сроки называем после брифа.