CLI Next.js

CLI Next.js позволяет запускать, собирать и экспортировать ваше приложение.

Чтобы получить список доступных команд CLI, выполните следующую команду в директории вашего проекта:

npx next -h

(npx поставляется с npm 5.2+ и выше)

Вывод должен выглядеть следующим образом:

Использование
  $ next <команда>

Доступные команды
  build, start, export, dev, lint, telemetry, info

Опции
  --version, -v   Номер версии
  --help, -h      Показать это сообщение

Для получения дополнительной информации запустите команду с флагом --help
  $ next build --help

Вы можете передавать любые аргументы Node.js в команды next:

NODE_OPTIONS='--throw-deprecation' next
NODE_OPTIONS='-r esm' next
NODE_OPTIONS='--inspect' next

Полезно знать: Запуск next без команды эквивалентен next dev

Сборка

next build создает оптимизированную production-сборку вашего приложения. В выводе отображается информация о каждом маршруте.

• Size (Размер) – Количество ресурсов, загружаемых при переходе на страницу на стороне клиента. Размер для каждого маршрута включает только его зависимости.
• First Load JS (Первоначальная загрузка JS) – Количество ресурсов, загружаемых при посещении страницы с сервера. Объем JS, общего для всех страниц, показан отдельно.

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

Вы можете включить профилирование React для production с помощью флага --profile в next build. Требуется Next.js 9.5:

next build --profile

После этого вы можете использовать профилировщик так же, как и в режиме разработки.

Вы можете включить более подробный вывод сборки с помощью флага --debug в next build. Требуется Next.js 9.5.3:

next build --debug

При включении этого флага будут отображаться дополнительные данные сборки, такие как редиректы, перезаписи и заголовки.

Разработка

next dev запускает приложение в режиме разработки с горячей перезагрузкой кода, отчетом об ошибках и другими функциями:

Приложение по умолчанию будет доступно по адресу http://localhost:3000. Порт по умолчанию можно изменить с помощью -p, например:

npx next dev -p 4000

Или с использованием переменной окружения PORT:

PORT=4000 npx next dev

Полезно знать: PORT нельзя установить в .env, так как HTTP-сервер запускается до инициализации другого кода.

Вы также можете изменить hostname, отличный от значения по умолчанию 0.0.0.0, что может быть полезно для доступа к приложению с других устройств в сети. Hostname по умолчанию можно изменить с помощью -H, например:

npx next dev -H 192.168.1.2

Продакшен

next start запускает приложение в production-режиме. Приложение должно быть предварительно собрано с помощью next build.

Приложение по умолчанию будет доступно по адресу http://localhost:3000. Порт по умолчанию можно изменить с помощью -p, например:

npx next start -p 4000

Или с использованием переменной окружения PORT:

PORT=4000 npx next start

Полезно знать:

• PORT нельзя установить в .env, так как HTTP-сервер запускается до инициализации другого кода.

• next start нельзя использовать с output: 'standalone' или output: 'export'.

Таймаут Keep-Alive

При развертывании Next.js за прокси (например, за балансировщиком нагрузки, таким как AWS ELB/ALB) важно настроить HTTP-сервер Next.js с таймаутами keep-alive, которые больше, чем таймауты прокси. В противном случае, как только будет достигнут таймаут keep-alive для TCP-соединения, Node.js немедленно завершит это соединение без уведомления прокси. Это приводит к ошибке прокси при попытке повторно использовать соединение, которое Node.js уже завершил.

Чтобы настроить значения таймаутов для production-сервера Next.js, передайте --keepAliveTimeout (в миллисекундах) в next start, например:

npx next start --keepAliveTimeout 70000

Линтинг

next lint запускает ESLint для всех файлов в директориях pages/, app/, components/, lib/ и src/. Также предоставляется пошаговая настройка для установки необходимых зависимостей, если ESLint еще не настроен в вашем приложении.

Если у вас есть другие директории, которые вы хотите проверить, вы можете указать их с помощью флага --dir:

next lint --dir utils

Телеметрия

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

Чтобы узнать больше о телеметрии, прочитайте этот документ.

Информация о системе

next info выводит актуальные сведения о текущей системе, которые могут быть использованы для сообщения об ошибках в Next.js. Эта информация включает платформу/архитектуру/версию операционной системы, версии бинарных файлов (Node.js, npm, Yarn, pnpm) и версии npm-пакетов (next, react, react-dom).

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

next info

даст вам информацию, подобную этой:

Операционная система:
  Платформа: linux
  Архитектура: x64
  Версия: #22-Ubuntu SMP Fri Nov 5 13:21:36 UTC 2021
Бинарные файлы:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: 6.24.2
Релевантные пакеты:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

Эту информацию следует вставлять в Issues на GitHub.

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